Javascript(笔记25) - DOM基本操作 - 节点的四个属性
所有的节点都有这四个属性
节点的四个属性
nodeName
返回元素的标签名，以大写形式表示，只读；
document 的nodeName 属性：
以这个THML为例：
<div>
这是一段文本
<!-- this is comment -->
<strong></strong>
<span></span>
</div>
JS里取出 div:
var div = document.getElementsByTagName("div")[0];
看控制台：
取 div 的 childNodes 的节点类数组；
第一个是文本节点的 nodeName；
第二个是注释节点的 nodeName;
第三个是元素节点的 nodeName;
这个属性就是看节点的名字，且为只读，不能写入：
一般也不用写入，要替换的话，就是另外的方法了。
nodeValue
Text 节点或Comment节点的文本内容，可读写；
不是所有的节点都有这个属性，只有文本节点和注释节点才有的属性；可读可写；
这是读写文本节点的值；
读取和修改注释节点的值；
试一下其他节点有没有这个属性：
document 没有这个属性的；
nodeType
返回该节点的类型值，只读；
这四个属性里面，这个属性最有用，要知道节点的类型，只能用这个属性；
节点类型和返回值：
元素节点 ---1
属性节点 ---2
文本节点 ---3
注释节点 ---8
document ---9
DocumentFragment --- 11
DOM文档里，只有这几种节点的类型，也只能用 nodeType 来识别这些类型：
试下 document :
还用THML为例：
<div>
这是一段文本
<!-- this is comment -->
<strong></strong>
<span></span>
</div>
JS里取出 div:
var div = document.getElementsByTagName("div")[0];
看控制台：
分别返回了 文本节点、注释节点和元素节点的值；
示例：
写一个函数，在不用 children 的情况下，返回当前元素的元素子节点：
HTMl还是上面的为例：
<div>
这是一段文本
<!-- this is comment -->
<strong></strong>
<span></span>
</div>
封装函数：为了输出更像数组，新建个对象，特意加上 push 和 splice 方法，让 return 出类数组；
不熟悉类数组的，可以移步：类数组 https://blog.51cto.com/ahuiok/5824363
var div = document.getElementsByTagName("div")[0];
function retElementChild(node) {
var temp = { // 为了更像类数组
length: 0,
push: Array.prototype.push,
splice:Array.prototype.splice
},
child = node.childNodes,
len = node.childNodes.length;
for (var i = 0; i < len; i++) {
if (child[i].nodeType === 1) {
temp.push(child[i]);
}
}
return temp;
}
console.log(retElementChild(div));
控制台输出：
attributes
Element 节点的属性集合; 也可以读写 属性节点的值；
属性节点指的是当前元素节点上的属性：
<div id="only" class="main"></div>
JS获取到这个 div：
var div = document.getElementsByTagName("div")[0];
控制台输出当前 div 的属性节点集合：
通过 attributes 属性可以看到返回的包括 id 和 class 在内的类数组；
通过 attributes[0] 和 attributes[1] 来分别获取 id 和 class;
通过 attributes[1].nodeType 来展示属性节点的类型。
也可以分别取得 id 和 class 的值：
还可以通过 attributes 直接修改 属性节点的值：
虽然这样可以读写 div 的属性节点的值，但一般我们不这样用；
使用 div.getAttribute 和 div.setAttribute 这两个方法更科学；
节点的一个方法
Node.hasChildNodes()
每个节点都还有一个方法，这个方法是判断当前节点有没有子节点，返回值就是布尔值。
注意：这是判断有没有子节点（所有类型的子节点），不仅仅是元素节点。
HTML：
<div>
这是一段文本
<!-- this is comment -->
<strong></strong>
<span></span>
</div>
JS取得div：
var div = document.getElementsByTagName("div")[0];
看控制台：
很显然这个 div 是有子节点的，还不止一个；
看下 div 的子节点，还有没有子节点：
分别使用 childNodes 和 children 来获得 div 的子节点。