DOM - 元素节点属性及Attribute

元素节点属性

我们继续来看元素节点属性

ownerDocument 属性

功能：返回该节点的文档对象根节点。相当于document

一般就直接用document了，这个用的很少

我们来了解证实一下：

运行结果如下：

parentNode、previousSibling、nextSibling 属性

parentNode  //属性返回该节点的父节点

previousSibling  //属性返回该节点的前一个同级节点

nextSibling  //属性返回该节点的最后一个同级节点

我们来试一下：

1.parentNode返回父节点：

运行结果如下：

父级为body没问题

2.previousSibling返回前一个同级节点：

运行结果如下：

运行结果为#text这个就有点问题了，原因就是上节讲的空白节点

【解决方法：】

我们来调用一下上节课封装的删除空白节点的函数：

(1)我们先找到我们之前封装函数的那个文件

在我们学习的DOM – 封装函数那一节，我们打开它

(2)再找到我们上节的删除空白节点的两段函数语句

(3)将其复制到之前封装函数的文件，放在一起方便使用调用

(4)直接调用在我们现在写的html文件中

写路径时：./为当前目录  ../为上一级目录  /为根目录

(5)引入封装函数后，我们来调用删除父节点的空白节点

此时运行结果如下：

div的父节点为span，这时显示正确

3.nextSibling 返回最后一个同级节点

还是用同样的方式，来调用删除父元素的空白节点，然后再输出

运行结果如下：

div的下一节点为p标签，显示正确

attribute属性

功能：返回该节点的属性节点集合

我们来写一下：

运行结果如下：

这里返回的object NameNodeMap就是一个集合

attributes.length  返回属性节点的个数

运行结果：

集合有两个特点：

1.不重复   2.无序

数组是可以存在两个相同的数，而集合不行

无序就代表着我们无法通过下标去访问

那么具体的每个属性节点该怎么去访问呢？

有以下两种方式：

1.getNamedItem(“id”);

2.数组方式[“id”]

运行结果如下：

访问到属性节点以后怎么去访问它的属性和值呢？

我们可以通过之前学的：

nodeName  属性名

nodeType  属性类型

nodeValue  属性值

运行结果如下：

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web