文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
常见的操作包括创建节点、查询节点、更新节点、添加节点、删除节点。
1、创建节点
createElement 创建新元素，接受一个参数，即要创建元素的标签名。
createTextNode 创建一个文本节点。
createDocumentFragment用来创建一个文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，然后把文档碎片的内容一次性添加到DOM中。当请求把一个DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment自身，而是它的所有子孙节点。
2、获取节点
querySelector 传入任何有效的css 选择器，即可选中单个 DOM元素（首个）。如果页面上没有指定的元素时，返回 null。
querySelectorAll 返回一个包含节点子树内所有与之相匹配的Element节点列表，如果没有相匹配的，则返回一个空节点列表。需要注意的是，该方法返回的是一个 NodeList的静态实例，它是一个静态的“快照”，而非“实时”的查询（相关知识点可参考https://blog.csdn.net/cc18868876837/article/details/83508942）。
其他关于DOM的方法如下：
每个DOM元素还有parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling属性。
3、更新节点
innerHTML 不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树。
style 属性对应所有的CSS，可以直接获取或设置。遇到-需要转化为驼峰命名。
4、添加节点
innerHTML
如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML =
'<span>child</span>'就可以修改DOM节点的内容，相当于添加了新的DOM节点；如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点。
appendChild 把一个子节点添加到父节点的最后一个子节点。
insertBefore 把子节点插入到指定的位置。
setAttribute 在指定元素中添加一个属性节点，如果元素中已有该属性改变属性值。
5、删除节点
删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉。
网友评论