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
(0)

相关推荐

  • JavaScript DOM初学笔记

    JavaScript DOM初学笔记

  • DOM - 元素节点属性

      元素节点属性  childNodes和firstChild和lastChild 1.childNodes  //获取当前元素节点的所有的子节点 举个小例子: 运行结果返回了一个节点列表: 节点列表 ...

  • DOM - 创建带文本的元素节点

      元素节点操作的方法  DOM不单单可以查找节点,也可以创建节点.复制节点.插入节点.删除节点和替换节点 我们分别来看一下: 1.write  //我们常用的document.write(); 例如 ...

  • (25条消息) Rust: 属性(attribute)的含义及文档大全

    Rust中满地都是属性,对于这些,我们是需要有所了解,否则会感觉 到晕: #[lang="copy"] :表示Rust语言本身使用 #[lang ="drop" ...

  • 谈谈C 新标准带来的属性(Attribute)

    从C++11开始,标准引入了一个新概念"属性(attribute)",本文将简单介绍一下目前在C++标准中已经添加的各个属性以及常用属性的具体应用.  一  属性(Attribut ...

  • DOM - 插入节点和三个Child方法

      插入节点  insertBefor(); 插入 格式:父节点.insertBefor( 插入节点,旧节点 ) 功能:将插入的节点插入到旧节点之前 举个小例子: 创建一个strong节点,将这个节点 ...

  • JavaScript封装函数:获取下一个/上一个兄弟元素节点

    要求: 获得下一个/上一个兄弟元素节点,不包括文本节点等 解决IE兼容性问题 代码实现: 获得下一个兄弟元素节点: function getNextElement(element) { var el ...

  • HTML DOM 元素对象大全

    整理一分HTML DOM 元素对象大全,也叫javascript元素对象大全以备常用: Anchor 对象Anchor 对象表示HTML 超链接 Area 对象Area 对象代表图像映射的一个区域(图 ...

  • HTML DOM 元素对象在实际中的应用

    在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :文档本身就是一个文档对象所有 HTML 元素都是元素节点所有 HTML 属性都是属性节点插入到 HTM ...

  • HTML DOM 元素对象

    HTML DOM 节点在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :文档本身就是一个文档对象所有 HTML 元素都是元素节点所有 HTML 属性都是 ...