DOM1详解

目录

一、Node类型

1、属性

1.1、nodeName：返回节点名称

1.2、parentNode：返回当前节点的父节点

1.3、childNodes：返回所有子节点，返回NodeList类数组对象

1.4、firstChild：返回第一个子节点，没有则返回null

1.5、lastChild：返回最后一个子节点，没有则返回null

1.6、previousSibling：返回上一个节点，没有则返回null

1.7、nextSibling：返回下一个节点，没有则返回null

2、方法

2.1、hasChildNodes()：返回布尔值，表示是否有子节点

2.2、appendChild(新节点)：向当前节点末尾添加子节点

2.3、insertBefore(新节点，参照节点 )：向指定位置之前添加节点

2.4、替换：replaceChild(新节点，替换节点)

2.5、删除：removeChild(子节点)

2.6、克隆：cloneNode(布尔值)：用于克隆节点，true是克隆子节点，默认false是不克隆子节点

二、DOM扩展

1、childElementCount：返回子元素的个数

2、children：返回元素子节点

3、firstElementChild：指向第一个子元素

4、lastElementChild：指向最后一个子元素

5、previousElementSibling：指向上一个同辈元素

6、nextElementSibling：指向下一个同辈元素

7、innerHTML：可读写，获取或替换元素所有子节点（不包含自身）

 7.1、获取html内容

 7.2、设置html内容

8、innerText：可读写，获取或替换元素所有文本

9、outerHTML：可读写，获取或替换元素所有子节点（包含自身）

---

一、Node类型

1、属性

1.1、nodeName：返回节点名称

    var Name=document.querySelector(".div1 .p1")
    var a=Name.nodeName
    console.log(a);

1.2、parentNode：返回当前节点的父节点

    var Name = document.querySelector(".div1 .p1")
    var a = Name.parentNode
    console.log(a);

1.3、childNodes：返回所有子节点，返回NodeList类数组对象

    var Name = document.querySelector(".div1")
    var a = Name.childNodes
    console.log(a);

 

1.4、firstChild：返回第一个子节点，没有则返回null

    var Name = document.querySelector(".div1")
    var a = Name.firstChild
    console.log(a);

1.5、lastChild：返回最后一个子节点，没有则返回null

1.6、previousSibling：返回上一个节点，没有则返回null

1.7、nextSibling：返回下一个节点，没有则返回null

2、方法

2.1、hasChildNodes()：返回布尔值，表示是否有子节点

    var Name = document.querySelector(".div1")
    var a = Name.hasChildNodes();
    console.log(a);

2.2、appendChild(新节点)：向当前节点末尾添加子节点

    var Div1 = document.querySelector(".div1")
    var span=document.createElement("span");
    
    Div1.appendChild(span);
    console.log(Div1.childNodes);

 

2.3、insertBefore(新节点，参照节点 )：向指定位置之前添加节点

    var Div1 = document.querySelector(".div1")
    var span = document.createElement("span")
    var P1 = document.querySelector(".p1")

    Div1.insertBefore(span,P1);
    console.log(Div1.childNodes);

 

2.4、替换：replaceChild(新节点，替换节点)

    var Div1 = document.querySelector(".div1")
    var span = document.createElement("span")
    var P1 = document.querySelector(".p1")

    Div1.replaceChild(span,P1);
    console.log(Div1.childNodes);

2.5、删除：removeChild(子节点)

    var Div1 = document.querySelector(".div1")
    var P1 = document.querySelector(".p1")

    Div1.removeChild(P1);
    console.log(Div1.childNodes);

2.6、克隆：cloneNode(布尔值)：用于克隆节点，true是克隆子节点，默认false是不克隆子节点

    var a = Div1.cloneNode(true);
    console.log(a);

 

二、DOM扩展

1、childElementCount：返回子元素的个数

    var Div1 = document.querySelector(".div1")
    var a = Div1.childElementCount
    console.log(a)

2、children：返回元素子节点

    var Div1 = document.querySelector(".div1")
    var a = Div1.children
    console.log(a)

3、firstElementChild：指向第一个子元素

    var Div1 = document.querySelector(".div1")
    var a = Div1.firstElementChild
    console.log(a)

4、lastElementChild：指向最后一个子元素

    var Div1 = document.querySelector(".div1")
    var a = Div1.lastElementChild
    console.log(a)

5、previousElementSibling：指向上一个同辈元素

    var Div1 = document.querySelector(".div1")
    var a = Div1.previousElementSibling
    console.log(a)

6、nextElementSibling：指向下一个同辈元素

    var Div1 = document.querySelector(".div1")
    var a = Div1.nextElementSibling
    console.log(a)

7、innerHTML：可读写，获取或替换元素所有子节点（不包含自身）

7.1、获取html内容

    var Div1 = document.querySelector(".div1")
    var a = Div1.innerHTML
    console.log(a)

 7.2、设置html内容

    var a = Div1.innerHTML
    a = ""
    console.log(a)

8、innerText：可读写，获取或替换元素所有文本

    var Div1 = document.querySelector(".div1")
    var a = Div1.innerText
    console.log(a)

9、outerHTML：可读写，获取或替换元素所有子节点（包含自身）

    var Div1 = document.querySelector(".div1")
    var a = Div1.outerHTML
    console.log(a)