网页DOM编程方法（API总结与应用）

目录

• 网页DOM编程
  
  
  
  • Node、Document和Element三者关系
  
  
  • DOM编程常用 API 总结
  
  
  • DOM编程 API 应用
  
  
  
  

网页DOM编程

Node、Document和Element三者关系

Node：各种类型的 DOM API 对象会从这个接口继承。

Document：表示在任何在浏览器中加载的网页（DOM树）。

Element：描述所有相同种类的元素所普遍具有的方法和属性。

完整的继承关系如下图：

如果已知它们之间的继承关系，那么就可以知道这些元素会从父类继承什么样的属性和方法。接下来，我们学习这些接口的常用API，然后利用这些API进行DOM编程。

DOM编程常用 API 总结

Node节点

nodeName特别说明：

1. 元素节点的nodeName是标签名称

   
   



2. 属性节点的nodeName是属性名称

   
   



3. 文本节点的nodeName永远是#text

   
   



4. 文档节点的nodeName永远是#document

   
   

nodeValue特别说明：

1. 元素节点的nodeValue是null（赋值无效）

   
   



2. 文本节点的nodeValue是文本自身

   
   



3. 属性节点的nodeValue是属性的值

   
   

Document节点

注意：NodeList不是数组，而是一个类数组对象。可称为DOM集合。它的遍历方法有以下两种方式：

1. 利用自带的forEach方法


2. 转换成数组形式：Array.from(nodelist)、[].slice.call(nodelist)

Element节点

1. 在CSS盒模型中，可视区的宽高如下所示：

根据上面的盒模型图，可视区的宽高可有以下计算公式：

offsetWidth = width + padding*2

offsetHeight = width + padding*2

2. 当滚动条滚动到底部时，有以下计算公式：

scrollHeight = scrollTop + clientHeight

注意：scrollTop是一个动态值，随着滚动条向下滑动逐渐增加。而clientHeight则是一个静态值。

HTMLELement节点

在CSS盒模型中，偏移量的宽高如下所示：

根据上面的盒模型图，偏移量的宽高可有以下计算公式：

offsetWidth = width +border*2 +padding*2

offsetHeight = width +border*2 +padding*2

DOM编程 API 应用

接下来利用上面的API去实现以下几个步骤。首先考虑这样一个DOM结构，如下：

假设这样一个场景，用户点击了某个按键。我们希望能使用JS去生成上面的DOM结构。如下：

按键点击后生成DOM结构如下：

我们总结一下步骤。利用JS生成DOM结构的操作如下：

1. 创建元素：Document.createElement()


2. 设置属性：Element.setAttribute()


3. 添加样式：HTMLElement.style


4. 添加内容：Node.textContent


5. 插入父节点：Node.appendChild()

参考

MDN-Node