[前端学习]常用的DOM操作及其用法示例(二)

1.节点操作

//parentNode: 访问元素的父节点。
var parent = element.parentNode;


//childNodes: 获取元素的子节点列表。
var childNodes = element.childNodes;


//nextSibling: 获取元素的下一个兄弟节点。
var next = element.nextSibling;


//previousSibling: 获取元素的上一个兄弟节点。
var prev = element.previousSibling;


//insertBefore(newNode, referenceNode): 在参考节点之前插入一个新节点。
parent.insertBefore(newElement, referenceElement);

2. 文档操作

//document.createTextNode(text): 创建一个新的文本节点。
var newText = document.createTextNode("Hello, World!");


//document.createDocumentFragment(): 创建一个新的文档片段，用于优化多次DOM操作。
var fragment = document.createDocumentFragment();
fragment.appendChild(newDiv);
fragment.appendChild(newText);
document.body.appendChild(fragment);

3. 类属性和样式(补充)

//getAttribute(attributeName): 获取元素的属性值。
var type = element.getAttribute("type");


//setAttribute(attributeName, value): 设置元素的属性值。
element.setAttribute("id", "newId");


//hasAttribute(attributeName): 检查元素是否具有指定的属性。
if (element.hasAttribute("disabled")) {
    // Do something
  }


//removeAttribute(attributeName): 删除元素的属性。
element.removeAttribute("class");


//style.cssText: 直接设置元素的样式字符串。
element.style.cssText = "width: 100px; height: 100px; background-color: blue;";


//getComputedStyle(element): 获取应用于元素的所有计算后样式。
var styles = window.getComputedStyle(element);
var color = styles.getPropertyValue("color");

4. 事件委托

事件委托是一种常用于优化事件处理器的技术，可以减少页面上的事件处理器数量。
 

document.body.addEventListener("click", function(e) {
  if (e.target.tagName === "BUTTON") {
    alert("Button clicked!");
  }
});