javascript之DOM(三Element类型)

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

要访问标签名可以使用nodeName和tagName属性，其返回值是一样的。

<p id="pd" name="test">no.1</p>
    
    <script type="text/javascript">
      
      var p=document.getElementById("pd");
      alert(p.nodeName==p.tagName);//true
    </script>

元素标签名输出为大写P。

1、HTML元素

所有HTML元素都是有HTMLElement类型表示。HTMLElement为Element类型添加了一些属性。id，title，lang，dir（语言的方向，值为ltr或rtl,”left-to-right“或”right-to-left”），classname(与元素class属性对应)

<div id="myDiv" class="pd" title="example" dir="ltr" lang="en">
    
    <script type="text/javascript">
      var d=document.getElementById("myDiv");
      alert(d.id);//myDiv
      alert(d.className);//pd
      alert(d.title);//example
      alert(d.dir);//ltr
      alert(d.lang);//en
    </script>

2、编辑属性

操作特性的DOM方法有3个getAttribute(),setAttribute()和removeAttribute()，这3个方法可以对任何属性使用，包括自定义的属性。

传递个getAttribute()的属性名和实际的属性名相同。element.getAttribute(“class”)；

setAttribute()接收两个参数，属性名和属性值，如果属性已存在则修改当前的属性值，不存在则创建一个再赋值。element.setAttribute(“class”,”ft”);

removeAttribute(),用于彻底删除元素的特性。

3、attributes属性

Element类型是使用attributes属性的唯一DOM节点类型。attributes属性包含一个NamedNodeMap，与NodeList类似，为一个“动态”的集合。元素的每一个特性都由Attr节点表示，每个节点都保存在NamedNodeMap类型中。

NamedNodeMap对象有以下方法：

getNamedItem(name)//返回NodeName属性等于name的节点

removeNamedItem(name)//移除NodeName属性等于name的节点

item(pos)

4、创建元素

document.createElement();

var div=document.createElement("div");
div.id="mydiv";
div.class="myClass";

要想将元素插入到特定位置，可以使用appendChild(),insertBefore(),replaceChild()。

5、元素的子节点

元素有任意数目的节点和子节点。

元素的childNodes中包含了其所有节点，其中可以有元素，文本节点，注释，或处理指令。

<ul id=”myList”>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>

在IE中ul元素下有3个节点，都为li

在其他浏览器中则有7个节点，3个<li>元素和4个文本节点。