Element类型用于表现XML或HTML元素,提供了对元素标签名、子节点及特性的访问。Element节点具有以下特征:
- nodeType的值为1;
- nodeName的值为元素的标签名;
- nodeValue的值为null;
- parentNode可能是Document或Element
- 其子节点可能是Element、Text、Comment、ProcessingInstruction、CDTASection或EntityReference。
要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性。这两个属性返回的值除了大小写之外应该是一样的,所以使用的时候最好将其转换为小写。
<div id="myDiv"></div>
<script type="text/javascript">
var myDiv = document.getElementById('myDiv');
alert(myDiv.tagName); // DIV
alert(myDiv.nodeName); // DIV
alert(myDiv.tagName === myDiv.nodeName); // true
alert(myDiv.tagName.toLowerCase() === myDiv.nodeName.toLowerCase()); // true
</script>
取得特性
操作特性的DOM方法主要有三个,分别是getAttribute()、setAttribute()和removeAttribute()。这三个方法可以针对任何特性使用,包括哪些以HTMLElement类型属性的形式定义的特性。如果给定名称的特性不存在,getAttribute()返回null。当获取的是style特性时,返回的是css文本字符串,而如果通过属性来访问则会返回一个对象。
var div = document.getElementById('myDiv');
alert(div.getAttribute('id')); // myDiv
alert(div.getAttribute('class')); // null
alert(div.getAttribute('title')); // null
alert(div.getAttribute('lang')); // null
alert(div.getAttribute('dir')); // null
alert(div.getAttribute('style')); // background:yellow;width:100;height:100px
alert(typeof div.getAttribute('style')); // string
alert(typeof div.style); // object
设置特性
设置特性的方法为setAttribute(),这个方法接收两个参数:要设置的特姓名和值。如果该特性已经存在,setAttribute()会以指定的值替换现有的值;如果特性不存在,setAttribute()则创建该属性并设置相应的值。但是由于浏览器的兼容问题,不建议使用此方法,推荐使用属性设置特性。
div.setAttribute('id', 'someOtherId');
div.setAttribute('class', 'ft');
div.setAttribute('title', 'Some other text');
div.setAttribute('lang', 'fr');
div.setAttribute('dir', 'rtl');
删除特性
removeAttribute()方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值,而且也会从元素中完全删除特性。
div.removeAttribute('class');
创建元素
使用document.createElement()方法可以创建新元素。这个方法值接收一个参数,既要创建元素的标签名。这个标签名在HTML文档中不区分大小写,而在XML(包括XHTML)文档中,则是区分大小写的。但是在IE中可以以另一种方式使用createElement()。即为这个方法传入完整的元素标签,也可以包含属性。
// 正常情况
var div = document.createElement('div');
div.id = 'myNewId';
div.className = 'box'; // class为保留字
document.body.appendChild(div);
// IE < 7
var div = document.createElement('<div id="myNewId" class="box"></div >');
document.body.appendChild(div);
元素的子节点
元素的childNodes属性中包含了它的所有子节点,这些子节点有可能是元素、文本节点、注释或处理指令。
var container = document.getElementById('container');
console.log(container.childNodes.length); // 9
console.log(container.childNodes[0]); // Text对象,实际上是空白
console.log(container.childNodes[1]); // <li>1</li>
由于无法childNodes里面的节点可以是元素、文本节点等类型,所以需要处理元素节点时检查其nodeType值是否为1。
元素遍历
childeElementCount:返回子元素(不包括文本节点和注释)的个数。
firstElementChild:指向第一个子元素;firstChild的元素版。
lastElementChild:指向最后一个子元素;lastChild的元素版。
previousElementSibling:指向前一个同辈元素;previousSibling的元素版。
nextElementSibling:指向后一个同辈元素;nextSibling的元素版。
利用这些元素就不用担心空白文本节点,从而可以更方便地查找DOM元素。
<ul id="container">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
var i,
len,
element = document.getElementById('container'),
child = element.firstElementChild;
while(child != element.lastElementChild) {
console.log(child.innerText);
child = child.nextElementSibling;
}
</script>