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()传入两个值。第一个值是新节点、第二个值是要替换的节点。
示例: