网页DOM编程方法（API总结与应用）
目录[*]网页DOM编程
[*]Node、Document和Element三者关系
[*]DOM编程常用 API 总结
[*]DOM编程 API 应用
网页DOM编程
Node、Document和Element三者关系
Node：各种类型的 DOM API 对象会从这个接口继承。
Document：表示在任何在浏览器中加载的网页（DOM树）。
Element：描述所有相同种类的元素所普遍具有的方法和属性。
完整的继承关系如下图：
说明：图中的子类可以从父类继承方法和属性。
DOM编程常用 API 总结
Node节点
属性方法说明Node.nodeName 只读返回一个包含该节点名字的DOMString。Node.nodeType只读返回一个与该节点类型对应的无符号短整型的值。Node.nodeValue返回或设置当前节点的值。Node.textContent返回或设置一个元素内所有子节点及其后代的文本内容。Node.firstChild 只读返回该节点的第一个子节点Node，如果该节点没有子节点则返回null。Node.lastChild 只读返回该节点的最后一个子节点Node，如果该节点没有子节点则返回null。Node.previousSibling 只读返回该节点同级的前一个节点 ( Node) ，如果不存在返回 null。Node.nextSibling 只读返回与该节点同级的下一个节点 Node，如果不存在返回null。Node.parentNode 只读返回一个当前节点 Node的父节点。Node.childNodes只读返回一个包含了该节点所有子节点的实时的NodeList。Node.appendChild()将指定的 childNode 参数作为最后一个子节点添加到当前节点。Node.removeChild()移除当前节点的一个子节点，这个子节点必须存在于当前节点中。Node.replaceChild()将选定的节点替换一个子节点 Node 为另外一个节点。Node.insertBefore()在当前节点下增加一个子节点 Node，并使该子节点位于参考节点的前面。nodeName特别说明：
[*]元素节点的nodeName是标签名称
[*]属性节点的nodeName是属性名称
[*]文本节点的nodeName永远是#text
[*]文档节点的nodeName永远是#document
nodeValue特别说明：
[*]元素节点的nodeValue是null（赋值无效）
[*]文本节点的nodeValue是文本自身
[*]属性节点的nodeValue是属性的值
Document节点
方法说明Document.createElement()用给定标签名创建一个新的元素。Document.createTextNode()创建一个文本节点。Document.querySelector()返回文档中与指定的选择器匹配的第一个元素节点。Document.querySelectorAll()返回包含文档中与指定的选择器匹配的所有元素节点的列表（NodeList）。注意：NodeList不是数组，而是一个类数组对象。可称为DOM集合。它的遍历方法有以下两种方式：
[*]利用自带的forEach方法
[*]转换成数组形式：Array.from(nodelist)、[].slice.call(nodelist)
Element节点
方法说明Element.getAttribute()返回元素上一个指定的属性值。Element.setAttribute()设置指定元素上的某个属性值。Element.removeAttribute()从指定的元素中删除一个属性。Element.clientWidth 只读返回Number 表示该元素内部的宽度。Element.clientHeight 只读返回Number 表示内部相对于外层元素的高度。Element.clientTop 只读返回 Number 表示该元素距离它上边界的高度。Element.clientLeft 只读返回Number表示该元素距离它左边界的宽度。Element.scrollWidth 只读返回类型为： Number ，表示元素的滚动视图宽度。Element.scrollHeight 只读返回类型为： Number，表示元素的滚动视图高度。Element.scrollTop返回类型为：Number ，表示该元素纵向滚动条距离Element.scrollLeft返回类型为：Number，表示该元素横向滚动条距离最左的位移。Element.getBoundingClientRect()返回元素的大小及其相对于视口的位置。
[*]在CSS盒模型中，可视区的宽高如下所示：
根据上面的盒模型图，可视区的宽高可有以下计算公式：
offsetWidth = width + padding*2
offsetHeight = width + padding*2
[*]当滚动条滚动到底部时，有以下计算公式：
scrollHeight = scrollTop + clientHeight
注意：scrollTop是一个动态值，随着滚动条向下滑动逐渐增加。而clientHeight则是一个静态值。
HTMLELement节点
属性说明HTMLElement.style获取/设置元素的 style 属性HTMLElement.offsetWidth只读元素自身可视宽度加上左右 border 的宽度HTMLElement.offsetHeight 只读元素自身可视高度加上上下 border 的宽度HTMLElement.offsetTop只读元素自己 border 顶部距离父元素顶部或 body 元素 border 顶部的距离HTMLElement.offsetLeft只读元素自己 border 左边距离父元素 border 左边或 body 元素 border 左边的距离HTMLElement.offsetParent只读元素的父元素，如果没有就是 body 元素。若元素脱离文档流，则为null在CSS盒模型中，偏移量的宽高如下所示：
根据上面的盒模型图，偏移量的宽高可有以下计算公式：
offsetWidth = width +border*2 +padding*2
offsetHeight = width +border*2 +padding*2
DOM编程 API 应用
接下来利用上面的API去实现以下几个步骤。首先考虑这样一个DOM结构，如下：
<ul >
<li >1</li>
<li >2</li>
<li >3</li>
<li >4</li>
</ul>假设这样一个场景，用户点击了某个按键。我们希望能使用JS去生成上面的DOM结构。如下：
按键点击后生成DOM结构如下：
我们总结一下步骤。利用JS生成DOM结构的操作如下：
[*]创建元素：Document.createElement()
[*]设置属性：Element.setAttribute()
[*]添加样式：HTMLElement.style
[*]添加内容：Node.textContent
[*]插入父节点：Node.appendChild()
参考
MDN-Node
来源:https://www.cnblogs.com/chscript/p/16994966.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]