DOM Element类节点

来源：互联网发布：人工智能入门书籍编辑：程序博客网时间：2024/06/08 06:15

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'));             // myDivalert(div.getAttribute('class'));          // nullalert(div.getAttribute('title'));          // nullalert(div.getAttribute('lang'));           // nullalert(div.getAttribute('dir'));            // nullalert(div.getAttribute('style'));          // background:yellow;width:100;height:100pxalert(typeof div.getAttribute('style'));   // stringalert(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 < 7var div = document.createElement('<div id="myNewId" class="box"></div >');document.body.appendChild(div);

元素的子节点

元素的childNodes属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。

var container = document.getElementById('container');console.log(container.childNodes.length);    // 9console.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>

0 0