DOM初探（6）——节点的四个属性
节点的四个属性：
nodeName
元素的标签名，以大写形式表示，只读
nodeValue
Text节点或Comment节点的文本内容，可读写
nodeType(重要)
该节点的类型，只读
attributes
Element节点的属性集合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<div>123
<!-- this is comment -->
<strong></strong>
<span></span>
<em></em>
<i></i>
<b></b>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
</script>
</body>
</html>
第一个属性:nodeName
只能读取值，不能写入值！！
第二个属性：nodeValue
只有文本节点和注释节点才有的！
能读取，能写入！！
第三个属性：nodeType
最有用的一个属性，它可以帮咱们分辨这个节点到底是什么节点。-----只读
(元素节点—1；属性节点—2；文本节点—3；注释节点—8；document—9；DocumentFrangment--11)
属性节点存在，但是几乎没有什么用。
现在我把div下面的元素节点全部跳出来，放到一个数组里面，给你返回：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<div>123
<!-- this is comment -->
<strong></strong>
<span></span>
<em></em>
<i></i>
<b></b>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
function retElementChild(node){
//no children
var arr = [],
child = node.childNodes,
len = child.length;
for(var i = 0; i < len; i ++){
if(child[i].nodeType == 1)
arr.push(child[i])
}
return arr;
}
console.log(retElementChild(div));
</script>
</body>
</html>
我们还可以做得更像一点：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<div>123
<!-- this is comment -->
<strong></strong>
<span></span>
<em></em>
<i></i>
<b></b>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
function retElementChild(node){
//no children
var temp = {
length : 0,
push : Array.prototype.push,
splice : Array.prototype.splice
},
child = node.childNodes,
len = child.length;
for(var i = 0; i < len; i ++){
if(child[i].nodeType == 1)
temp.push(child[i])
}
return temp;
}
console.log(retElementChild(div));
</script>
</body>
</html>
第四个属性：attributes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<div id="only" class="demo"></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
</script>
</body>
</html>
把元素的属性放到类数组里面去。
你可以用attributes把元素的属性名和属性值取出来
你也可以把属性值改了，但是属性名你改不了：