2.9Node节点的学习

Posted 2020-09-05 渡劫的咸鱼哥

Node(节点)
1.Node概述
   【DOM】文档对象模型
   基本思想：
   （1）把结构文档解析成一系列节点，再由这些节点组成一个树状结构；
   （2）均有规范的对外结构，以便于编程（操作）文档（比如增删内容）。
      ps：严格地说，DOM不属于javascript。
      pss：但是操作DOM是JavaScript最常见的任务。
      psss：而JavaScript也是最常用于DOM操作的语言。
      pssss：所以，DOM往往放在JavaScript里面介绍。
【Node】DOM的最小单位
   对于html文档，Node主要有以下6中类型：
   节点             名称       含义
   Document            文档node    整个文档（window.document）
   DocumentType         文档类型node   文档的类型（比如：<DOCTYPE html>）
   Element                元素node    HTML元素
   Attribute           属性node    HTML属性
   Text               文本node    HTML文档中出现的文本
   DocumentFragment      文档碎片node   文档碎片   
   思考：节点集合是不是一个数组???
2.【Node属性】
（1）通用属性：nodeName,nodeType
   nodeName属性返回节点的名称，
   nodeType属性返回节点的常数值
   类型       nodeName         nodeType
   ELEMENT_NODE   大写的HTML元素名 1
   ATTRIBUTE_NODE 等同于Attr.name      2
   TEXT_NODE     #text           3
   其它现用现查
（2）返回当前node的相关节点属性：ownerDocument、nextSibling，previousSibling，parentNode，parentElement
   【ownerDocument】
      ownerDocument属性返回当前节点所在的顶层文档对象，即document对象。
      ps：document对象本身的ownerDocument属性，返回null。
      思考：若是属性，文本节点呢？（均返回顶层Document对象）
   【nextSibling】
      nextSibling属性返回紧跟在当前节点后面的第一个同级节点。
      如果当前节点后面没有同级节点，则返回null
      ps：从上述代码中能够得到的是，该属性还包括文本节点和评论节点。因此如果当前节点后面有空格，该属性会返回一个文本节点，内容为空格。
   【previousSibling】
      previousSibling属性返回当前节点前面的第一个同级节点。
      如果当前节点前面没有同级节点，则返回null。
      ps:对于当前节点前面有空格，则previoussibling属性会返回一个内容为空格的文本节点。
      pss:回车也算是文本节点
   【parentNode】
      parentNode属性返回当前节点的父节点。
      如果当前节点没有父节点，则返回null（document节点）。
      ps：一般情况下，一个节点的父节点只可能是三种类型：element节点、document节点和documentfragment节点。
   【parentElement】
      parentElement属性返回当前节点的父元素节点。
      如果当前节点没有父节点，或者父节点类型不是Element节点，则返回null
(3)返回当前node的内容的属性：textContent，nodeValue
   【textContent】
      textContent属性返回当前节点和它的所有后代节点的文本内容。
   【nodeValue】
      nodeValue属性返回或设置当前节点的值，格式为字符串。
      但是nodeValue只对Text节点(、Comment节点、XML文档的CDATA节点)有效，其他类型的节点一律返回null。
(4)返回当前节点的子节点的属性：childNodes，firstChild，lastChild
   【childNodes】
      childNodes属性返回一个节点集合(NodeList)，节点集合中包括当前节点的所有子节点。
      【注】
         ①如果当前节点不包括任何子节点，则返回一个空的NodeList集合。
         ②由于NodeList对象是一个动态集合，一旦子节点发生变化，立刻会反映在返回结果之中。
   【firstChild】
      firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null。
      需要指出的是，除了HTML元素子节点，该属性还包括文本节点和评论节点。    
   【lastChild】
      lastChild属性返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回null。
3.Node的方法
(1) appendChild()，hasChildNodes()
   【appendChild()】
      appendChild()方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点
   【hasChildNodes()】
      hasChildNodes()方法返回一个布尔值，表示当前节点是否有子节点。
(2) cloneNode()，insertBefore()，removeChild()，replaceChild()
   【childNodes()】
      cloneNode()方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点。默认是false，即不克隆子节点。
      【注】需要注意的是，克隆一个节点，会拷贝该节点的所有属性，但是会丧失addEventListener方法和on-属性（即node.onclick = fn）添加在这个节点上的事件回调函数。
   【insertBefore()】
      insertBefore方法用于将某个节点插入当前节点的指定位置。
      它接受两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点，新的节点将插在这个节点的前面。
      该方法返回被插入的新节点，根据情况不是必须创建变量来保存。
         var text1 = document.createTextNode(‘1‘);
         var li = document.createElement(‘li‘);
         li.appendChild(text1);

         var ul = document.querySelector(‘ul‘);
         ul.insertBefore(li,ul.firstChild);

         上述代码的作用是，将带有文字节点的li插入到ul的第一个子节点之前。
   【removeChild()】
      removeChild方法接受一个子节点作为参数，用于从当前节点移除该节点。
   它返回被移除的节点,根据情况不是必须创建变量来保存。
   【replaceChild()】
      replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。
      它接受两个参数，第一个参数是用来替换的新节点，第二个参数将要被替换走的子节点。它返回被替换走的那个节点。
         var    replacedNode = parentNode.replaceChild(newChild, oldChild);
      例子：
         var divA = document.getElementById(‘A‘);
         var newSpan = document.createElement(‘span‘);
         newSpan.textContent = ‘Hello World!‘;
         divA.parentNode.replaceChild(newSpan,divA);

         上述代码是将界面中的divA替换成了代码创建的span标签。
(3) contains()，isEqualNode()
   【contains()】
      contains方法接受一个节点作为参数，返回一个布尔值。
      contains方法表示判断【参数节点】是否为【当前节点】的子节点。
         ps:document.body.contains(node) 检查某个节点，是否包含在当前文档之中。
         pss:nodeA.contains(nodeA) // true  节点自身包含自身的结果是真的。虽然理论上很难解释
   【isEqualNode()】
      isEqualNode方法返回一个布尔值，用于检查两个节点是否相等。
      ps：所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。
4、HTML元素
   html元素是网页的根元素，document.documentElement就指向这个元素。js中关于html元素也提供了一些相关的属性和方法来帮助我们更好的操作：
   (1)视图窗口大小：clientWidth属性，clientHeight属性
   (2)html元素大小：offsetWidth属性，offsetHeight属性
      ps：clientWidth和clientHeight这两个属性返回的是视口（viewport）的大小，单位为像素。
      pss：clientWidth和clientHeight在计算视图大小的时候不计算滚动条部分。
      psss：window.innerWidth和window.innerHeight包括了滚动条的高度和宽度。
5.HTML内元素
(1) 元素位置相关属性
   【offsetParent】
      offsetParent表示获取距离【当前元素】的最靠近的、并且CSS的position属性不等于static的父元素。
      若找不到返回body
   【offsetTop、offsetLeft】
      offsetTop：当前HTML元素左上角相对于offsetParent的垂直位移。
      offsetLeft：当前HTML元素左上角相对于offsetParent的水平位移。
(2) 获取元素对象的方法
   大致分为四种：
      querySelector方法
      querySelectorAll方法
      getElementsByTagName方法
      getElementsByClassName方法
   【注意：querySelector系列方法与getElementsBy系列方法对比有什么不同？】
      (i)两者的W3C标准不同
         querySelector系列属于W3C中的Selectors API规范
         getElementsBy系列则属于 W3C的DOM 规范。
      (ii)两者浏览器的兼容不同
         querySelector系列基本能被所有浏览器支持。
         getElementsBy系列则通常只有在考虑兼容性的时候才被提起(尽管两者功能近似)
      (iii)接受参数不同
         querySelector系列接收的参数是一个css选择器名。
         getElementsBy系列接收的参数只能是单一的className、tagName 和 name。
         var c1 = document.querySelectorAll(‘.k1 .u‘);
         var c2 = document.getElementsByClassName(‘p‘);
         var c3 = document.getElementsByClassName(‘b2‘)[0].getElementsByClassName(‘d‘);
      需要注意的是，querySelector系列所接收的参数是必须严格符合css选择器规范的。所以下面这种写法将会出错。
         var e1 = document.getElementsByClassName(‘1a2b3c‘);
         var e2 = document.querySelectorAll(‘.1a2b3c‘);
         console.log(e1 && e1[0].className);
         console.log(e2 && e2[0].className);
      (iv)返回值不同
         querySelectorAll()返回的是一个静态节点列表(Static NodeList) 
         getElementsBy系列的返回的是一个动态节点列表(Live NodeList)。
         //查看下面两个经典案例
         //案例1
            var ul = document.querySelectorAll(‘ul‘)[0],
            var list = ul.querySelectorAll("li");
            for(var i = 0; i < list.length ; i++){
               ul.appendChild(document.createElement("li"));
            }  
         //案例2
            var ul = document.getElementsByTagName(‘ul‘)[0],
            var list = ul.getElementsByTagName("li"); 
            for(var i = 0; i < list.length ; i++){
                ul.appendChild(document.createElement("li"));
            }
         结论是：
            案例2中的list是一个动态的NodeList，每一次调用list都会重新对文档进行查询，导致无限循环的问题。
            案例1中的list是一个静态的Node List，是一个li集合的快照，对文档的任何操作都不会对其产生影响