BOM编程-ELEMENT

Element类型用于表现html和xml中的元素，也就是说html中的标签都是Element类型；Element类型提供了对元素标签名，子节点，属性的访问。

• nodeType==1
• tagName==nodeName

html元素

• id
• title
• lang
• dir
• className 指定的元素css类
  属性操作
• getAttribute()
• setAttribute()
• removeAttribute()

获得属性getAttribute()

• 注意这些操作都是针对Element类型的元素

<div id="myDiv" class="bd" title="Body Text" lang="en" dir="ltr"></div>
    <script type="text/javascript">
    var dd = document.getElementById('myDiv');
    document.write(dd.getAttribute('id'));
    document.write(dd.getAttribute('class'));
    document.write(dd.getAttribute('title'));
    document.write(dd.getAttribute('lang'));
    document.write(dd.getAttribute('dir'));
    </script>

当然也可以直接通过html属性直接获得：

    document.write(dd.id);
    document.write(dd.className);
    document.write(dd.title);
    document.write(dd.lang);
    document.write(dd.dir);

设置属性

div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");
div.setAttribute("title", "Some other text");
div.setAttribute("lang","fr");
div.setAttribute("dir", "rtl");

attributes

该属性与nodeList类似也是一个动态的集合。多用于遍历

function outputAttributes(element){
var pairs = new Array(),
attrName,
attrValue,
i,
len;//该变量用来保存attributes长度的快照避免每次都去获取
for (i=0, len=element.attributes.length; i < len; i++){
attrName = element.attributes[i].nodeName;
attrValue = element.attributes[i].nodeValue;
pairs.push(attrName + "=\"" + attrValue + "\"");
}
return pairs.join(" ");
}

创建元素

document.createElement(“标签名”)
前面讲NODE类型的时候没有将如何创建节点，节点的其他操作参考node

    var div = document.createElement('div');
    div.id = "myNewDiv";
    div.className = "box";
    document.body.appendChild(div);

元素的子节点(敲黑板)

<ul id="mylist">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<hr/>
<span>write by document</span>
<div id="myDiv" class="bd" title="Body Text" lang="en" dir="ltr"></div>
    <script type="text/javascript">
    var ulNode = document.getElementById('mylist');
    document.write(ulNode.childNodes.length);
    </script>

</body>

这里获取ur的子节点的个数为7
三个四个空白（Text类型）和3个li元素

如果要获取li元素，常用方法是：

for (var i=0, len=element.childNodes.length; i < len; i++){
if (element.childNodes[i].nodeType == 1){
//执行某些操作
}
}