《十一》Javascript中的DOM

DOM：文档对象模型，用来操作文档。

html文档中的所有节点组成一个文档树（节点树）。整个文档是一个文档节点，每个html标签是一个元素节点，包含在html标签中的文本是文本节点，每个html属性是一个属性节点，注释属于注释节点。

一切皆节点。
树根为document对象，通过document对象来操作整个节点树，一棵节点树中的所有节点彼此都有关系。

每个载入浏览器的html文档都会成为document对象，document对象是window对象的属性。

节点信息:

1. nodeName：节点名称。

   元素节点：返回标签名称
   属性节点：返回属性名称
   文本节点：#text
   文档节点：#document

   <select>
       <option id=”01” >a</option>
   </select>
   var 01=document.getElementById(“01”);
   var name=”option的节点名称:”+01.nodeName;//option的节点名称：option
   

   元素节点的内容：

   1. innerText：设置或者获取从标签起始位置到终止位置中的文本。

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

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

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

   

2. nodeType：节点类型，返回值为数值。

   元素节点：返回1
   属性节点：返回2
   文本节点：返回3
   注释节点：返回8
   文档节点：返回9

节点属性：

1. style属性：

   node.style.color
   node.style.fontSize

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

2. className属性：

   p.className=”样式类名称”
   

节点方法：

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

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

2. 查找节点：
   1. document.getElementById()：根据元素id查找节点。忽略文档结构，如果id值错误，返回null。
   2. document.getElementsByClassName()：通过class查找节点，返回元素对象数组。
   3. document.getElementsByTagName()：根据标签名查找节点。忽略文档结构，如果标签名错误，返回长度为0的节点列表。
   4. document.getElementsByName()：根据标签的name属性的值查找节点。
3. 创建节点:
   1. document.createElement()：创建新节点。

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

   2. document.createTextNode(String)：创建一个文本节点。
4. 添加节点:
   1. 父节点.appendChild(newNode)：添加新节点，新节点作为节点的最后一个子节点。
   2. 父节点.insertBefore(newNode,refNode)：添加节点，新节点位于refNode节点之前。
5. 删除节点:
   父节点.removeChild(childNode)：删除子节点。
6. 复制节点：
   要复制的节点.cloneChild()：只复制节点本身，不复制子节点。
   要复制的节点.cloneChild(true)：既复制节点本身，也复制子节点。
7. 替换节点：
   父节点.replaceChild(newnode, oldnode);

元素节点的方法：

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

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

   var rect = element.getBoundingClientRect()
   

   

DOM遍历：

1. 向上遍历：parentNode：返回父节点；
2. 向下遍历：
   1. childNodes：返回当前节点的所有子节点。
   2. children：返回当前节点的的所有元素节点。
   3. firstChild：返回当前节点的第一个子节点。
   4. lastChild：返回当前节点的最后一个子节点。
3. 水平遍历：
   1. previousSibling：前一个同级节点。
   2. nextSibling：后一个同级节点。