一、DOM 操作分类
(一)元素查找
- 根据 ID 值查找:
getElementById()
,返回符合条件的第一个对象。
var aa = document.getElementById("aa");
console.log(aa);
- 根据类名查找:
getElementsByClassName()
,返回符合条件的对象组成的数组。
var arr = document.getElementsByClassName("aa");
console.log(arr);
- 根据元素名称查找:
getElementsByTagName()
,返回符合条件组成的数组。
var arr = document.getElementsByTagName("div");
console.log(arr);
console.log(arr.length);
- 根据选择器查找:
querySelector()
返回符合条件的第一个对象;querySelectorAll()
返回所有符合条件的对象组成的数组。
var obj = document.querySelector(".aa");
console.log(obj);
var allObjs = document.querySelectorAll(".aa");
console.log(allObjs);
(二)关系查找
- 找父亲:
parentElement
、parentNode
。
var childElement = document.querySelector(".child");
var parent = childElement.parentElement;
console.log(parent);
- 找孩子:
childNodes
、children
。
var parentElement = document.querySelector(".parent");
var childNodes = parentElement.childNodes;
console.log(childNodes);
var children = parentElement.children;
console.log(children);
- 第一个孩子:
firstChild
。
var parentElement = document.querySelector(".parent");
var firstChild = parentElement.firstChild;
console.log(firstChild);
- 最后一个孩子:
lastChild
、lastElementChild
。
var parentElement = document.querySelector(".parent");
var lastChild = parentElement.lastChild;
console.log(lastChild);
var lastElementChild = parentElement.lastElementChild;
console.log(lastElementChild);
- 找上一个元素:
previousElementSibling
、previousSibling
。
var currentElement = document.querySelector(".current");
var previousElement = currentElement.previousElementSibling;
console.log(previousElement);
var previousSibling = currentElement.previousSibling;
console.log(previousSibling);
- 找下一个元素:
nextElementSibling
、nextSibling
。
var currentElement = document.querySelector(".current");
var nextElement = currentElement.nextElementSibling;
console.log(nextElement);
var nextSibling = currentElement.nextSibling;
console.log(nextSibling);
(三)元素修改
- 修改内容:
innerHTML
会把里面的内容解析,innerText
会把引号内的内容当成文本处理,value
可修改input
里的值。
var obj = document.querySelector(".aa");
obj.innerHTML = "<h1>帅哥</h1>";
obj.innerText = "<h1>帅哥</h1>";
var inputElement = document.querySelector("input");
inputElement.value = "new value";
- 修改属性:原生属性可通过对象。属性 = 值的方式修改,自定义属性可通过
setAttribute
设置、getAttribute
获取。
- 修改样式:可以通过对象.style. 属性 = 值、对象.style.cssText=""、修改对象的
className
属性结合 CSS 来达到修改样式的目的。
var obj = document.querySelector(".aa");
obj.style.background = "red";
obj.style.cssText = "background:red; color:yellow";
obj.className = "red";
(四)元素添加
- 创建元素:
createElement
。
var newNode = document.createElement("h1");
newNode.innerHTML = "新添加的元素";
newNode.className = 'cccccc';
newNode.style.background = "yellow";
- 复制元素:可设置参数为
false
进行浅复制,只复制外壳,设置为true
复制全部。
var originalElement = document.querySelector(".original");
var clonedElement = originalElement.cloneNode(false);
var clonedElementFull = originalElement.cloneNode(true);
- 添加元素:
appendChild
添加到子元素最后位置,insertBefore
在某个子元素前添加,replaceChild
替换掉该元素。
var container = document.querySelector(".cc");
container.appendChild(newNode);
var existingElement = document.querySelector(".existing");
container.insertBefore(newNode, existingElement);
var elementToReplace = document.querySelector(".toReplace");
container.replaceChild(newNode, elementToReplace);
(五)元素删除
父级元素调用删除的方法removeChild(要删除的元素)
。
var parentElement = document.querySelector(".parent");
var childToRemove = document.querySelector(".toRemove");
parentElement.removeChild(childToRemove);
二、知识补充与优化建议
(一)性能优化
在进行大量 DOM 操作时,尽量减少频繁的直接操作 DOM,可以先在内存中对数据进行处理,然后一次性更新 DOM,以提高性能。例如,当需要动态添加多个元素时,可以先将这些元素构建成一个字符串或者数组,最后一次性添加到 DOM 中。
var elementsToAdd = [];
for (var i = 0; i < 10; i++) {
var newElement = document.createElement("div");
newElement.textContent = "Element " + i;
elementsToAdd.push(newElement);
}
var container = document.querySelector(".container");
container.innerHTML = "";
elementsToAdd.forEach(element => container.appendChild(element));
(二)事件委托
利用事件冒泡的原理,将事件绑定在父元素上,通过判断事件源来处理子元素的事件,这样可以减少事件绑定的数量,提高性能。
var parent = document.querySelector(".parent");
parent.addEventListener("click", function(event) {
if (event.target.classList.contains("child")) {
console.log("Child element clicked");
}
});
(三)跨浏览器兼容性
不同浏览器对 DOM 操作的实现可能会有一些差异,在实际开发中需要考虑到兼容性问题,可以使用一些成熟的库或框架来解决兼容性问题。例如,使用 jQuery 可以简化 DOM 操作,并且在不同浏览器中有较好的兼容性。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#element").click(function() {
console.log("Clicked using jQuery");
});
});
</script>