DOM或文档对象模型是网页上所有对象的根。它表示文档的结构并将页面连接到编程语言。它的结构是一个逻辑树。每个分支都终止于一个节点，每个节点包含子节点、对象。DOMAPI非常大。在本文中，我们只讨论比较常用和有用的API。document.querySelector和document.querySelectorAlldocument.querySelector方法返回文档中与指定选择器或选择器集匹配的第一个html元素。如果未找到匹配项，则返回null。document.querySelectorAll方法返回文档中与指定选择器集匹配的元素列表（以深度优先顺序遍历文档的节点）。返回的对象是一个NodeList。//返回第一个ul元素constlist=document.querySelector('ul')//返回类名为info或warning的所有div元素constelements=document.querySelectorAll('div.info,div.warning');document.createElement在HTML文档中，Document.createElement(tagName)方法创建由tagName指定的HTML元素，如果无法识别tagName，则创建HTMLUnknownElement。Node.appendChildNode.appendChild()方法将一个节点添加到给定父节点的子节点列表的末尾。请注意，如果给定的子节点是对文档中现有节点的引用，它将被移动到新位置。看例子：letlist=document.createElement('ul');['北京','上海','深圳'].forEach(city=>{letlistItem=document.createElement('li')listItem.innerText=citylist.appendChild(listItem)})document.body.appendChild(list)Node.insertBefore此方法将给定节点插入给定父节点内的子引用节点之前（并返回插入的节点）。伪代码如下：北京上海深圳↓Node.insertBefore('厦门','北京')↓厦门北京上海深圳letlist=document.querySelector('ul');letfirstCity=list.querySelector('ul>li');letnewCity=document.createElement('li');newCity.textContent='SanFrancisco';list.insertBefore(newCity,firstCity);Node.removeChildNode.removeChild方法从DOM中移除子节点并返回移除的节点。请注意，返回的节点不再是DOM的一部分，但仍存在于内存中。如果处理不当，可能会导致内存泄漏。letlist=document.querySelector('ul');letfirstItem=list.querySelector('li');letremovedItem=list.removeChild(firstItem);Node.replaceChild该方法替换父节点中的子节点（并返回替换后的旧子节点）。请注意，如果处理不当，此方法可能会导致类似于Node.removeChild的内存泄漏问题。letlist=document.querySelector('ul');letoldItem=list.querySelector('li');letnewItem=document.createElement('li');newItem.innerHTML='前端小智';letreplacedItem=list.replaceChild(新项目，旧项目）；Node.cloneNodeNode.cloneNode(deep)方法返回调用该方法的节点副本，deep（可选）表示是否使用深度克隆，如果为true，则该节点的所有后代节点也会被克隆，如果为false，则只克隆节点本身。letlist=document.querySelector('ul');letclone=list.cloneNode();Element.getAttribute方法返回元素上给定属性的值，反之，Element.setAttribute设置值给定元素的属性。letlist=document.querySelector('ul');letclone=list.cloneNode();Element.hasAttribute/Element.removeAttributeElement.hasAttribute方法检查给定元素是否具有指定属性，返回值为布尔值。我们可以通过调用Element.removeAttribute方法从元素中删除具有给定名称的属性。letlist=document.querySelector('ul');if(list.hasAttribute('id')){console.log('listhasanid');list.removeAttribute('id');};Element.insertAdjacentHTMLElement.insertAdjacentHTML(位置,text)将指定的文本解析为HTML或XML，并将结果节点插入到DOM树的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接的innerHTML操作更快。position是相对于元素的，必须是以下字符串之一：beforebegin：在元素本身之前。afterbegin：在元素内的第一个子节点之前插入。beforeend：插入元素内部最后一个子节点之后。afterend：在元素本身的后面。text是要被解析为HTML或XML并插入到DOM树中的字符串。
HelloWorld