当使用JavaScript操作DOM时，可以通过各种方法来实现对元素的获取、修改、创建、删除等操作。以下是一些详细的代码示例：
1. 获取元素
javascript复制代码
// 通过ID获取元素 |
|
var elementById = document.getElementById('myElementId'); |
|
// 通过类名获取元素集合 |
|
var elementsByClass = document.getElementsByClassName('myClassName'); |
|
// 通过标签名获取元素集合 |
|
var elementsByTagName = document.getElementsByTagName('div'); |
|
// 通过CSS选择器获取元素 |
|
var elementBySelector = document.querySelector('.myClassName'); |
|
// 通过CSS选择器获取元素集合 |
|
var elementsBySelector = document.querySelectorAll('.myClassName'); |
2. 修改元素内容
javascript复制代码
// 获取元素并修改其HTML内容 |
|
var element = document.getElementById('myElement'); |
|
element.innerHTML = '<p>新的HTML内容</p>'; |
|
// 获取元素并修改其文本内容 |
|
element.innerText = '新的文本内容'; |
|
// 获取元素并修改其文本内容（与innerText类似） |
|
element.textContent = '新的文本内容'; |
3. 修改元素属性
javascript复制代码
// 获取元素并设置其属性 |
|
var link = document.getElementById('myLink'); |
|
link.setAttribute('href', 'https://example.com'); |
|
link.setAttribute('target', '_blank'); |
|
// 获取元素并获取其属性值 |
|
var hrefValue = link.getAttribute('href'); |
|
console.log(hrefValue); // 输出: https://example.com |
|
// 删除元素的属性 |
|
link.removeAttribute('target'); |
4. 修改元素样式
javascript复制代码
// 获取元素并直接修改其行内样式 |
|
var myDiv = document.getElementById('myDiv'); |
|
myDiv.style.color = 'red'; |
|
myDiv.style.backgroundColor = 'lightgrey'; |
|
// 使用classList添加类名 |
|
myDiv.classList.add('highlight'); |
|
// 使用classList删除类名 |
|
myDiv.classList.remove('highlight'); |
|
// 检查元素是否包含某个类名 |
|
if (myDiv.classList.contains('highlight')) { |
|
console.log('myDiv包含highlight类'); |
|
} |
5. 创建和添加元素
javascript复制代码
// 创建一个新的元素 |
|
var newElement = document.createElement('p'); |
|
// 设置新元素的文本内容 |
|
var textNode = document.createTextNode('这是一个新的段落。'); |
|
newElement.appendChild(textNode); |
|
// 将新元素添加到现有元素的子节点列表末尾 |
|
var container = document.getElementById('container'); |
|
container.appendChild(newElement); |
|
// 在参考节点之前插入新节点 |
|
var referenceNode = container.firstChild; |
|
container.insertBefore(newElement, referenceNode); |
6. 删除元素
javascript复制代码
// 获取要删除的元素 |
|
var elementToRemove = document.getElementById('elementToRemove'); |
|
// 获取元素的父节点并删除该元素 |
|
var parentElement = elementToRemove.parentNode; |
|
parentElement.removeChild(elementToRemove); |
这些代码示例只是JavaScript操作DOM的基础部分。在实际应用中，可能会涉及到更复杂的DOM结构和操作，但基本的原理和方法是类似的。记住，DOM操作可能会引起页面重绘和重排，因此应尽量避免频繁的DOM操作，以提高页面性能。
