DOM 或文档对象模型是个需 web 页面上所有对象的根。它表示文档的知道作结构，并将页面连接到编程语言。法使它的个需结构是一个逻辑树。每个分支结束于一个节点，知道作每个节点包含子节点、法使对象。个需DOM API非常庞大，知道作在本文中，法使咱们只讨论比较常用有有用的个需那些API。 
document.querySelector & document.querySelectorAll document.querySelector方法返回文档中与指定选择器或选择器组匹配的知道作第一个 html 元素。 如果找不到匹配项，法使则返回null。个需 document.querySelectorAll 方法返回与指定的知道作选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的法使对象是 NodeList 。 // 返回第一个 ul 元素 const list = document.querySelector(ul) // 返回所有类名为 info 或者 warning 的 div 元素 const elements = document.querySelectorAll(div.info, div.warning); document.createElement 在一个 HTML 文档中， Document.createElement(tagName) 方法创建由 tagName 指定的 HTML 元素，或一个HTMLUnknownElement，云服务器提供商如果tagName不被识别。 Node.appendChild Node.appendChild()方法将节点添加到给定父节点的子节点列表的末尾。 请注意，如果给定的子代是文档中现有节点的引用，则它将移动到新位置。看看示例： let list = document.createElement(ul); [北京, 上海, 深圳].forEach(city => { let listItem = document.createElement(li) listItem.innerText = city list.appendChild(listItem) }) document.body.appendChild(list) Node.insertBefore 此方法在给定的父节点内的子引用节点之前插入给定节点(并返回插入的节点) 伪代码如下所示： 北京 上海 深圳 ↓ Node.insertBefore(厦门,北京) ↓ 厦门 北京 上海 深圳 let list = document.querySelector(ul); let firstCity = list.querySelector(ul > li); let newCity = document.createElement(li); newCity.textContent = San Francisco; list.insertBefore(newCity, firstCity); Node.removeChild Node.removeChild方法从DOM中删除一个子节点并返回删除的节点。 请注意，返回的节点不再是DOM的一部分，而是仍存在于内存中。 如果处理不当，可能会导致内存泄漏。 let list = document.querySelector(ul); let firstItem = list.querySelector(li); let removedItem = list.removeChild(firstItem); Node.replaceChild 此方法替换父节点中的子节点(并返回替换后的旧子节点)。请注意，如果处理不当，此方法可能导致与Node.removeChild类似的内存泄漏问题。 let list = document.querySelector(ul); let oldItem = list.querySelector(li); let newItem = document.createElement(li); newItem.innerHTML = 前端小智; let replacedItem = list.replaceChild(newItem, oldItem); Node.cloneNode Node.cloneNode(deep) 方法返回调用该方法的节点的网站模板一个副本，deep(可选)表示是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身. let list = document.querySelector(ul); let clone = list.cloneNode(); Element.getAttribute方法返回元素上给定属性的值，反之亦然，Element.setAttribute设置给定元素上属性的值。 let list = document.querySelector(ul); let clone = list.cloneNode(); Element.hasAttribute / Element.removeAttribute Element.hasAttribute方法检查给定元素是否具有指定的属性，返回值为boolean。 通过调用Element.removeAttribute方法，我们可以从元素中删除具有给定名称的属性。 let list = document.querySelector(ul); if (list.hasAttribute(id)) { console.log(list has an id); list.removeAttribute(id); }; Element.insertAdjacentHTML element.insertAdjacentHTML(position, text) 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。 position是相对于元素的位置，并且必须是以下字符串之一： beforebegin：元素自身的前面。 afterbegin：插入元素内部的b2b供应网第一个子节点之前。 beforeend：插入元素内部的最后一个子节点之后。 afterend：元素自身的后面。 text是要被解析为HTML或XML,并插入到DOM树中的字符串。 Hello World 示例： var list = document.querySelector(ul); list.insertAdjacentHTML(afterbegin, <li id="first-item">First</li>); 总结 希望本文对你有所帮助，并且有助于你理解DOM。正确处理DOM树非常重要，如果操作不正确，可能会导致严重后果。 | 
喜欢
讨厌