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;
      }

1566354606981 1566354621421

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;
      }

1566354621421

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
            }
        }