目录
0.码仙励志
精彩的人生没有彩排，每天都是现场直播
1.节点的介绍
1.解释
页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
2.节点的属性
1.解释
可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来
2.nodeType 节点的类型
1----标签,2---属性,3---文本
3.nodeName 节点的名字
标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text
4.nodeValue 节点的值
标签节点---null,属性节点---属性值,文本节点---文本内容
3.获取相关的节点
<body>
<div id="dv">
<span>这是div中的第一个span标签</span>
<p>这是div中的第二个元素,第一个p标签</p>
<ul id="uu">
<li>喜羊羊</li>
<li>美羊羊</li>
<li id="three">懒羊羊</li>
<li>沸羊羊</li>
<li>暖羊羊</li>
</ul>
</div>
<script>
//ul
var ulObj = document.getElementById("uu");
//父级节点
console.log("父级节点");
console.log(ulObj.parentNode);
//父级元素
console.log("父级元素");
console.log(ulObj.parentElement);
//子节点
console.log("子节点");
console.log(ulObj.childNodes);
//子元素
console.log("子元素");
console.log(ulObj.children);
console.log("==============================================");
//第一个子节点
console.log("第一个子节点");
console.log(ulObj.firstChild);//------------------------IE8中是第一个子元素
//第一个子元素
console.log("第一个子元素");
console.log(ulObj.firstElementChild);//-----------------IE8中不支持
//最后一个子节点
console.log("最后一个子节点");
console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素
//最后一个子元素
console.log("最后一个子元素");
console.log(ulObj.lastElementChild);//-----------------IE8中不支持
//某个元素的前一个兄弟节点
console.log("某个元素的前一个兄弟节点");
console.log(document.getElementById("three").previousSibling);
//某个元素的前一个兄弟元素
console.log("某个元素的前一个兄弟元素");
console.log(document.getElementById("three").previousElementSibling);
//某个元素的后一个兄弟节点
console.log("某个元素的后一个兄弟节点");
console.log(document.getElementById("three").nextSibling);
//某个元素的后一个兄弟元素
console.log("某个元素的后一个兄弟元素");
console.log(document.getElementById("three").nextElementSibling);
</script>
</body>
4.节点的兼容代码
1.获取任意一个父级元素的第一个子级元素
function getFirstElementChild(element) {
if (element.firstElementChild) {//true--->支持
return element.firstElementChild;
} else {
var node = element.firstChild;//第一个节点
while (node && node.nodeType != 1) {
node = node.nextSibling;
}
return node;
}
};2.获取任意一个父级元素的最后一个子级元素
function getLastElementChild(element) {
if (element.lastElementChild) {//true--->支持
return element.lastElementChild;
} else {
var node = element.lastChild;//第一个节点
while (node && node.nodeType != 1) {
node = node.previousSibling;
}
return node;
}
};