什么是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”);