标签：
Element元素用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问
nodeType:1
nodeName:元素的大写标签名
nodeValue:null
parentNode:Document或Element
子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection、ENtityReference
[注意1]要访问元素的标签名可以使用nodeName，也可以使用tagName属性，这两个属性会返回相同的值
<ul class="list" id="list">
<li class="in">0</li>
<li class="in" id="test">test</li>
<li class="in">2</li>
</ul>
<script>
var oList = document.getElementById(‘list‘);
var oTagTest = oList.nodeName;
var oNodeTest = oList.tagName;
//1 "UL" null <body> #text(在IE8-浏览器下不支持空白文本节点)
console.log(oList.nodeType,oList.nodeName,oList.nodeValue,oList.parentNode,oList.childNodes[0])
console.log(oTagTest,oNodeTest,oTagTest == oNodeTest);//UL UL true
</script>
[注意2]在HTML中，标签名始终以全部大写表示；而在XML(有时候也包括XHTML)中，标签名则始终会与源代码中的保持一致。假设不确定自己的脚本将会在HTML还是在XML文档中执行，最好是在比较之前将标签名转换为相同的大小写形式
if(element.tagName.toLowerCase() == "div"){ //TODO }
所有的HTML元素都由HTMLElement类型表示，不是直接通过这个类型，也是通过它的子类型来表示，HTMLElement类型直接继承自Element并添加了以下5个属性，且这些属性是可读可写的。
id:元素在文档中的唯一标识符
title:有关元素的附加说明信息，一般通过工具提示条显示出来
lang:元素内容的语言代码，很少使用
dir:语言的方向，ltr(left to right)从左到右 或 rtl(right to left)从右到左，也很少使用
className:与元素的class特性对应，即为元素指定的CSS类。
<div class="boxClass" id="boxId" title="boxTitle" lang="en" dir="rtl" >123</div> <script> var oBox = document.getElementById(‘boxId‘); console.log(oBox.className,oBox.id,oBox.title,oBox.lang,oBox.dir)//boxClass boxId boxTitle en rtl //[注意]如果text-align和dir同时设置的话，以text-align设置为值为准 oBox.dir = "ltr"; console.log(oBox.dir);//ltr </script>
【createElement()】
使用document.createElement()方法可以创建新元素。这个方法接受一个参数，即要创建元素的标签名，这个标签名在HTML文档中不区分大小写，而在XML(包括XHTML)文档中，则是区分大小写的。在使用createElement()方法创建新元素的同时，也为新元素设置了ownerDocument属性
var oDiv = document.createElement("div"); //#document console.log(oDiv.ownerDocument);
IE8-浏览器可以为这个方法传入完整的元素标签，也可以包含属性。
var oDiv = document.createElement(‘<div id="box"></div>‘); document.body.appendChild(oDiv); console.log(oDiv);
利用这种方法可以避开IE7-浏览器在动态创建元素的某些问题。
[a]不能设置动态创建的<iframe>元素的name特性
[b]不能通过表单的reset()方法重设动态创建的<input>元素
[c]动态创建的type特性值为"reset"的<button>元素重设不了表单
[d]动态创建的一批name相同的单选按钮彼此毫无关系。name值相同的一组单选按钮本来应该用于表示同一选项的不同值，但动态创建的一批这种单选按钮之间却没有这种关系。
var iframe = document.createElement("<iframe name = ‘myframe‘></iframe>"); var input = document.createElement("<input type=‘checkbox‘>); var button = document.createElement("<button type = ‘reset‘></button>"); var radio1 = document.createElement("<input type=‘radio‘ name =‘choice‘ value = ‘1‘>"); var radio2 = document.createElement("<input type=‘radio‘ name =‘choice‘ value = ‘2‘>");
元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。元素的childNodes属性中包含了它的所有子节点，这些子节点可能是元素、文本、注释、处理指令节点。但不同浏览器在处理空白文本节点上有差异。
<ul class="list" id="list">
<li class="in"></li>
<li class="in"></li>
</ul>
<script>
var oList = document.getElementById(‘list‘);
//IE8-浏览器返回2,其他浏览器返回5。因为IE8-浏览器子节点中不包含空白文本节点
console.log(oList.childNodes.length)
</script>
【解决】只获取元素节点的兼容写法
<ul class="list" id="list">
<li class="in"></li>
<li class="in"></li>
</ul>
<script>
var oList = document.getElementById(‘list‘);
var children = oList.childNodes;
var num = 0;
for(var i = 0; i < children.length; i++){
if(children[i].nodeType == 1){
num++;
}
}
console.log(num);
</script>
标签：
原文地址：http://www.cnblogs.com/xiaohuochai/p/4840603.html
