文档 document
元素 element(页面中的标签都叫元素p、div、 a元素就是标签)
节点 Node页面中所有的内容都叫做节点(元素、标签、属性、文本——文字、空格、换行、回车 )
DOM节点 HTML文档
元素节点 标签
属性节点 属性
文本节点 文本内容
注释节点 注释
节点属性(可以用标签.出来，元素.出来，属性.出来，文本.出来)
节点类型 nodeType
1代表标签节点
2代表属性节点
3代表文本节点
节点名字 nodeName
标签节点——获取大写的标签名
属性节点——获取小写的属性名
文本节点——获取#text
节点的值 nodeValue
标签节点——null
属性节点——属性值
文本节点——文本内容
例：
<body>
<div id="dv">
<span>span标签</span>
<p>标签</p>
<ul id="uu">
<li>鸣人</li>
<li>佐助</li>
<li id="three">小樱</li>
<li>我爱罗</li>
<li>小李</li>
</ul>
</div>
<script src="publick.js"></script>
<script>
var ulObj = my$("uu");
//ul标签的父节点 ul标签的父级元素——元素就是标签
console.log(ulObj.parentNode); //<div></div>
//获取父级元素
console.log(ulObj.parentElement); //<div></div>
//div是ul的父节点也是ul的父元素
//获取div的nodeType、nodeName、nodeValue
console.log(ulObj.parentNode.nodeType); //1代表标签节点
console.log(ulObj.parentNode.nodeName); //DIV
console.log(ulObj.parentNode.nodeValue); //null
//追踪父标签
console.log(ulObj.parentNode); //div
console.log(ulObj.parentNode.parentNode); //body
console.log(ulObj.parentNode.parentNode.parentNode); //html
console.log(ulObj.parentNode.parentNode.parentNode.parentNode); //document
console.log(ulObj.parentNode.parentNode.parentNode.parentNode.parentNode); //null
var dvObj = document.getElementById("dv");
// 子节点，节点的范围大，包含了标签，文本，换行...
console.log(dvObj.childNodes);
// 子元素----元素就是标签
console.log(dvObj.children);
//总结：节点的范围大（回车也算文本节点，换行，空格），元素的范围小---元素就是标签
for(var i = 0; i < dvObj.childNodes.length; i++){
/*
nodeType ---> 节点类型 1--标签，2--属性，3---文本
nodeName ---> 节点名称 大写的标签--标签，小写的属性名--属性，#text--文本
nodeValue ---> 节点值的值 标签--null 属性---属性的值，文本--文本的内容
*/
var node = dvObj.childNodes[i];
console.log(node.nodeType+"====="+node.nodeName+"===="+node.nodeValue);
}
// 3.获取属性的节点
var dvObj = document.getElementById("dv");
var node = dvObj.getAttributeNode("id");//属性节点
console.log(node.nodeType+"====="+node.nodeName+"===="+node.nodeValue);
</script>
</body>
获取节点元素的方式
var ulObj = document.getElementById("uu");
//父级节点
console.log(ulObj.parentNode);
//父级元素
console.log(ulObj.parentElement);
//子级节点
console.log(ulObj.childNodes); //11 换行属于文本
//子级元素——子标签
console.log(ulObj.children); //5
扩展；
//第一个子节点
console.log(ulObj.firstChild);
//第一个子元素
console.log(ulObj.firstElementChild); //<li></li>
//最后一个子节点
console.log(ulObj.lastChild);
//最后一个子元素
console.log(ulObj.lastElementChild);
//某个元素的前一个兄弟节点
console.log(my$("three").previousSibling);
//某元素的前一个兄弟元素
console.log(my$("three").previousElementSibling); //<li></li>
//某个元素的后一个兄弟节点
console.log(my$("three").nextSibling);
//某个元素的后一个兄弟元素
console.log(my$("three").nextElementSibling);
注：从第一个子节点开始，在IE8等低版本浏览器中叫做元素，第一个子元素，IE8浏览器不支持
需求：点击按钮实现变色
<style>
div{
width: 300px;
height: 500px;
border:1px solid #000;
}
</style>
<body>
<input type="button" value="改变p标签的颜色" id="btn">
<div id="dv">
<span>我是span奥特曼</span>
<p>我是段落P迪迦</p>
<span>我是span奥特曼</span>
<p>我是段落P迪迦</p>
<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="publick.js"></script>
<script>
my$("btn").onclick = function(){
//获取div
var dvObj = my$("dv");
//获取div里的所有子节点
var nodes = dvObj.childNodes; //伪数组
//遍历
for(var i = 0; i < nodes.length; i++){
//判断
if(nodes[i].nodeType == 1 && nodes[i].nodeName == "P"){
nodes[i].style.backgroundColor = "pink";
}
}
}
</script>
