2.9Node节点的学习

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集合的快照，对文档的任何操作都不会对其产生影响