DOM节点类型-Element类型

什么是Element类型

Element 类型用于表现 XML或HTML元素，提供了对元素标签名、子节点及特性的访问。

Element 节点特征

• nodeType 的值为 1；
• nodeName 的值为元素的标签名；
• nodeValue 的值为 null；
• parentNode 可能是 Document 或 Element；
• 其子节点可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或 EntityReference。

要访问元素的标签名，可以使用 nodeName 属性，也可以使用 tagName 属性；这两个属性会返回相同的值。

HTML元素

HTMLElement类型直接继承自Element并添加了一些属性。

• id，元素在文档中的唯一标识符。
• title，有关元素的附加说明信息，一般通过工具提示条显示出来。
• lang，元素内容的语言代码，很少使用。
• dir，语言的方向，值为"ltr"（left-to-right，从左至右）或"rtl"（right-to-left，从右至左） ， 也很少使用。
• className，与元素的class特性对应，即为元素指定的CSS类。没有将这个属性命名为class， 是因为 class 是 ECMAScript的保留字.

例如：

 <div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div> 

元素中指定的所有信息，都可以通过下列 JavaScript代码取得：

var div = document.getElementById("myDiv"); 
alert(div.id);          //"myDiv"" 
alert(div.className);   //"bd" 
alert(div.title);         //"Body text" 
alert(div.lang);         //"en" alert(div.dir);         //"ltr" 

当然，像下面这样通过为每个属性赋予新的值，也可以修改对应的每个特性：

div.id = omeOtherId"; 
div.className = "ft"; 
div.title = "Some other text"; 
div.lang = "fr"; 
div.dir ="rtl"; 

取得特性

getAttribute()

传递给 getAttribute()的特性名与实际的特性名相同。

通过 getAttribute()方法也可以取得自定义特性（即标准 HTML 语言中没有的特性）的值。

特性的名称是不区分大小写的，即"ID"和"id"代表的都是同一个特性。

根据 HTML5规范，自定义特性应该加上 data-前缀以便验证。

任何元素的所有特性，也都可以通过 DOM元素本身的属性来访问

有两类特殊的特性，它们虽然有对应的属性名，但属性的值与通过 getAttribute()返回的值并不相同。第一类特性就是 style，第二类与众不同的特性是 onclick 这样的事件处理程序。
在通过 JavaScript 以编程方式操作 DOM时，开发人员经常不使用 getAttribute()，而是只使用对象的属性。只有在取得自定义特性值的情况下，才会使用 getAttribute()方法。

设置特性

setAttribute()
这个方法接受两个参数：要设置的特性名和 值。如果特性已经存在，setAttribute()会以指定的值替换现有的值；如果特性不存在，setAttribute() 则创建该属性并设置相应的值。

通过 setAttribute()方法既可以操作 HTML 特性也可以操作自定义特性。通过这个方法设置的 特性名会被统一转换为小写形式，即"ID"终会变成"id"。

因为所有特性都是属性，所以直接给属性赋值可以设置特性的值。

removeAttribute()
这个方法用于彻底删除元素的特性。调用这个方 法不仅会清除特性的值，而且也会从元素中完全删除特性，

attributes 属性

Element 类型是使用 attributes 属性的唯一一个 DOM节点类型。attributes 属性中包含一个 NamedNodeMap，与 NodeList 类似，也是一个“动态”的集合。NamedNodeMap 对象拥有下列方法：

• getNamedItem(name)：返回 nodeName 属性等于 name 的节点；
• removeNamedItem(name)：从列表中移除 nodeName 属性等于 name 的节点；
• setNamedItem(node)：向列表中添加节点，以节点的 nodeName 属性为索引；
• item(pos)：返回位于数字 pos 位置处的节点。

创建元素

使用 document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。

例如：
var div = document.createElement(“div”);

要把新元素添加到文档树，可以使用 appendChild()、insertBefore()或 replaceChild()方法。

元素的子节点

元素的 childNodes 属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。
在通过元素调用 getElementsByTagName()这个方法时，除了搜索起点是当前元素之外，其他方面都跟通过 document 调用这个方法相同，因此结果只会返回当前元素的后代。
例如：
var ul = document.getElementById(“myList”);
var items = ul.getElementsByTagName(“li”);