<html>
標籤是根,分支為 <head>
和 <body>
,進一步分支為其他元素,如 <title>
、<div>
和 <p>
。 JavaScript 可讓您存取、修改、新增、刪除和重新排列這些元素。
<code class="language-javascript">const element = document.getElementById('myId');</code>
<code class="language-javascript">const elements = document.getElementsByClassName('myClass');</code>
<code class="language-javascript">const paragraphs = document.getElementsByTagName('p');</code>
<code class="language-javascript">const firstElement = document.querySelector('.myClass'); // First element matching the selector const allElements = document.querySelectorAll('.myClass'); // All matching elements</code>
<code class="language-javascript">document.getElementById('example').textContent = 'New Text';</code>
<code class="language-javascript">document.getElementById('example').innerHTML = '<b>Bold Text</b>';</code>
<code class="language-javascript">const image = document.querySelector('img'); image.setAttribute('src', 'newImage.jpg'); image.setAttribute('alt', 'New Description');</code>
.style
或 CSS 類別來變更元素外觀:
<code class="language-javascript">const box = document.getElementById('box'); box.style.backgroundColor = 'blue'; box.style.color = 'white'; box.classList.add('active'); box.classList.remove('inactive'); box.classList.toggle('highlight');</code>
<code class="language-javascript">const newDiv = document.createElement('div'); newDiv.textContent = 'I am a new div!'; document.body.appendChild(newDiv);</code>
<code class="language-javascript">const element = document.getElementById('removeMe'); element.remove();</code>
click
、mouseover
、keydown
等
.parentNode
、.parentElement
、.children
、.childNodes
、.nextElementSibling
和 .previousElementSibling
等屬性導航 DOM 樹以存取相關元素。
documentFragment
高效添加多個元素。 innerHTML
:使用createElement
以獲得更好的性能和安全性。 以上是了解 JavaScript 中的 DOM 操作:初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!