除了document,element類型也算是最常用的類型
Element節點有以下特征：
nodeType 值為1
nodeName 元素的標簽名
nodeValue 值為null
parentNode 值為Document或Element（上一級父級元素）
首先介紹DOM里常見的三種節點類型（總共有12種，如docment）：元素節點，屬性節點以及文本節點，例如<h2 class="title">head</h2>，其中h2是元素節點，class是屬性節點，head是文本節點，在這里你可以說h2這個元素節點包含一個屬性節點和一個文本節點。其實幾乎所有HTML的標簽都是元素節點，而id, title, class等則是屬性節點，而元素所包含的文本內容則是文本節點。
tagName和nodeName的語義是一樣的，都是返回所包含標簽的名稱，例如上面的h2標簽，都是返回h2，但是tagName只能在元素標簽上使用，而nodeName則可以在所有的節點上使用。
而tagName只有在元素節點上才會有值。
從DOM層次來看，nodeName是node 接口上的property，而tagName是element 接口上的property，所有的節點（元素節點，屬性節點，文本節點等12種）都繼承了node接口，而只有元素節點才繼承了element節點，因此nodeName比tagName具有更大的使用范圍。
總結：tagName只能用在元素節點上，而nodeName可以用在任何節點上，可以說nodeName涵蓋了tagName，並且具有更多的功能，因此建議總是使用nodeName。
轉自：https://blog.csdn.net/borishuai/article/details/5719227
1、HTML元素
HTML元素都由HTMLElement類型表示，不是直接通過這個類型，也是通過他的子類型來表示。
HTMLElement類型直接繼承自Element並添加了一些屬性。添加屬性分別對應每個HTML元素中都存在下列標准特性。
id，元素在文檔中的唯一標識符。
title，有關元素的附加說明信息，一般通過工具提示條顯示出來,(也就是把鼠標放在元素上邊顯示的提示信息)
lang，元素內容的元素代碼，很少使用。
dir，語言的方向，值為‘ltr’，(left-to-right,從左至右)或‘rtl’(right-to-left,從右至左)，也很少使用
className，與元素的class特性對應，即為元素指定的CSS類，
2、取得特性
每一個元素都有一個或多個特性，這些特性的用途是給出相應元素或其內容的附加信息。
操作DOM方法的方法有三個,這個方法可以針對特性使用：
對象.getAttribute(‘屬性’) //傳入的字符串要和屬性名相同class不能寫為className，如果不存在則返回null
還可以獲取元素的自定義屬性，特性的名稱是不區分大小寫的
style屬性返回一個CSS對象
onclick特性必須接受一個函數的指針，否則返回null
由於getAttribute()函數在每一個瀏覽器返回的屬性值不一致，所以不經常使用。
/*
特殊情況：
<body>
<div id='div1' title='klkx' dir='rtl' class='mn' align='center'>abc</div>
<script>
var oDiv = document.getElementById('div1');
/*
oDiv.btn = 'mn';
console.log( oDiv.getAttribute( 'btn') ); //null
*/
oDiv.setAttribute('btn','mn');//變為對象的特性
console.log( oDiv.getAttribute( 'btn') ); // mn
</script>
</body>
但是IE除外,如果是.設置的屬性，利用對象.屬性的形式能訪問當，但是用getAttribute()訪問不到，用setAttribute()設置的特性，用對象.屬性也訪問不到，一個是特性，一個是屬性；並不一樣
*/
3、設置特性
修改的對象.setAttribute(‘屬性’,'要修改的值')
如果特性不存在，則會創建該特性並賦值
刪除特性：
修改的對象.removeAttribute('屬性') //會刪除屬性和屬性值
4、attributes屬性
Element類型是使用attributes屬性的的唯一一個DOM節點類型。
attributes屬性包含一個NamedNodeMap與NodeList類似，動態類數組；
元素的每一個特性都保存在Attributes節點表示，每一個節點都保存在NamedNodeMap對象中
NamedNodeMap對象有以下方法：
getNamedItem(name);返回nodename屬性等於name的節點
removeNamedItem(name);從列表中刪除nodeName屬性等於name的節點，返回刪除的節點
setNamedItem(node);向列表中添加節點，以節點的nodeName屬性為索引
setNamedItem() 方法向 nodeMap 添加指定的節點。並不常用因為還要創建一個新的節點
如果此節點已存在，則將替換該節點，並返回被替換的節點，否則返回值是 null。
<body>
<div id='div1' title='klkx' dir='rtl' class='mn' align='center' name='abc'>abc</div>
<script>
var oDiv = document.getElementsByTagName('div')[0];
console.log(oDiv.align);
var s1 = oDiv.attributes.removeNamedItem('align');//刪除節點
console.log(oDiv.align);
var align = document.createAttribute('align');//要插入節點，必須先創建節點
align.nodeValue = 'center';
var s2 = oDiv.attributes.setNamedItem(align);
console.log(s2);
</script>
</body>
item(pos)返回位於數字pos位置的節點
三種方法：結果是一樣的
console.log( oDiv.attributes.item('3').nodeValue );
console.log( oDiv.attributes['class'].nodeValue );
console.log( oDiv.attributes.getNamedItem('class').nodeValue );
也可以用以上的語法設置特性的值：
oDiv.attributes.item('3').nodeValue = 'mn1'
console.log( oDiv.attributes.item('3').nodeValue );
oDiv.attributes['class'].nodeValue = 'mn2'
console.log( oDiv.attributes['class'].nodeValue );
oDiv.attributes.getNamedItem('class').nodeValue = 'mn3';
console.log( oDiv.attributes.getNamedItem('class').nodeValue );
removeNamedItem()方法與removeAttribute()方法相同，都刪除節點，但是前者返回刪除的節點
由於attributes對象的方法不夠方便，所以經常使用
getAttribute()
removeAttribute()
setAttribute()
實例：遍歷整個對象的特性，並返回以空格拼接的字符串
function outputAttributes(element){ var pairs = [], attrName, attrValue, i, len; 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(' '); }
問題：不同的瀏覽器返回的特性的順序並不一樣；
IE7以下會返回更多可能的特性;
所以為了兼容以前的版本，可以每一個特性都有一個specified屬性
specified屬性：
specified 屬性返回 true，如果已規定某個屬性。
如果已創建該屬性但尚未添加到元素中，也會返回 true。
否則返回 false。
function outputAttributes(element){ var pairs = [], attrName, attrValue, i, len; for (i=0,len=element.attributes.length;i<len ;i++ ) { attrName = element.attributes[i].nodeName; attrValue = element.attributes[i].nodeValue; if (element.attributes[i].specified){ pairs.push(attrName + '=\"' + attrValue + '\"'); } } return pairs.join(' '); }
5、創建元素
1、document.create('div');
2、document.create('<div id=\"div1\"></div>');
IE7以下創建元素用第2種
6、元素的子節點
元素可以有任意多個子節點和后代節點，因為元素可以使其他元素的子節點。
元素的childNodes屬性包含了所有的自己點，包括文本節點、注釋、處理指令。不同瀏覽器看待節點方面存在顯著不同
實例：這是一個通用的方法：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var oUl = document.getElementsByTagName('ul')[0],
i,
len,
index = 0;
for (i=0,len = oUl.childNodes.length;i<len ;i++ )
{
if (oUl.childNodes[i].nodeType === 1)
{
index++;
}
}
console.log(index);
</script>
</body>
也可以通過：
父節點.getElementByTagName('標簽名');獲得