API之节点
目录
- 什么是节点
- 节点相关的属性
- 关于获取节点和元素的12行代码
- 案例
- 点击按钮给p标签添加背景颜色
- 隔行变色
- 封装节点兼容代码
什么是节点
节点（node） 表示的是页面中所有的内容（标签，属性，文本（文字，换行，回车，空格））
节点的相关属性
节点的属性： 可以使用标签--元素.出来，可以使用属性节点.出来，文本节点.出来
- 节点的类型：nodeType ，.nodeType在控制台输出时 1代表标签，2代表属性， 3代表文本
- 节点名字：nodeName ，如果是标签节点的话在控制台输出的是大写的标签名字，如果是属性节点的话，在控制台输出时是小写的属性名字，如果是文本节点，在控制台输出时，是#text
- 节点的值： nodeValue， 如果是标签节点的话在控制台输出的是null，如果是属性节点的话，在控制台输出时是属性值，如果是文本节点，在控制台输出时，是文本内容
<body>
<div id='dv'>
<p>这是div里面的第一个p标签</p>
<span>这时div里面的第一个span标签</span>
<ul id='uu'>
<li>乔峰</li>
<li>鹿茸</li>
<li id='three'>段誉</li>
<li>卡卡西</li>
<li>雏田</li>
</ul>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
var uu = my$('uu');
//获取ul标签的父级节点
console.log(uu.parentNode);
//获取ul标签的父级元素
console.log(uu.parentElement);
console.log(uu.parentNode.nodeType); //1-----标签节点
console.log(uu.parentNode.nodeName);//DIV-----标签节点----大写的标签名字
console.log(uu.parentNode.nodeValue);//null-----标签节点
</script>
</body>
关于获取节点和元素的12行代码
总结：
凡是获取节点的代码在谷歌和火狐上得到都是相关的节点
凡是获取元素的代码在谷歌和火狐上得到的都是相关的元素
从子节点和兄弟节点开始，凡是获取节点的代码只要在IE8内都是元素，只要是获取元素的代码在IE8中都是undefined
<div id='dv'>
<p>这是div里面的第一个p标签</p>
<span>这时div里面的第一个span标签</span>
<ul id='uu'>
<li>乔峰</li>
<li>鹿茸</li>
<li id='three'>段誉</li>
<li>卡卡西</li>
<li>雏田</li>
</ul>
</div>
<script src='common.js'></script>
<script>
//获取ul的元素和节点
var uu = my$('uu');
//父级节点
console.log(uu.parentNode);
//父级元素
console.log(uu.parentElement);
//子节点
console.log(uu.childNodes);
//子元素
console.log(uu.children);
console.log('=======================')
//第一个子节点
console.log(uu.firstChild); //----------------IE8中是第一个子元素
//第一个子元素
console.log(uu.firstElementChild); //-------------IE8不支持
//最后一个子节点
console.log(uu.lastChild);
//最后一个子元素
console.log(uu.lastElementChild);
//某一个元素的前一个兄弟节点
console.log(my$('three').previousSibling);
//某一个元素的后一个兄弟元素
console.log(my$('three').previousElementSibling);
//某一个元素的后一个兄弟节点
console.log(my$('three').nextSibling);
//某一个元素的后一个兄弟元素
</script>
案例
点击按钮给p标签添加背景颜色
<input type="button" value="变色" id="btn">
<div id='dv'>
<span>这是第一个span标签</span>
<p>这是第一个p标签</p>
<span>这是第二个span标签</span>
<p>这是第二个p标签</p>
<span>这是第三个span标签</span>
<p>这是第三个p标签</p>
<a href="http://www.baidu.com">百度 </a>
</div>
<script src='common.js'></script>
<script>
// 给按钮注册点击事件
my$('btn').onclick = function() {
//获取div里面所有的子节点
var nodes = my$('dv').childNodes;
//循环遍历所有的子节点
for (var i = 0; i < nodes.length; i++) {
//判断这个子节点是不是p标签
// 1表示节点的类型是标签， 大写的P表示是标签名
if (nodes[i].nodeType === 1 && nodes[i].nodeName === 'P') {
nodes[i].style.backgroundColor = 'red';
}
}
}
</script>
案例之隔行变色
<input type="button" value="隔行变色" id="btn">
<ul id='uu'>
<li>你好</li>
<li>hello</li>
<li>再见</li>
<li>goodbye</li>
<li>晚安</li>
<li>goodnight</li>
</ul>
<script src='common.js'></script>
<script>
my$('btn').onclick = function() {
var count = 0; //记录li的个数
//获取ul里面所有的子节点
var nodes = my$('uu').childNodes;
for (var i = 0; i < nodes.length; i++) {
//判断这个节点是不是li
if (nodes[i].nodeType === 1 && nodes[i].nodeName === 'LI') {
nodes[i].style.backgroundColor = count % 2 === 0 ? 'red' : 'yellow';
count++;
}
}
}
</script>
封装节点的兼容代码
<ul id='uu'>
<li>第一个</li>
<li>第二个</li>
<li id='three'>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
<script src='common.js'></script>
<script>
//第一个节点和第一个元素的获取的代码可能在IE8中不支持
//element.firstChild====>火狐和谷歌获取的是第一个子节点
//element.firstChild=====> IE8获取的是第一个子元素
//element.firstElementChild =====》谷歌和火狐获取的是第一个子元素，但是IE8不支持
//获取任意一个父级元素的第一个子级元素
function getFirstElementChild(element) {
if (element.firstElementChild) { //true===>支持
return element.firstElementChild;
} else {
var node = element.firstChild;
while (node && node.nodeType !== 1) { //节点有意义，且不是标签
node = node.nodeNextSibling;
}
return node;
}
}
//获取任意一个父级元素的最后一个子级元素
function getLastElementChild(element) {
if (element.lastElementChild) {
return element.lastElementChild;
} else {
var node = element.lastChild;
if (node && node.nodeType !== 1) {
node = node.nodePreviousSibling
}
return node;
}
}
//test
console.log(getFirstElementChild(my$('uu')));
console.log(getLastElementChild(my$('uu')));
//获取某个元素的前一个元素
function getAnyonePreviousElementSibling(element) {
if (element.previousElementSibling) {
return element.previousElementSibling;
} else {
var node = element.previousSibling;
if (node && node.nodeType !== 1) {
node = node.previousElementSibling;
}
return node;
}
}
//获取某个元素的后一个元素
function getAnyoneNextElementSibling(element) {
if (element.nextElementSibling) {
return element.nextElementSibling;
} else {
var node = element.nextSibling;
if (node && node.nodeType !== 1) {
node = node.nextElementSibling;
}
return node;
}
}
// test
console.log(getAnyoneNextElementSibling(my$('three')));
console.log(getAnyonePreviousElementSibling(my$('three')));
</script>
