DOM(一)
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
TextContent返回当前节点和他所有后代节点的文本。忽略标签。
<div id=“div”>我是<span>span</span></div>
document.getElementById(“div”).textContent //我是span
同样textContent也是一个可读可写属性。如果写入的内容包含标签，也会把标签当作文本。
div.textContent=“<p>我是p</p>”
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文档节点或元素节点
parentElement返回当前节点的父级元素节点。
没有返回null
FirstChild返回当前节点的第一个子节点
lastChild返回当前节点中的最后一个子节点
没有则返回null
childNodes返回当前节点的所有子节点
是一个nodelist数据
node的方法
appendChild()用来插入节点
var p=document.creatElement(“p”) //要插入的元素
document.body.appendChild(p) //在某个位置添加
p.innerHTML=“”和p.innerText=“”都是插入的节点中要添加的内容
区别：
p.innerHTML=“”标签可识别出来
p.innerText=“”标签直接被当做文本显示出来
hasChildNodes()用来判断一个节点是否有子节点。
该方法返回一个布尔值。表示当前节点是否有子节点
cloneNone()用来克隆一个节点
Var newDiv=document.getElementsByClassName(“div”)
[0].cloneNode(true)
Document.body.appendChild(newDiv)
该方法可以穿入一个布尔值。值为true，表示复制指定元素的子节点。默认不复制子节点。
复制的元素不包括添加在该元素上的事件。要用appendChild把复制的节点，添加到文档中去
insertBefore()用来将一个节点插入到指定位置
insertBefore()要传入两个值。第一个值为要添加的节点。第二个值为将新节点插入到此值的前面，
如果第二个值为null，就会插入到当前元素的最后
removeChild()表示从父元素中移除该子节点。
var div1=document.getElementById(“div”)
div1.parentNode.removeChild(div1)
replaceChild()表示替换当前节点的某一个子节点
replaceChild()传入两个值。第一个值是新节点、第二个值是要替换的节点。
网友评论