DOM节点层次（Element类型 Text类型）

3.Element类型

除了Document类型之外，最常用的就是Element类型了(注意结合DOM节点树来分析)
Element类型具有一下特征：

• nodeType的值为1
• nodeName的值为元素的标签名
• nodeValue的值为null
• parentNode的值为Document或Element

---

1.要访问标签名可以用nodeName也可以用tagName属性。

var div=document.getElementById("mtDiv");
alert (div.tagName);//"DIV"
alert (div.tagName==div.nodeNade);//true

判断标签名是一定要转化为小写再判断，这样能兼容HTML和XML

if(element.tagName.toLowerCase()=="div"){
    //某些操作
}

2.html元素的特性操作

每个HTML元素存在以下标准特性：

id
title
lang(少用)
dir(语言方向)
className(与class特性对应）

• getAttribute()取得特性

var div=document.getElementById("myDiv");
alert(div.getAttribute("id");//myDiv

• setAttribute()设置特性

div.setAttribute("id","idName");

• removeAttribute()删除特性

div.removeAttribute("class");

3.创建元素

var div=docuemnt.createElement("div");//创建一个div元素
div.id="myDiv";//为这个div元素添加属性

这时候新元素并未被加入文档树中，要把新元素添加到文档数中，可以使用Node类型中添加节点的方法：

document.body.appendChild(div);

4.元素的子节点

元素的childNodes属性中包含着它所有的子节点，这些子节点可能是元素、文本节点、注释或处理命令。不同的浏览器在看待这些节点存在显著的不同

<ul id="myList">
        <li>Item 1li>
        <li>Item 2li>
        <li>Item 3li>
ul>

IE: ul有3个子节点，那就是3个li元素
其他：ul有7个子节点，3个li元素和4个文本节点（

元素之间的空白符）

所以注意：通过childNodes属性遍历子节点时，不要忘记这一差别。注意检查nodeType属性

<script>
        for(var i=0,len=element.childNodes;iif(element.childNodes[i].nodeName==1){
                //执行某些操作
            }
        }
    script>

如果想通过某个特定的标签名取得子节点或者后代节点那该怎么办呢？？？看下面

var ul=document.getElementById("myList");
var items=ul.getElementByTagName("li");//元素也支持getElementByTagName

---

4.Text类型

文本节点又Text类型表示，包含的是可以照字面解释的纯文本内容。

nodeType的值为3
nodeName的值为”#Text”
nodeValue的值为节点所包含的文本
parentNode的值是一个Element

• nodeValue属性和data属性

通过nodeValue属性或data属性访问Text节点中包含的文本，
nodeValue.length或data.length保存着节点中字符的数目。
在默认情况下，每个可以包含内容的元素最多只有一个文本节点，而且必须确实有内容存在。

//没有内容，故没有文本节点
<div>div>
//有空格，因而有一个文本节点
<div> div>
//有内容，因而有一个文本节点
<div>Hello Worlddiv>

• document.createTextNode()创建文本节点

var element=document.createElement("div");
element.className="message";

var textNode=document.creatTextNode("hello world");
element.appendChild(textNode);//将这个文本节点添加到前面的div元素中

document.body.appendChild(element);//将div元素添加到文档的body元素中。
//这样就可以在浏览器中看到新创建的元素和文本节点了

• 分割文本节点

var element=document.createElement("div");
        element.className="message";

        var textNode=document.createTextNode("hello world");
        element.appendChild(textNode);

        document.body.appendChild(element);

        var newNode=element.firstChild.splitText(5);//5是开始位置
        alert(element.firstChild.nodeValue);//"hello"
        alert(newNode.nodeValue);//" world"
        alert(element.childNodes.length);//2