dom操作的api_边操作API

DOM操作的边操作API主要包括以下几种：

1、创建节点：createElement()

2、插入节点：appendChild()、insertBefore()

3、删除节点：removeChild()

4、替换节点：replaceChild()

5、克隆节点：cloneNode()

6、获取节点信息：getAttribute()、setAttribute()、hasAttribute()、removeAttribute()

7、修改节点内容：innerHTML、textContent

8、查找节点：getElementById()、getElementsByClassName()、getElementsByTagName()、querySelector()、querySelectorAll()

9、遍历节点：parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling

以下是这些API的详细解释和示例代码：

1、createElement(tagName)：创建一个指定标签名的新元素。

var newElement = document.createElement("div");

2、appendChild(node)：将一个节点添加到指定元素的子节点列表末尾。

var parentElement = document.getElementById("parent");
var childElement = document.createElement("div");
parentElement.appendChild(childElement);

3、insertBefore(newNode, referenceNode)：在参考节点之前插入一个新节点。

var parentElement = document.getElementById("parent");
var newElement = document.createElement("div");
var referenceElement = document.getElementById("reference");
parentElement.insertBefore(newElement, referenceElement);

4、removeChild(node)：从指定元素中删除一个子节点。

var parentElement = document.getElementById("parent");
var childElement = document.getElementById("child");
parentElement.removeChild(childElement);

5、replaceChild(newNode, oldNode)：用新节点替换指定元素中的旧节点。

var parentElement = document.getElementById("parent");
var newElement = document.createElement("div");
var oldElement = document.getElementById("old");
parentElement.replaceChild(newElement, oldElement);

6、cloneNode(deep)：复制指定节点，可以选择是否进行深度复制。

var elementToClone = document.getElementById("element");
var clonedElement = elementToClone.cloneNode(true); // 深度复制

7、getAttribute(name)、setAttribute(name, value)、hasAttribute(name)、removeAttribute(name)：获取、设置、检查和移除元素的属性。

var element = document.getElementById("element");
element.setAttribute("class", "newclass");
console.log(element.getAttribute("class")); // 输出 "newclass"
console.log(element.hasAttribute("class")); // 输出 true
element.removeAttribute("class");

8、innerHTML、textContent：修改或获取元素的内部HTML或文本内容。

var element = document.getElementById("element");
element.innerHTML = "<p>New content</p>";
console.log(element.textContent); // 输出 "New content"

9、getElementById(id)、getElementsByClassName(className)、getElementsByTagName(tagName)、querySelector(selector)、querySelectorAll(selector)：根据ID、类名、标签名或CSS选择器查找元素。

var elementById = document.getElementById("element");
var elementsByClassName = document.getElementsByClassName("example");
var elementsByTagName = document.getElementsByTagName("div");
var elementByQuerySelector = document.querySelector("#element");
var elementsByQuerySelectorAll = document.querySelectorAll(".example");

10、parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling：获取元素的父节点、子节点、第一个子节点、最后一个子节点、下一个兄弟节点和上一个兄弟节点。

var parentNode = element.parentNode;
var childNodes = parentNode.childNodes;
var firstChild = parentNode.firstChild;
var lastChild = parentNode.lastChild;
var nextSibling = element.nextSibling;
var previousSibling = element.previousSibling;