032-Web前端-JS-Node节点

#6.16 长而精致

1. Node概述   2. Node的属性   3. Node的方法   4. HTML元素操作方法//了解   5. HTML内的元素的操作方法//了解，略

---

1.Node概述

DOM是文档对象模型的简称。它的基本思想是：把结构化文档解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的（比如增删内容）。所以，DOM可以理解成文档的编程接口。严格地说，DOM不属于JavaScript，但是操作DOM是JavaScript最常见的任务，而JavaScript也是最常用于DOM操作的语言，所以，DOM往往放在JavaScript里面介绍。

DEF：

node是DOM的最小组成单位，一个文档的树形结构就是由各种不同类型的节点组成。

对于HTML文档，node主要有以下六种类型：

---

2.Node的属性

(1)通用属性：nodeName、nodeType

(2)返回当前node的相关节点属性：ownerDocument、nextSibling，previousSibling，parentNode，parentElement

(3)返回node内容属性：textContent，nodeValue

(4)返回当前node子节点相关属性：childNodes，firstChild，lastChild

---

(1)通用属性

nodeName属性返回节点的名称，nodeType属性返回节点的常数值

//以document节点为例 

document.nodeName // "#document"

document.nodeType // 9



//通常来说，使用nodeType属性确定一个节点的类型比较方便

document.querySelector('a').nodeType === 1      // true

document.querySelector('a').nodeType === Node.ELEMENT_NODE  // true

//上面两种写法是等价的

 

(2)返回当前node的相关节点属性

ownerDocument

ownerDocument属性返回当前节点所在的顶层文档对象，即document对象。

var d = p.ownerDocument;

d === document // true

console.log(d.nodeName);//#document

注意：document对象本身的ownerDocument属性，返回null。

nextSibling //重点1

nextSibling属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null。

注意：因此如果当前节点后面有空格，该属性会返回一个文本节点，内容为空格（或回车）。

//H5部分，与下面很多方法公用的代码段：

<div  class="div1">div1

    <div  id="div2">div2</div>

</div>

<span>这是span标签</span>

//JS部分：

console.log(div2.nextSibling);

console.log(div1.nextSibling.nextSibling);

//查看div1的所有子节点

var el=div1.firstChild;

var i=1;

while(el){

console.log(i+'.'+el.nodeName);

el=el.nextSibling;

i++;

}

previousSibling //重点2

描述：previousSibling和nextSibling用法完全相同，唯一区别是它返回前一个兄弟节点

parentNode //重点3

描述：返回当前节点的父节点。

console.log(div2.parentNode.parentNode.parentNode.parentNode.parentNode);

注意：如果当前节点没有父节点，则返回null

parentElement属性

描述：parentElement属性返回当前节点的父元素节点。

如果当前节点没有父节点，或者父节点类型不是Element节点，则返回null。

console.log(div2.parentNode.parentNode.parentNode.parentNode);

console.log(div2.parentElement.parentElement.parentElement.parentElement);//对比一下，到html就没了

(3)返回当前node的内容的属性

textContent

描述：返回当前节点和它的所有后代节点的文本内容。

var result=document.getElementById('divA').textContent// This is some text

console.log(result);

nodeValue

描述：nodeValue属性一般只用于Text节点

console.log(span.firstChild.nodeValue);

span.firstChild.nodeValue=‘新的span值';

(4)返回当前节点的子节点的属性

childNodes //重点4

描述：childNodes属性返回一个节点集合(NodeList)，节点集合中包括当前节点的所有子节点

var childList=div1.childNodes;

console.log(childList);

console.log(childList.length);

console.log(childList instanceof  Array);

console.log(childList[1]);

firstChild/lastChild

描述：返回第一个\最后一个子节点，如果不存在返回null

console.log(div1.firstChild);

console.log(div1.lastChild);

---

3.Node的方法

(1)appendChild()，hasChildNodes()

(2)cloneNode()，insertBefore()，removeChild()，replaceChild()

(3)contains()，isEqualNode()

---

(1) appendChild()，hasChildNodes()

1.appendChild()方法

描述：appendChild()方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点

语法：node.appendChild(子节点);

注意：js创建的节点对象之间是没有文本对象的

var div= document.querySelector('div');

var span=document.createElement('span');

span.innerHTML='这是span';

div.appendChild(span);

console.log(div.childNodes);

2.hasChildNodes()

描述：判断一个节点是否有子节点，如果有返回true，否则false

语法：node.hasChildNodes();

var div= document.querySelector('div');

var span= document.querySelector('span');

console.log(div.hasChildNodes());

console.log(span.hasChildNodes());

(2) cloneNode()，insertBefore()，removeChild()，replaceChild()

3.cloneNode()方法

描述：cloneNode()方法用于克隆一个节点。它接受一个布尔值作为参数，

表示是否同时克隆子节点。默认是false，即不克隆子节点。

语法：node.cloneNode(boolean);

注意：

   a.拷贝的节点拥有和源节点一样的属性，但不会拷贝绑定的原节点事件

   b.深复制\浅复制

       不光拷贝当前节点，还会拷贝所有子节点（深复制：True参数）

       只拷贝当前节点，不拷贝子节点（浅复制：False/默认参数）

   c.啥叫拷贝：赋值一个节点，包括复制节点和属性

例子：

//H5部分新增的代码段

<button  id="but"  name=“but2”>点我</button>

//JS部分

   var but=  document.querySelector('button');

   but.onclick=function(){

   var newBut=but.cloneNode(true);//这时候克隆的还在内存里

   document.body.appendChild(newBut);//这时候页面里面才有

   }

---

下面几个方法的公用声明：

var div=document.querySelector('div');

var div1=document.querySelector('.div1');

var div2=document.getElementById('div2');

var but=document.getElementById('but');

4.insertBefore()方法

描述：insertBefore方法用于将某个节点插入当前节点的指定位置。

语法：node.insertBefore(newNode,subNode);

说明：

第一个参数是所要插入的节点，

第二个参数是当前节点的一个子节点，新的节点将插在这个节点的前面。

var span = document.createElement('span');
span.innerHTML='这是span';
var result=div.insertBefore(span,div.firstChild);
console.log(result);
console.log(div.childNodes);

5.removeChild()方法

描述：removeChild方法接受一个子节点作为参数，用于从当前节点移除该节点

语法：node.removeChild(node);

but.onclick=function(){
    if(div.hasChildNodes()){
        div.removeChild(div.firstChild);
    }
    else{
        alert('已经没有子节点了');
    }
}

6.replaceChild()方法

描述：replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。

语法：var replacedNode = parentNode.replaceChild(newChild, oldChild);

说明：它接受两个参数，第一个参数是用来替换的新节点，第二个参数将要被替换走的子节点。它返回被替换走的那个节点。

//例子1：

but.onclick=function(){

var span= document.createElement('span');  //创建一个span标签

span.innerHTML='这是span';

span.style.color='red';

div.replaceChild(span,div2);

}

//例子2:

but.onclick=function(){

var textNode= document.createTextNode('收藏');

    but.replaceChild(textNode,but.firstChild);

    but.setAttribute('disabled','disabled');

}

(3) contains()，isEqualNode()

该部分公用H5代码:

<div>

    <div  class="div1">div1</div>

    <div  id="div2">div2</div>

</div>

该部分公用JS声明：

var div=document.querySelector('div');

var div1=document.querySelector('.div1');

var div11=document.querySelectorAll('.div1')[0];

var div2=document.getElementById('div2');

var span= document.querySelector('span');

var span1=document.getElementsByClassName('span1')[0];

1.contains()

描述：contains方法接受一个节点作为参数，返回一个布尔值。

    判断当前节点是否包含参数节点，包含返回true，否则false

语法：node.contains(antherNode);

var  result=div1.contains(div2);

console.log(result);

console.log(document.body.contains(div2));

2.isEqualNode()

描述：判断两个节点是否相等

注意：所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。

语法：node.isEqualNode(node2);

console.log(div1.isEqualNode(div11));

console.log(span.isEqualNode(span1));

---

4.HTML元素 //了解

html元素是网页的根元素，document.documentElement就指向这个元素。js中关于html元素也提供了一些相关的属性和方法来帮助我们更好的操作：

(1)视图窗口大小：clientWidth属性，clientHeight属性

(2)html元素大小：offsetWidth属性，offsetHeight属性

//只要当前的窗口大小发生了变化就会显示在这个数值上面

console.log('htmlClientWidth:'+document.documentElement.clientWidth);

console.log('htmlClientHeight:'+document.documentElement.clientHeight);

//html元素多大这里的数值就是多大

console.log('htmlOffsetWidth:'+document.documentElement.offsetWidth);

console.log("htmlOffsetHeight:"+document.documentElement.offsetHeight);

注：clientWidth和clientHeight这两个属性返回的是视口（viewport）的大小，单位为像素。clientWidth和clientHeight在计算视图大小的时候不计算滚动条部分window.innerWidth和window.innerHeight包括了滚动条的高度和宽度。