在 HTML DOM （文檔對(duì)象模型）中，每個(gè)部分都是節(jié)點(diǎn)靠抑。
節(jié)點(diǎn)是DOM結(jié)構(gòu)中最基本的組成單元量九，每一個(gè)HTML標(biāo)簽都是DOM結(jié)構(gòu)的節(jié)點(diǎn)。
文檔是一個(gè) 文檔節(jié)點(diǎn) 颂碧。
所有的HTML元素都是 元素節(jié)點(diǎn)
所有 HTML 屬性都是 屬性節(jié)點(diǎn)
文本插入到 HTML 元素是 文本節(jié)點(diǎn)
注釋是 注釋節(jié)點(diǎn)荠列。
最基本的節(jié)點(diǎn)類型是Node類型，其他所有類型都繼承自Node载城，DOM操作往往是js中開(kāi)銷最大的部分肌似，因而NodeList導(dǎo)致的問(wèn)題最多。要注意：NodeList是‘動(dòng)態(tài)的’诉瓦，也就是說(shuō)川队，每次訪問(wèn)NodeList對(duì)象，都會(huì)運(yùn)行一次查詢睬澡，雖然這樣增加了開(kāi)銷固额，但可以保證我們新添加的節(jié)點(diǎn)都能在NodeList中訪問(wèn)的到。
所有的元素節(jié)點(diǎn)都有共用的屬性和方法猴贰，讓我們來(lái)詳細(xì)看一看：
一对雪、屬性
- element.id 設(shè)置或返回元素的 id。
- element.innerHTML 設(shè)置或者返回元素的內(nèi)容米绕，可包含節(jié)點(diǎn)中的子標(biāo)簽以及內(nèi)容
- element.innerText 設(shè)置或者返回元素的內(nèi)容瑟捣，不包含節(jié)點(diǎn)中的子標(biāo)簽以及內(nèi)容
- element.className 設(shè)置或者 返回元素的類名
- element.nodeName 返回該節(jié)點(diǎn)的大寫(xiě)字母標(biāo)簽名
- element.nodeType 返回該結(jié)點(diǎn)的節(jié)點(diǎn)類型馋艺，1表示元素節(jié)點(diǎn) 2表示屬性節(jié)點(diǎn)……
- element.nodeValue 返回該節(jié)點(diǎn)的value值，元素節(jié)點(diǎn)的該值為null
- element.childNodes 返回元素的子節(jié)點(diǎn)的nodeslist對(duì)象迈套，nodelist類似于數(shù)組捐祠，有l(wèi)ength屬性，可以使用方括號(hào) [index] 訪問(wèn)指定索引的值(也可 以使用item(index)方法)桑李。但nodelist并不是數(shù)組踱蛀。
- element.firstChild/element.lastChild 返回元素的第一個(gè)/最后一個(gè)子節(jié)點(diǎn)(包含注釋節(jié)點(diǎn)和文本節(jié)點(diǎn))
- element.parentNode 返回該結(jié)點(diǎn)的父節(jié)點(diǎn)
- element.previousSibling 返回與當(dāng)前節(jié)點(diǎn)同級(jí)的上一個(gè)節(jié)點(diǎn)(包含注釋節(jié)點(diǎn)和文本節(jié)點(diǎn))
- element.nextSibling 返回與當(dāng)前節(jié)點(diǎn)同級(jí)的下一個(gè)節(jié)點(diǎn)(包含注釋節(jié)點(diǎn)和文本節(jié)點(diǎn))
- element.chileElementCount : 返回子元素(不包括文本節(jié)點(diǎn)以及注釋節(jié)點(diǎn))的個(gè)數(shù)
- element.firstElementChild /lastElementChild 返回第一個(gè)/最后一個(gè)子元素(不包括文本節(jié)點(diǎn)以及注釋節(jié)點(diǎn))
- element.previousElementSibling/nextElementSibling 返回前一個(gè)/后一個(gè)兄弟元素(不包括文本節(jié)點(diǎn)以及注釋節(jié)點(diǎn))
- element.clientHeight/clientWidth 返回內(nèi)容的可視高度/寬度（不包括邊框，邊距或滾動(dòng)條）
- element.offsetHeight/offsetWidth /offsetLeft/offsetTop 返回元素的高度/寬度/相對(duì)于父元素的左偏移/右偏移(包括邊框和填充,不包括邊距)
- element.scrollHeight/scrollWidth/scrollLeft/scrollTop返回整個(gè)元素的高度（包括帶滾動(dòng)條的隱蔽的地方）/寬度/返回當(dāng)前視圖中的實(shí)際元素的左邊緣和左邊緣之間的距離/上邊緣的距離
- element.style 設(shè)置或返回元素的樣式屬性,贵白。示例：element.style.backgroundColor 注意率拒，與CSS不同，style的屬性要去掉橫杠禁荒，第二個(gè)單詞 首字母要大寫(xiě)
-
element.tagName 返回元素的標(biāo)簽名(大寫(xiě))
瀏覽器顯示結(jié)果：
還有某些專屬屬性專屬屬性指那些專屬于某種標(biāo)簽的屬性猬膨。比如 <a> 標(biāo)簽，有href和target屬性呛伴。<img> 有src屬性; <form>有entype以及action屬a_element.href 返回當(dāng)前節(jié)點(diǎn)指向的超鏈接
二勃痴、方法：
(以下所有js演示代碼都是以本文檔中的 **示例html代碼 **為實(shí)驗(yàn)對(duì)象)
- element.appendChild(nodeName) 向元素添加新的子節(jié)點(diǎn)，作為最后一個(gè)子節(jié)點(diǎn)热康，并返回該子節(jié)點(diǎn)沛申。如需向 HTML DOM 添加新元素，您首先必須創(chuàng)建該元素姐军，然后把它追加到已有的元素上铁材。
js演示代碼：
var a=document.getElementById('first_form');
var textnode=document.createTextNode("慎重選擇"); a.appendChild(textnode)
- element.getAttribute(para) 返回元素節(jié)點(diǎn)的指定屬性值。
js演示代碼：
var a=document.getElementById('first_form');console.log(a.getAttribute('name')) //控制臺(tái)輸出name的值
- element.getAttributeNode(para) 返回指定的屬性節(jié)點(diǎn)庶弃。
js演示代碼：
var a=document.getElementById('first_form');
console.log(a.getAttributeNode('name')) //控制臺(tái)輸出name屬性節(jié)點(diǎn)
- element.getElementsByTagName(para) 返回?fù)碛兄付?biāo)簽名的所有子元素的集合衫贬。
js演示代碼：
var a=document.getElementById('first_form');
console.log(a.getElementsByTagName('input')) //控制臺(tái)輸出
- element.hasAttribute(para) 如果元素?fù)碛兄付▽傩缘鲁海瑒t返回true歇攻，否則返回 false。
js演示代碼：
var a=document.getElementById('first_form');
console.log(a.hasAttribute('name')) //控制臺(tái)輸出
- element.insertBefore(insertNode,appointedNode) 在指定的已有的子節(jié)點(diǎn)之前插入新節(jié)點(diǎn)梆造。
js演示代碼：
var a=document.getElementById('first_form');
var inputList=document.getElementsByTagName('input');
var newNode=document.createElement('input');
var newNode2=document.createTextNode('天馬流星拳');
var br=document.createElement('br');
newNode.type='radio';
newNode.name='gongfa';
newNode.value='tmlxq';
a.insertBefore(newNode,inputList[2]);
a.insertBefore(newNode2,inputList[3]);
a.insertBefore(br,inputList[3]);
- element.removeAttribute() 從元素中移除指定屬性缴守。
js示例代碼：
var a=document.getElementById('first_form');
a.removeAttribute('name');
console.log(a.hasAttribute('name'))
- element.removeChild() 從元素中移除子節(jié)點(diǎn)。移除的節(jié)點(diǎn)雖然不在文檔樹(shù)中了镇辉，但其實(shí)還在內(nèi)存中屡穗，可以隨時(shí)被引用。
js示例代碼：
var a=document.getElementById('first_form');
a.removeChild(a.childNodes[3]);
element.replaceChild(newNode,replaceNode) 把指定節(jié)點(diǎn)替換為新節(jié)點(diǎn)忽肛。
element.setAttribute(attrName,attrValue) 把指定屬性設(shè)置或更改為指定值村砂。
js示例代碼：
var a=document.getElementById('first_form');
a.setAttribute('name','shaolinsi');
console.log(a.name)
- element.setAttributeNode() 修改指定屬性節(jié)點(diǎn)
js示例代碼：
var a=document.getElementById('first_form');
var attr = document.createAttribute('id');
attr.value='the_first';
a.setAttributeNode(attr);
console.log(a.id)
- nodelist.item() 返回 NodeList 中位于指定下標(biāo)的節(jié)點(diǎn)。
js示例代碼：
var a=document.getElementsByTagName('input');
console.log(a.item(2))
