js——DOM的Element类型（四）

DOM的Element类型

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

特征：

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

获取标签名tagName 和nodeName：

var d=document.getElementById('myDiv');
        alert(d.tagName); // DIV,HTML中的标签名所有为大写，XML中标签名与源码一致
        alert(d.nodeName==d.tagName); // true

与标签名比较是最好转化一致的大小写

if(element.tagName.toLowerCase()=="div")

1.HTML元素

每一个HTML元素都有特性：

• id:元素在文档中的惟一标识

• title:有关元素的附加信息

  <p title="p标签">www</p>

## DOM的Element类型

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

特征：

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

获取标签名tagName 和nodeName：

var d=document.getElementById('myDiv');
        alert(d.tagName); // DIV,HTML中的标签名所有为大写，XML中标签名与源码一致
        alert(d.nodeName==d.tagName); // true

与标签名比较是最好转化一致的大小写

if(element.tagName.toLowerCase()=="div")

1.HTML元素

每一个HTML元素都有特性：

• id:元素在文档中的惟一标识

• title:有关元素的附加信息

  <p title="p标签">www</p>

• lang:元素内容语言代码

• dir:语言方向

• className:与class特性应

  <div class="div1" id="divc">颜色</div>
  ...
  var dc=document.getElementById('divc');
    dc.className="div2";
  
  ...
  .div1{
            color:pink;
        }
  .div2{
            color:yellow;
        }

2.取得特性

getAttribute(),setAttribute(),removeAttribute()这三种方法。能够针对任何特性使用

<div id="myDiv" class="div3"  myarrt="haha">dd</div>
...
    var div=document.getElementById('myDiv');
    alert(div.getAttribute("id"));//myDiv
    alert(div.getAttribute("class"));//div3   这里不要用className
    alert(div.getAttribute("lang"));//null
    //自定义属性
    alert(div.getAttribute("myarrt"));//haha

特性名称不分大小写。

自定义属性可能在一些浏览器上是不存在的。

3.设置特性

setAttribute()接收两个参数：要设置的特性名和值

<div id="changDiv" class="div1">change</div>
...
var div=document.getElementById('changDiv');
        div.setAttribute("class","div2");
        div.setAttribute("title","change");

咱们也能够这样设置值

div.id="some";
div.title="other";

但不能够这样为DOM元素添加自定义属性,该属性不会自动成为元素的特性，可是部分浏览器除外

div.myColor="blue";
alert(div.getAttribute("myColor"));//null

removeAttribute()这个方法用于完全删除属性。

div.removeAttribute("class")

4.attributes属性

• lang:元素内容语言代码

• dir:语言方向

• className:与class特性应

  <div class="div1" id="divc">颜色</div>
  ...
  var dc=document.getElementById('divc');
    dc.className="div2";
  
  ...
  .div1{
            color:pink;
        }
  .div2{
            color:yellow;
        }

2.取得特性

getAttribute(),setAttribute(),removeAttribute()这三种方法。能够针对任何特性使用

<div id="myDiv" class="div3"  myarrt="haha">dd</div>
...
    var div=document.getElementById('myDiv');
    alert(div.getAttribute("id"));//myDiv
    alert(div.getAttribute("class"));//div3   这里不要用className
    alert(div.getAttribute("lang"));//null
    //自定义属性
    alert(div.getAttribute("myarrt"));//haha

特性名称不分大小写。

自定义属性可能在一些浏览器上是不存在的。

3.设置特性

setAttribute()接收两个参数：要设置的特性名和值

<div id="changDiv" class="div1">change</div>
...
var div=document.getElementById('changDiv');
        div.setAttribute("class","div2");
        div.setAttribute("title","change");

咱们也能够这样设置值

div.id="some";
div.title="other";

但不能够这样为DOM元素添加自定义属性,该属性不会自动成为元素的特性，可是部分浏览器除外

div.myColor="blue";
alert(div.getAttribute("myColor"));//null

removeAttribute()这个方法用于完全删除属性。

div.removeAttribute("class")

4.attributes属性

5.建立元素

建立元素的方法是：

var newele=document.createElement("标签名")；

另外一种建立方式能够将元素的属性添加进去

var newele=document.createElement("<div id=\"newId\"></div>")；

将新元素添加到文档数中：

document.appendChhild(newele);

6.元素子节点

元素的childNodes属性中包含了它全部的子节点，这些节点多是元素，文本节点，注释或者处理指令。可是不一样浏览器有不一样。

<ul id="aul">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

在IE的某些比较早的版本中，会认为上面的ul节点有3个li子节点，而其余浏览器认为有7个子节点，它们认为ul里面包括了3个li元素节点和4个文本节点

若是

<ul id="aul"><li>item 1</li><li>item 2</li><li>item 3</li></ul>

这样全部的浏览器都返回的时候同样的长度。

由上可得：咱们在遍历元素子节点时，为了能准确的对元素节点操做，咱们在执行某项操做前须要检测一会儿节点的类型。

var ul=document.getElementById('aul');
        alert(ul.childNodes.length);
        for(var i=0;i<ul.childNodes.length;i++){
            if(ul.childNodes[i].nodeType==1)
            {
                alert(i+":"+ul.childNodes[i].nodeName);
                //1:li
                //3:li
                //5:li
            }
        }