Javascript(笔记25) - DOM基本操作 - 节点的四个属性

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 的子节点。