《十一》JavaScript 中的 DOM

DOM：Document Object Model、文档对象模型。用来访问和操作文档。每个载入浏览器的 HTML 文档都会成为 document 对象，document 对象是 window 对象的属性。

一切皆节点；整个文档是一个文档节点；每个 HTML 标签是一个元素节点；每个 HTML 属性是一个属性节点；包含在 HTML 标签中的文本是文本节点；注释属于注释节点。HTML 文档中的所有节点组成一个节点树；树根为 document 对象，通过 document 对象来操作整个节点树，一棵节点树中的所有节点彼此都有关系。

节点属性:

1. nodeName：节点名称。元素节点会返回标签名称；属性节点会返回属性名称；文本节点会返回 #text；文档节点会返回 #document。

   <select>
       <option id=”01” >a</option>
   </select>
   var opNode=document.getElementById(“01”);
   console.log(opNode.nodeName); // option
   

2. nodeType：节点类型，返回值为数值。元素节点返回1；属性节点返回 2；文本节点返回 3；注释节点返回 8；文档节点返回 9。
3. DOM 遍历：
   • 向上遍历：parentNode 返回父节点。
   • 向下遍历：
     • childNodes：返回当前节点的所有子节点。也就是说，childNodes 会返回所有节点，包括HTML、Text、注释等等内容。
     • children：返回当前节点的的所有元素节点。也就是说，children 返回的是 HTML 元素标签。
     • firstChild：返回当前节点的第一个子节点。
     • lastChild：返回当前节点的最后一个子节点。
   • 水平遍历：
     • previousSibling：前一个同级节点。
     • nextSibling：后一个同级节点。
4. 节点内容：
   • innerText：设置或者获取从标签起始位置到终止位置中的文本。

      <div id=”div1”></div>
     var div=document.getElementById(“div1”);
     div.innerText = "<span style='color:red;'>哈哈</span>"
     

     
   • innerHTML：设置或者获取从标签起始位置到终止位置中的全部内容，包括 HTML 标签+文本，但不包括自身。

     <div id=”div1”></div>
     var div=document.getElementById(“div1”);
     div.innerHTML = "<span style='color:red;'>哈哈</span>"
     

     
5. style：节点的 style 样式。

   <p id=”p1”>一周畅销榜</p>
   var p=document.getElementById(“p1”);
   p.style.color=”red”;
   p.style.fontSize=”20”; 
   

6. className：节点的 class 类。

   p.className=”样式类名称”
   

节点方法：

1. 查找节点：

   • document.getElementById()：根据元素 id 查找节点。如果 id 值错误，返回 null。
   • document.getElementsByClassName()：通过 class 查找节点，返回元素对象数组。
   • document.getElementsByTagName()：根据标签名查找节点。如果标签名错误，返回长度为 0 的节点列表。
   • document.getElementsByName()：根据标签的 name 属性的值查找节点。

2. 创建节点:

   • document.createElement()：创建新节点。

     //创建新节点
     var newNode=document.createElement(“Input”)
     //设置节点信息
     newNode.type=”text”;
     newNode.value=”marry”;
     newNode.style.color=”red”;
     

   • document.createTextNode(String)：创建一个文本节点。

3. 插入节点:

   • 父节点.appendChild(newNode)：插入新节点，新节点作为父节点的最后一个子节点。
   • 父节点.insertBefore(newNode,refNode)：插入节点，新节点位于 refNode 节点之前。

4. 删除节点:

   • 父节点.removeChild(childNode)：删除子节点。

5. 复制节点：

   • 要复制的节点.cloneChild()：只复制节点本身，不复制子节点。
   • 要复制的节点.cloneChild(true)：既复制节点本身，也复制子节点。

6. 替换节点：

   • 父节点.replaceChild(newnode, oldnode);

7. 操作属性：

   • getAttribute()：根据属性名称获取属性的值。
   • setAttribute()：根据属性名称设置属性的值。
   • removeAttribute()：根据属性名称删除属性的值。

   <a href=”default.axpx” id=”a1”>click me </a>
   var a1=document.getElementById(“a1”);
   var href=a1.getAttribute(“href”);//default.axpx
   

8. getBoundingClientRect() ：获取元素节点的大小及其相对于视口的位置。返回值是一个 DOMRect 对象，使用 top、bottom、left、right、x、y、width 和 height 这几个只读属性描述元素节点的位置和大小。

   • top：元素上边到视口上边的距离。
   • bottom：元素下边到视口上边的距离。
   • left：元素左边到视口左边的距离。
   • right：元素右边到视口左边的距离。

   var rect = element.getBoundingClientRect()