DOM节点的介绍与获取
DOM节点的介绍
网页的内容是由标签组成的这句话并不完全正确,网页的内容是由节点组成的
节点分别有:
元素节点
属性节点
文本节点
注释节点
文档节点
节点的三要素
节点的类型:nodeType
节点的名称:nodeName
节点值:nodeValue
元素节点
nodeType:1
nodeName:标签名的大写
nodeValue:null
<div id="box">
<p id="pOne"></p>
</div>
var box =document.getElementById("box");
var pOne =document.getElementById("pOne");
console.log(box.nodeType);//1
console.log(box.nodeName);//DIV
console.log(box.nodeValue);//null
console.log(pOne.nodeType);//1
console.log(pOne.nodeName);//P
console.log(pOne.nodeValue);//null
属性节点
nodeType:2
nodeName:属性名
nodeValue:属性值
获取属性节点要用attribute
<div id="box" class="bbb">
<p id="pOne"></p>
</div>
box.id或者box.className这种获取的是节点值,不是属性节点
attribute
console.log(box.attributes);获取的是元素属性的一个数组
console.log(box.attributes[0].nodeType);//2
console.log(box.attributes[0].nodeName);//id
console.log(box.attributes[0].nodeValue);//box
console.log(box.attributes[1].nodeType);//2
console.log(box.attributes[1].nodeName);//class
console.log(box.attributes[1].nodeValue);//bbb
获取元素子节点:childNodes
获取元素的所有子节点(文本、注释、元素)
在谷歌火狐中获取的是:文本(包括空文本(不可见字符))、注释、元素
在IE8及以下版本获取的是:文本(不包括空文本)、注释、元素
<ul id="ul">
<li>我是li1</li>5555
<!--我是注释行-->>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ul>
var ul=document.getElementById("ul");
console.log(ul.childNodes);
文本节点
nodeType:3
nodeName:#text
nodeValue:文本内容
console.log(ul.childNodes[2].nodeType);//3
console.log(ul.childNodes[2].nodeName);//#text
console.log(ul.childNodes[2].nodeValue);//5555
注释节点
nodeType:8
nodeName:#comment
nodeValue:注释内容
console.log(ul.childNodes[3].nodeType);//8
console.log(ul.childNodes[3].nodeName);//#comment
console.log(ul.childNodes[3].nodeValue);//我是注释行
文档节点
nodeType:9
nodeName:#document
nodeValue:null
console.log(document.nodeType);//9
console.log(document.nodeName);//#document
console.log(document.nodeValue);//null
获取子节点和子元素
获取子元素:父元素.children
谷歌火狐:获取到的是元素节点
IE8及以下版本:获取到的是注释和元素
<ul id="ul">
<li>我是li1</li>6666
<!--我是注释行-->>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ul>
console.log(ul.children);
获取子节点:父元素.childNodes
谷歌火狐:获取到的是文本(包含空文本)、注释、元素
IE8及以下版本:获取到的是非空文本、注释、元素
console.log(ul.childNodes);
获取兄弟节点和兄弟元素
获取兄弟节点 :
上一个节点 :previousSibling
下一个节点 :nextSibling
获取兄弟元素 :
上一个元素 :previousElementSibling
下一个元素 :nextElementSibling
<ul id="ul">
666666
<!-- 我是注释 -->
<li>我是li标签1</li>
<li id="li2">我是li标签2</li>
<li id="li3">我是li标签3</li>
<li>我是li标签4</li>
<li>我是li标签5</li>
</ul>
<script>
// 获取元素
var ul = document.getElementById("ul");
var li2 = document.getElementById("li2");
var li3 = document.getElementById("li3");
// 1. 获取兄弟节点
// 上一个节点
console.log(li2.previousSibling); // 文本节点
// 下一个节点
console.log(li2.nextSibling); // 文本节点
// 2. 获取兄弟元素
//上一个元素
console.log(li2.previousElementSibling);
// 下一个元素
console.log(li2.nextElementSibling);
IE8不支持获取兄弟元素的操作, 执行得到的undefined, 而且 在IE8里面没有任何替代方案
IE8要获取兄弟元素 只能通过节点获取
获取上一个兄弟元素的封装
@param ele : 需要查找的目标参数
@return node : 返回的是一个元素节点
function getPreviousElement(ele) {
// 能力检测
if(ele.previousElementSibling) { // 谷歌火狐
return ele.previousElementSibling;
} else { // IE8
// 获取上一个节点 : null 元素 文本 注释
var node = ele.previousSibling;
// 循环次数不确定
// 1. node必须存在, 不是null, 2. node不是元素节点
while(node != null && node.nodeType != 1) {
node = node.previousSibling
}
// node == null 或者 node.nodeType == 1
return node;
}
}
console.log(getPreviousElement(li2));
获取下一个元素的兼容性封装
function getNextElement(ele) {
// 能力检测
if(ele.nextElementSibling) { // 谷歌火狐
return ele.nextElementSibling;
} else { // IE8
// 获取下一个节点 : null 元素 文本 注释
var node = ele.nextSibling;
// 循环次数不确定
// 1. node必须存在, 不是null, 2. node不是元素节点
while(node && node.nodeType != 1) {
node = node.nextSibling
}
// node == null 或者 node.nodeType == 1
return node;
}
}
console.log(getNextElement(li3));
获取第一个子元素和子节点
获取第一个子节点 : 父元素.firstChild
获取第一个子元素 : 父元素.firstElementChild
<ul id="ul">
wwwwww
<!-- 我是注释 -->
<li>我是li标签1</li>
<li id="li2">我是li标签2</li>
<li>我是li标签3</li>
<li>我是li标签4</li>
<li>我是li标签5</li>
</ul>
var ul = document.getElementById("ul");
console.log(ul.firstChild);
console.log(ul.firstElementChild);
IE8无法执行元素的操作
获取第一个子元素的兼容型封装
function getFirstElementChild(ele){
// 能力检测
if(ele.firstElementChild != undefined){// 谷歌火狐
return ele.firstElementChild;
}else{// IE8
// 第一个子节点 : null 元素 文本 注释
var nodeFirst = ele.firstChild;
// 循环次数不确定
// 1. nodeFirst必须存在, 不是null, 2. nodeFirst不是元素节点
while(nodeFirst && nodeFirst.nodeType != 1){
nodeFirst = nodeFirst.nextSibling;
}
// nodeFirst == null 或者 nodeFirst.nodeType == 1
return nodeFirst;
}
}
获取最后一个子元素和子节点
获取最后一个子节点 : 父元素.lastChild
获取最后一个子元素 : 父元素.lastElementChild
var ul = document.getElementById(“ul”);
<ul id="ul">
wwwwww
<!-- 我是注释 -->
<li>我是li标签1</li>
<li id="li2">我是li标签2</li>
<li>我是li标签3</li>
<li>我是li标签4</li>
<li>我是li标签5</li>
</ul>
console.log(ul.lastChild);
console.log(ul.lastElementChild);
IE8兼容性的封装 获取最后一个子元素
function getLastElementChild(obj){
if(obj.lastElementChild != undefined){
return obj.lastElementChild;
}else{
var nodeLast = obj.lastChild;
while(nodeLast && nodeLast.nodeType != 1){
nodeLast = nodeLast.previousSibling;
}
return nodeLast;
}
}
获取父节点
获取父节点 : 子元素.parentNode
<ul id="ul">
wwwwww
<!-- 我是注释 -->
<li>我是li标签1</li>
<li id="li2">我是li标签2</li>
<li>我是li标签3</li>
<li>我是li标签4</li>
<li>我是li标签5</li>
</ul>
// 获取子元素
var li2 = document.getElementById("li2");
console.log(li2.parentNode);
// 获取的父节点 一定是元素节点(只有元素才会有子节点)
克隆节点
元素.cloneNode(参数)
参数 : 布尔类型 true false(默认)
<div id="box">
我是外面的大盒子
<h1>我是标题</h1>
</div>
var box = document.getElementById("box");
var box1 = box.cloneNode(true)
console.log(box1);
// 1. 克隆节点只会在内存中克隆一份, 不会添加到页面上 只能手动添加
//2. 克隆会把id也克隆过去
// 为了保持页面id的唯一性, 需要修改克隆元素的id
box1.id = "box1"
// 添加子元素到页面中(父元素中) 父元素.appendChild(子元素)
document.body.appendChild(box1)