DOM Element节点类型详解
2015-09-21 09:21
471 查看
上文中我们讲解了 DOM 中最重要的节点类型之一的
其子节点可能是
要访问元素的标签名,可以用
注意,传递给
通过 getAttribute() 方法也可以取得自定义特性。
在实际开发中,开发人员不常用
与
而
一般来说,由于前面介绍的 attributes 方法不够方便,因此开发人员更多的会使用
不过如果想要遍历元素的特性,attributes 属性倒是可以派上用场:
以上代码,如果是 IE 来解析,那么
如果像下面这样将元素之间的空白符删除,那么所有浏览器都会返回相同数目的子节点:
Document节点类型,本文我们继续深入,谈谈另一个重要的节点类型
Element。
1、概况
Element 类型用于表现 HTML 或 XML 元素,提供了对元素标签名、子节点及特性的访问。 Element 节点具有以下特征:nodeType的值为 1
nodeName的值为元素的标签名
nodeValue的值为null
parentNode可能是
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>
相关文章推荐
- 你能答对吗??
- ubuntu无法识别android手机,出现????????
- infa资料库的使用
- 实现传入两个字符串类型的时间的相减
- 如何将文本内容奇数行与偶数行调换?
- 如何将文本内容奇数行与偶数行调换?
- 高光谱了解
- PHP生成N个不重复的随机数
- File类
- 关于证书
- 一款开源且功能强大的C#甘特图控件.NET Winforms Gantt Chart Control
- Oracle Lsnrctl - 关于oracle监听器的命令和解释
- Xcode7使用的时候模拟器会黑屏
- SQL对应C#数据类型
- php操作json
- iOS 技术分享5
- getuid和geteuid的区别
- Socket编程
- Linux实现时钟中断的全过程
- SSE 灰度图 Rountine