DOM中节点的类型
DOM中一共有12中类型。但是我们常用的只有几种。
首先我们了解下DOM中一般常见的节点类型有哪些？
1、元素节点
DOM中的原子都是元素节点，比如<body><table><div>等等。
如果把Web上的文档比作一座大厦，则元素就是构成这块大厦的砖石。一个文档是由N个元素组成的。元素可包含其他元素。
2、文本节点
任意的文字、空格、换行、空白行都算是文本节点。
3、属性节点
属性节点，故名思议就是其他节点的属性。例如所有的元素都有title属性，在title='title1'就是一个属性节点。
4、注释节点
就是注释了。
由childNodes属性返回的数组中包含着所有类型的节点，所有的属性节点和文本节点也包含在其中。
文档里几乎每一样东西都是一个节点，甚至连空格和换行符都会被解释成节点。而且都包含在childNodes属性所返回的数组中。
chidNoeds返回的事node的集合，
每个node都包含有nodeType属性。
nodeType取值：
元素节点：1
属性节点：2
文本节点：3
注释节点：8
如果要获取子元素的节点，需要使用 对象.nodeType==1判断是元素节点再获取该元素。
使用方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点的使用</title>
</head>
<body>
<div id="box">
<ul>
<li>哈哈</li>
<li>2222</li>
</ul>
</div>
<input type="button" value="父节点添加样式" onclick="addParent()">
<input type="button" value="子节点添加样式" onclick="addChild()">
<script>
var box = document.getElementById("box");
function addParent()
{
box.parentNode.style.background = "tomato";
}
function addChild()
{
var length = box.childNodes.length;
var lis = box.childNodes;
for(var i=0;i<length;i++)
{
if(lis[i].nodeType == 1)
{
lis[i].style.color = "red";
}
}
}
</script>
</body>
</html>
桂ICP备15001964号-1
