元素節點
Element類型是最常用的節點類型，它具有以下特征：
- nodeType值為1
- nodeName值為元素的标簽名稱，也可以使用tagName屬性。在HTML中，傳回标簽名始終為大寫，在腳本中比較需要全部小寫化：if(element.tagName.toLowerCase() == “div”){}
- nodeValue值為null
- parentNode是Document或Element類型節點
- 其子節點可能是Element、Text、Comment、ProcessingInstruction、CDATASection或者EntityReference
所有HTML元素都是HTMLElement類型或者其子類的執行個體，HTMLElement又是Element的子類，在繼承Element類型時添加了一些屬性，添加的這些屬性分别對應每個HTML元素下列标準特性：
- id：元素在文檔中的唯一辨別符
- title：有關元素的附加說明資訊，一般通過工具提示顯示出來
- lang：元素内容的語言編碼，很少使用
- dir：語言方向，值為“ltr”（從左至右），“rtl”（從右至左），很少使用
- className：與元素的class特性對應，即為元素指定的CSS類樣式
上述這些屬性都可以用來取得或修改相應的特性值
通路元素
1. getElementById()方法：
document.getElementById(ID)
//ID表示文檔對應元素的id值。如果不存在指定元素，傳回null。該方法隻适用于document對象
示例：獲得div的引用，然後檢視節點類型等資訊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">盒子</div>
<script type="text/javascript">
var box = document.getElementById("box"); //獲得div引用
var info = "nodeName:" + box.nodeName; //獲得節點名稱
info += "\rnodeType:" + box.nodeType;//獲得節點類型
info += "\rparentNode:" + box.parentNode.nodeName;//父節點名稱
info += "\rchildNodes:" + box.childNodes[0].nodeName;//子節點名稱
document.write(info);
</script>
</body>
</html>
2. getElementByTagName()方法：
document.getElementsByTagName(tagName)
//tagName表示指定名稱的标簽，該方法傳回值為一個節點集合，适用length屬性可以擷取集合中包含元素的個數，利用下标可以通路其中某個元素對象
示例：使用循環擷取每個p元素，并設定class屬性
var p = document.getElementsByTagName("p");
for(var i = 0; i < p.length; i++){
p[i].setAttribute("class", "red");
}
建立元素
createElement()方法能夠根據參數指定的标簽名稱建立一個新的元素，并傳回建立元素的引用。
var element = document.createElement("tagName");
//element表示建立元素的引用，tagName指定建立元素的标簽名稱
示例：下面代碼在目前文檔中建立了一個段落标記p，并把該段落的引用存儲到變量p中。由于該變量表示一個元素節點，是以它的nodeType屬性值等于1，而nodeName屬性值等于p。
var p = document.createElement("p"); //建立段落元素
var info = "nodeName：" + p.nodeName; //擷取元素名稱
info += ",nodeType：" + p.nodeType;//擷取元素類型，如果為1則表示元素節點
alert(info);
注意：使用createElement()方法建立的新元素不會被自動添加到文檔裡，因為新元素還沒有nodeParent屬性，僅在JavaScript上下文中有效。如果要把這個元素添加到文檔裡，還需要使用appendChild()、insertBefore()或replaceChild()方法實作。
示例：将新建立的p元素增加到body元素下：
var p = document.createElement("p");
document.body.appendChild(p);
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)