JS基础学习:节点
文档：document
元素：页面中所有的标签，元素---element 标签--- 元素 ---对象
节点：页面中所有的内容（标签，属性，文本（文字，换行，回车，空格）），Node
根元素：html标签
相关属性
可以使用标签--元素.出来 也可以使用属性节点.出来， 文本节点.出来
-
nodeType：节点的类型，
1---标签 2----属性 3---- 文本 -
nodeName:节点的名字，
标签节点---大写的标签名字，
属性节点----小写的属性名字 ，
文本节点----#text -
nodeValue:节点的值，
标签节点---null ，
属性节点----属性值 ，
文本节点----文本内容
获取相关节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="dv">
<span>卡卡我看了</span>
<p>安居客为借口的健康</p>
<ul id="uu">
<li>请求</li>
<li>嗯嗯</li>
<li>让人</li>
</ul>
</div>
<script src="js/common.js"></script>
<script type="text/javascript">
var ulObj = my$('uu');
// ul标签的父级节点
console.log(ulObj.parentNode);
// ul标签的父级元素
console.log(ulObj.parentElement);
console.log("ulObj.parentNode:" + ulObj.parentNode); //div
console.log("ulObj.parentNode.parentNode:" + ulObj.parentNode.parentNode); //body
console.log("ulObj.parentNode.parentNode.parentNode:" + ulObj.parentNode.parentNode.parentNode); //html
console.log("ulObj.parentNode.parentNode.parentNode.parentNode:" + ulObj.parentNode.parentNode.parentNode.parentNode); //document
console.log("ulObj.parentNode.parentNode.parentNode.parentNode.parentNode:" + ulObj.parentNode.parentNode.parentNode
.parentNode.parentNode); //null
//页面中最顶级的元素就是document了,
// 标签 的
console.log("ul标签的nodeType：" + ulObj.parentNode.nodeType);
console.log("ul标签的nodeName：" + ulObj.parentNode.nodeName);
console.log("ul标签的nodeValue：" + ulObj.parentNode.nodeValue);
var dvObj = document.getElementById('dv');
console.log("ulObj.childNodes:" + dvObj.childNodes); //7个
console.log("ulObj.children:" + dvObj.children); //3个
for (i = 0; i < dvObj.childNodes.length; i++) {
var node = dvObj.childNodes[i];
//nodeType:1----标签 2----属性 3----文本
// nodeName: 大写的标签:标签; 小写的属性名:属性; #text:文本
// nodeValue:标签:null; 属性:属性的值, 文本:文本内容
console.log("nodeType:" + node.nodeType + "=========nodeName:" + node.nodeName + "===========nodeValue:" + node.nodeValue);
}
// 获取的属性的节点
var node =dvObj.getAttributeNode('id');
console.log("nodeType："+node.nodeType);
console.log("nodeName："+node.nodeName);
console.log("nodeValue："+node.nodeValue);
</script>
</body>
</html>
12行代码:都是获取节点和元素的
// ul
var ulObj = document.getElementById('uu');
// 父级节点
console.log("父级节点：" + ulObj.parentNode);
// 父级元素
console.log("父级元素：" + ulObj.parentElement);
// 子节点
console.log("子节点：" + ulObj.childNodes);
// 子元素
console.log("子元素：" + ulObj.children);
console.log("==================================================");
// 第一个子节点
console.log("第一个子节点：" + ulObj.firstChild); //IE8中是第一个子元素
// 第一个子元素
console.log("第一个子元素：" + ulObj.firstElementChild); //IE8中不支持
// 最后一个子节点
console.log("最后一个子节点" + ulObj.lastChild); //IE8中是最后一个子元素
// 最后一个子元素
console.log("最后一个子元素" + ulObj.lastElementChild); //IE8中不支持
// 某个元素的前一个兄弟节点
console.log("某个元素的前一个兄弟节点:" + my('three').previousElementSibling);
// 某个元素的后一个兄弟节点
console.log("某个元素的后一个兄弟节点:" + my('three').nextElementSibling);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="dv">
<span>卡卡我看了</span>
<p>安居客为借口的健康</p>
<ul id="uu">
<li>请求</li>
<li>嗯嗯</li>
<li id="three">来晚了</li>
<li>让人</li>
</ul>
</div>
<script src="js/common.js"></script>
<script>
// 12行代码:都是获取节点和元素的
// ul
var ulObj = document.getElementById('uu');
// 父级节点
console.log("父级节点：" + ulObj.parentNode);
// 父级元素
console.log("父级元素：" + ulObj.parentElement);
// 子节点
console.log("子节点：" + ulObj.childNodes);
// 子元素
console.log("子元素：" + ulObj.children);
console.log("==================================================");
// 第一个子节点
console.log("第一个子节点：" + ulObj.firstChild); //IE8中是第一个子元素
// 第一个子元素
console.log("第一个子元素：" + ulObj.firstElementChild); //IE8中不支持
// 最后一个子节点
console.log("最后一个子节点" + ulObj.lastChild); //IE8中是最后一个子元素
// 最后一个子元素
console.log("最后一个子元素" + ulObj.lastElementChild); //IE8中不支持
// 某个元素的前一个兄弟节点
console.log("某个元素的前一个兄弟节点:" + my$('three').previousSibling);
// 某个元素的前一个兄弟元素
console.log("某个元素的前一个兄弟元素:" + my$('three').previousElementSibling);
// 某个元素的后一个兄弟节点
console.log("某个元素的后一个兄弟节点:" + my$('three').nextSibling);
// 某个元素的后一个兄弟元素
console.log("某个元素的后一个兄弟元素:" + my$('three').nextElementSibling);
</script>
</body>
</html>
相关链接：
demo地址
