达文西,我要的是属性节点,不是属性!

js在处理DOM的时候,文档中的内容都会被当成一个个节点,也就是常说的node。节点的类型有很多,常用的主要是三种:元素节点、属性节点和文本节点。元素相当于我们说的标签,属性就是标签中定义的属性,文本就是标签里面的文字。比如下面我们可以通过getElementById来获取元素节点,然后再通过childNodes遍历它的子节点。

hello

I am Jason.

2019-11-11

打印的结果如下,所有的子节点中,节点类型里1是元素节点,3是文本节点,这里没有属性节点。

3,#text,
        hello
        
1,P,null
3,#text,
        
1,P,null
3,#text,
    

那怎么获取属性节点?上网一搜,有的文章说是通过getAttribute,还举例说了不同姿势的获取方式,还能赋值等等。那就试试吧。

var attr = document.getElementsByClassName("name")[0].getAttribute("title");
console.log(typeof attr);
console.log(attr);
console.log(attr.nodeType + "," + attr.nodeName + "," + attr.nodeValue);

打印结果如下,获取到的getAttribute是一个string,不是一个object,当然也没法获取它的节点类型、名称或者值,它只是一个字符串格式的属性值而已。

string
I am Jason
undefined,undefined,undefined

属性节点的正确获取姿势是getAttributeNode。

var nodeAttr = document.getElementsByClassName("name")[0].getAttributeNode("title");
console.log(typeof nodeAttr);
console.log(nodeAttr.nodeType + "," + nodeAttr.nodeName + "," + nodeAttr.nodeValue);

结果如下:

object
2,title,I am Jason

getAttribute和getAttributeNode,前者是获取某个属性值,后者才是获取属性节点。

除此之外,我们还知道,元素节点的类型是1,属性节点的类型是2,文本节点的类型是3,看这123的排序,就知道为什么它们仨是最常用的。

这里面顺便提一下,文本节点经常在我们计算childNodes的时候来捣乱,比如文章一开始的那段遍历childNodes的代码,结果里面有hello可以理解,但还有一些什么值都没有的文本节点,这是导致我们在计算子节点数量时经常有偏差的原因。

这个什么值都没有的文本节点,其实是有内容的,内容就是换行和空格。我们用下面这段代码来对比。

hello

I am Jason.

2019-11-11

输出的结果就是我们正常理解的子节点内容。

3,#text,hello
1,P,null
1,P,null

上面我们说过123代表的是节点类型,那么节点名称呢?如果是元素节点,那么就是标签名称;如果是属性节点,那么就是属性名称;如果是文本节点呢?文本没有什么名称只有值,所以它统一叫#text。

关于节点值呢?元素节点是没有值的,输出null。其他的两类节点都能输出相应的值。

达文西,我要的是属性节点,不是属性!_第1张图片
默认标题_横版二维码_2019.03.23.png

你可能感兴趣的:(达文西,我要的是属性节点,不是属性!)