达文西，我要的是属性节点，不是属性！

BlackHole1 发布于2019-08-23 16:28 / 1933人阅读

摘要：节点的类型有很多，常用的主要是三种元素节点属性节点和文本节点。结果如下和，前者是获取某个属性值，后者才是获取属性节点。

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可以理解，但还有一些什么值都没有的文本节点，这是导致我们在计算子节点数量时经常有偏差的原因。

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

helloI am Jason.
2019-11-11

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

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

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

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

云服务器 GPU云服务器达文西 html节点属性 html属性节点 asp设置节点属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103057.html

达文西，用JS写个兼容IE8浏览器的类选择器

摘要：基于某些考虑，有时我们项目中会尽量使用原生，这种情况下连最简单的类选择器可能都要进行兼容性处理。越是新的特性，浏览器的兼容相对就越差。但原生的是支持多个类名选择的，既然要写一个兼容的自定义类选择器代替原生的，那么这个功能说什么也要上啊。基于某些考虑，有时我们项目中会尽量使用原生js，这种情况下连最简单的类选择器可能都要进行兼容性处理。getElementsByClassName是后来...

Jaden 2019-08-26 13:40 评论0 收藏0
Javascript学习总结 - JS基础系列二

摘要：假如对应的为一组对象，则返回该组对象中的第一个。方法返回带有指定标签名的节点对象的集合。语法说明是标签的名称，如等标签名。是一个人的身份证号码，是唯一的。注意把指定的属性设置为指定的值。表示文档所在窗口的当前宽度。简述本系列将持续更新Javascript基础部分的知识，谁都想掌握高端大气的技术，但是我觉得没有一个扎实的基础，我认为一切高阶技术对我来讲都是过眼云烟，要成为一名及格的前...

pcChao 2019-08-19 17:08 评论0 收藏0
使用自定义的鼠标图标 --- cursor url

摘要：前段时间在项目中遇到过自定义鼠标图标这一需求。图标的大小鼠标图标的尺寸推荐，否则可能出现大小不一致问题。附上属性值值描述需使用的自定义光标的。前段时间在项目中遇到过自定义鼠标图标这一需求。由于一般我们用的鼠标样式大都是固定的几种，而自定义鼠标图标不是很常用到，所以对这一小知识点进行总结，以防忘记。自定义鼠标图标自定义鼠标图标即 css cursor url的使用。 cs...

Yu_Huang 2019-08-30 13:59 评论0 收藏0