DOM Element节点类型详解
上文中我们讲解了 DOM 中最重要的节点类型之一的 Document
节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element
。
1、概况
Element 类型用于表现 HTML 或 XML 元素,提供了对元素标签名、子节点及特性的访问。 Element 节点具有以下特征:
nodeType
的值为 1nodeName
的值为元素的标签名nodeValue
的值为nullparentNode
可能是Document
或者Element
- 其子节点可能是
Element
、Text
、Comment
、ProcessingInstruction
、CDATASection
或者EntityReference
要访问元素的标签名,可以用 nodeName
属性,也可以用 tagName
属性;这两个属性会返回相同的值。在 HTML 中,标签名始终都以全部大写表示,而在 XML(有时候也包括 XHTML)中,标签名始终和源代码中保持一致。假如你不确定自己的脚本将会在 HTML 还是 XML 文档中执行,最好还是在比较之前将标签名转换成相同的大小写形式:
var myDiv = document.querySelector('div');
console.log(myDiv.tagName); // DIV
console.log(myDiv.nodeName); // DIV
if (myDiv.tagName.toLowerCase() === 'div') { // 这样最好,适用于任何文档
// ...
}
2、HTML 元素
所有 HTML 元素都由 HTMLElement 类型表示,不是直接通过这个类型,也是通过它的子类型来表示。 HTMLElement 类型直接继承自 Element 并添加了一些属性。每个 HTML 元素中都存在下列标准属性:
id
元素在文档中的唯一标识符title
有关元素的附加说明信息,一般通过工具提示条显示出来lang
元素内容的语言代码,很少使用dir
语言的方向,值为ltr
或者rtl
,也很少使用className
与元素的class
特性对应
3、特性的获取和设置
每个元素都有一个或多个特性,这些特性的用途是给出相应元素或其内容的附加信息。操作特性的 DOM 方法主要有三个,分别是 getAttribute()
setAttribute()
removeAttribute()
。
注意,传递给 getAttribute()
的特性名与实际的特性名相同,因此要想得到 class
特性值,应该传入 class
而不是 className
,后者只有在通过对象属性(property)访问特性时才用。如果给定名称的特性不存在,getAttribute()
返回 null。
<div id='myDiv' title='hanzichi'> </div>
<script>
var myDiv = document.querySelector('div');
// attribute
console.log(myDiv.getAttribute('id')); // myDiv
console.log(myDiv.getAttribute('class')); // null
console.log(myDiv.getAttribute('title')); // hanzichi
console.log(myDiv.getAttribute('lang')); // null
console.log(myDiv.getAttribute('dir')); // null
// property
console.log(myDiv.id); // myDiv
console.log(myDiv.className); // ''
console.log(myDiv.title); // hanzichi
console.log(myDiv.lang); // ''
console.log(myDiv.dir); // ''
</script>
通过 getAttribute() 方法也可以取得自定义特性。
在实际开发中,开发人员不常用 getAttribute()
,而是只使用对象的属性(property)。只有在取得自定义特性值的情况下,才使用 getAttribute()
方法。为什么呢?比如说 style
,在通过 getAttribute()
访问时,返回的 style
特性值包含的是 css 文本,而通过属性来访问会返回一个对象。再比如 onclick
这样的事件处理程序,当在元素上使用时,onclick
特性包含的是 Javascript 代码,如果通过 getAttribute()
访问,将会返回相应代码的字符串,而在访问 onclick
属性时,则会返回 Javascript 函数。
与 getAttribute()
对应的是 setAttribute()
,这个方法接受两个参数:要设置的特性名和值。如果特性已经存在,setAttribute()
会以指定的值替换现有的值;如果特性不存在,setAttribute()
则创建该属性并设置相应的值。
而 removeAttitude()
方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值,而且也会从元素中完全删除特性。
div.setAttribute('id', 'someOtherId');
div.setAttribute('title', 'some other text');
div.removeAttribute('class')
4、attributes 属性
Element
类型是使用 attributes
属性的唯一一个 DOM 节点类型。 attributes
属性中包含一个 NamedNodeMap
,与 NodeList 类似,也是一个“动态”的集合。元素的每一个特性都由一个 Attr 节点表示,每个节点都保存在 NamedNodeMap
对象中。NamedNodeMap
对象拥有下列方法:
getNamedItem(name)
: 返回nodeName
属性等于name
的节点removeNamedItem(name)
: 从列表移除nodeName
属性等于name
的节点setNamedItem(node)
: 向列表中添加节点,以节点的nodeName
属性为索引item(pos)
: 返回位于数字pos
位置处的节点
attributes
属性中包含一系列的节点,每个节点的 nodeName
就是特性的名称,而节点的 nodeValue
就是特性的值。
// 取得元素的特性值
var id = element.attributes.getNamedItem('id').nodeValue;
var id = element.attributes['id'].nodeValue;
// getAttribute() 也能实现一样功能
var id = element.getAttribute('id');
// 与removeAttribute() 方法相比,唯一的区别是能返回表示被删除特性的节点
var oldAttr = element.attributes.removeNamedItem('id');
// 添加新特性
// 需要传入一个特性节点
element.attributes.setNamedItem(newAttr);
一般来说,由于前面介绍的 attributes 方法不够方便,因此开发人员更多的会使用 getAttribute()
removeAttribute()
以及 setAttribute()
方法。
不过如果想要遍历元素的特性,attributes 属性倒是可以派上用场:
<div id='myDiv' title='hanzichi' class='fish'> </div>
<script>
var myDiv = document.querySelector('div');
for (var i = 0, len = myDiv.attributes.length; i < len; i++) {
var attrName = myDiv.attributes[i].nodeName
, attrValue = myDiv.attributes[i].nodeValue;
console.log(attrName, attrValue);
}
// id myDiv
// title hanzichi
// class fish
</script>
5、元素的子节点
<ul id='myUl'>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>
<script>
var myUl = document.getElementById('myUl');
console.log(myUl.childNodes.length); // IE: 3 其他浏览器: 7
</script>
以上代码,如果是 IE 来解析,那么 <ul>
元素会有 3 个子节点,分别是 3 个 <li>
元素;而如果是其他浏览器解析,则会有 7 个子节点,包括 3 个 <li>
元素 和 4 个文本节点。
如果像下面这样将元素之间的空白符删除,那么所有浏览器都会返回相同数目的子节点:
<ul id='myUl'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul>
<script>
var myUl = document.getElementById('myUl');
console.log(myUl.childNodes.length); // 所有浏览器: 3
</script>
DOM Element节点类型详解的更多相关文章
- DOM Document节点类型详解
在前面 DOM 概况 中,我们知道了 DOM 总共有 12 个节点类型,今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型. 1.概况 Javascript 通过 Docu ...
- 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记
来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...
- Dom探索之基础详解
认识DOM DOM级别 注::DOM 0级标准实际并不存在,只是历史坐标系的一个参照点而已,具体的说,它指IE4.0和Netscape Navigator4.0最初支持的DHTML. 节点类型 注:1 ...
- javascript 节点属性详解
javascript 节点属性详解 根据 DOM,html 文档中的每个成分都是一个节点 DOM 是这样规定的:整个文档是一个文档节点每个 html 标签是一个元素节点包含在于 html 元素中的文本 ...
- C++11 并发指南六( <atomic> 类型详解二 std::atomic )
C++11 并发指南六(atomic 类型详解一 atomic_flag 介绍) 一文介绍了 C++11 中最简单的原子类型 std::atomic_flag,但是 std::atomic_flag ...
- js变量类型详解
<html> <title>js变量类型详解</title> <meta http-equiv="content-type" conten ...
- js课程 1-3 Javascript变量类型详解
js课程 1-3 Javascript变量类型详解 一.总结 一句话总结:js对象点(属性方法),json对象冒号(属性方法).属性和方法区别只有一个括号. 1.json对象中的函数的使用? 函数名 ...
- C#进阶系列——WebApi 接口返回值不困惑:返回值类型详解
前言:已经有一个月没写点什么了,感觉心里空落落的.今天再来篇干货,想要学习Webapi的园友们速速动起来,跟着博主一起来学习吧.之前分享过一篇 C#进阶系列——WebApi接口传参不再困惑:传参详解 ...
- C++11 并发指南六(atomic 类型详解四 C 风格原子操作介绍)
前面三篇文章<C++11 并发指南六(atomic 类型详解一 atomic_flag 介绍)>.<C++11 并发指南六( <atomic> 类型详解二 std::at ...
随机推荐
- JavaScript Patterns 5.8 Chaining Pattern
Chaining Pattern - Call methods on an object one after the other without assigning the return values ...
- MVC6的内置ActionResult类型
BadRequestObjectResult,BadRequestResult http 400 bad request ChallengeResult ContentResult Creat ...
- web会话管理
http协议是无状态的协议,也就是说服务器不知道这个http连接是那个浏览器发过来的. 要标识会话的唯一,有两种方法:1 Cookie 2 会话级cookie(开关浏览器算一次会话) 和 持久化的c ...
- Oracle表字段的增加、删除、修改和重命名
本文主要是关于Oracle数据库表中字段的增加.删除.修改和重命名的操作. 增加字段语法:alter table tablename add (column datatype [default val ...
- windows 远程桌面研究
最近因为一个监控相关的项目,深入研究了一下 windows 的 远程桌面的相关知识. 1. 如何让关闭了远程桌面连接的用户,对应的 session 立即退出 windows server. 大家使用 ...
- SQL中JOIN 的用法
关于sql语句中的连接(join)关键字,是较为常用而又不太容易理解的关键字,下面这个例子给出了一个简单的解释 --建表table1,table2:create table table1(id int ...
- iOS tabbar 自定义小红点 消息显示,定制边框、颜色、高宽
一般我们需要显示消息数,会利用到系统提供的api UIApplication.sharedApplication().applicationIconBadgeNumber = 10 但如果我们不想显示 ...
- net-snmp添加自定义MIB
我所知道的添加自定义MIB的方法有三种 1.静态加载,将生成的.c和.h文件加入到相应的位置,重新编译snmp库,优点是不需要修改配置文件,缺点是每次添加都得重新编译: 2.动态加载,将生成的.c ...
- 报表开发工具中开放的部分图表js接口列表
1.. 描述 报表开发工具FineReport 8.0版本中开放了部分图表js接口,在具体应用的过程中很多人都不知道这些接口到底有什么作用,该怎么应用,所以根据我自己的应用在下面归纳了这些新开放js接 ...
- Floyd算法解决多源最短路径问题
Floyd-Warshall算法是解决任意两点间的最短路径的一种算法,可以正确处理有向图或负权(但不可存在负权回路)的最短路径问题,同时也被用于计算有向图的传递闭包. Floyd-Warshall算法 ...