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