node:节点 attribute:属性 comment:注释
节点（node）：
DOM的最小组成单位解释node。文档的树形结构（DOM树），就是由各种类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的7种类型
Document:整个文档树的顶层节点
DocumentType:doctype标签（比如</DOCTYPE html>）//不常用
Element:网页的各种HTML标签（比如<body>、<a>）
Attribute:网页元素的属性（比如class=“a” src=“img/a.png”）
Text:标签之间或标签包含的文本
Comment:注释
DocumentFragment:文档的片段 //不常用
节点的属性：
nodeType属性返回一个整数值，表示节点的类型
文档节点————————————（9），
元素节点————————————（1），
属性节点————————————（2），
文本节点————————————（3），
文档片段节点——————————（11），
文档类型节点——————————（10），
注释节点————————————（8）
nodeName返回节点名称
文档节点：#document
元素节点：大写的标签名
属性节点：属性名称
文本节点：#text
文档片段节点：#document-fragment
文档类型节点：文档的类型
注释节点：#comment
nodeValue返回节点的文本值
//<div id=“div”>hello world</div>
var div=document.getElementById（“div”）
//div为元素节点，hello为文本节点
div.nodeValue //null
div.firstChild.nodeValue
示例：
image.png
image.png
结果：
image.png
TextContent返回当前节点和他所有后代节点的文本。忽略标签。
<div id=“div”>我是<span>span</span></div>
document.getElementById(“div”).textContent //我是span
示例：
image.png
image.png
同样textContent也是一个可读可写属性。如果写入的内容包含标签，也会把标签当作文本。
div.textContent=“<p>我是p</p>”
示例：
image.png
结果：
image.png
nextSibling返回当前节点的下一个兄弟节点（同级标签）
<div id=“d1”>hello</div><div id=“d2”>world</div>（换行符要去掉）
var div1=document.geteElementById(“d1”)
var div2=document.geteElementById(“d2”)
注：换行符会影响结果
如果不存在下一个兄弟节点则返回null
nextSibling遍历所有节点
var el=document.getElementById(“div1”).firstChild;
while(el!==null){
console.log(el.noseName);
el=el.nextSibling;
}
parentNode返回当前节点的父级节点。
只可能是document文档节点或元素节点
示例：
image.png
结果：
image.png
parentElement返回当前节点的父级元素节点。
没有返回null
示例：
image.png
FirstChild返回当前节点的第一个子节点
lastChild返回当前节点中的最后一个子节点
没有则返回null
childNodes返回当前节点的所有子节点
是一个nodelist数据
示例：
image.png
node的方法
appendChild()用来插入节点
var p=document.creatElement(“p”)//要插入的元素
document.body.appendChild(p)//在某个位置添加
p.innerHTML=“”和p.innerText=“”//都是插入的节点中要添加的内容
示例：
image.png
区别：
p.innerHTML=“”标签可识别出来
p.innerText=“”标签被直接当做文本显示出来
hasChildNodes()用来判断一个节点是否有子节点
该方法返回一个布尔值。表示当前节点是否有子节点
示例：
image.png
cloneNone()用来克隆一个节点不会复制事件
var newDiv=document.getElementsByClassName(“div”)[0].cloneNode(true)
document.body.appendChild(newDiv)
该方法可以穿入一个布尔值。值为true，表示复制指定元素的子节点。默
认不复制子节点。
复制的元素不包括添加在该元素上的事件。要用appendChild把复制的节点，添加到文档中去
insertBefore()用来将一个节点插入到指定位置
insertBefore()要传入两个值。第一个值为要添加的节点。第二个值为将新节点插入到此值的前面，
如果第二个值为null，就会插入到当前元素的最后
示例：
image.png
结果：
image.png
removeChild()表示从父元素中移除该子节点。
示例：
image.png
var div1=document.getElementById(“div”)
div1.parentNode.removeChild(div1)
replaceChild()表示替换当前节点的某一个子节点
replaceChild()传入两个值。第一个值是新节点、第二个值是要替换的节点。
示例：
image.png
image.png
网友评论