DOM(Document Object Model:文檔對象模型)為javascript中的一部分,它為訪問和修改html文檔或xml文檔提供了一些編程接口,DOM以對象的形式來描述文檔中的內容,以樹形結構來管理這些對象,並提供了一些方法來得到這些對象並對其進行修改。
獲取元素對象方法:
1.document.getElementById() :返回對擁有指定 id 的第一個對象的引用。
2.document.getElementsByName():返回帶有指定 名稱 的對象集合。
3.document.getElementsByTagName():返回帶有指定 標簽名 的對象集合。
上述三個方法是經常用到的獲取Element 元素對象 的方法,DOM由節點組成,而所有節點都需要獲取元素對象后用DOM提供的特定方法獲取,因此這些方法是使用DOM進行編程的入口,在DOM中每個東西都是 節點:
- 文檔本身就是一個文檔對象
- 所有 HTML 元素都是元素節點
- 所有 HTML 屬性都是屬性節點
- 插入到 HTML 元素文本是文本節點
- 注釋是注釋節點
獲得節點方法:
1.element.getAttributeNode():獲得該節點的屬性節點。
2.element.firstChild:獲得該節點第一個子節點。
3.element.lastChild:獲得該節點的最后一個子節點。
3.element.parentNode():獲得該節點的父節點。
4.element.childNodes():返回該節點的子節點數組(由於空格也會被當做文本節點被返回。所以該方法常用element.getElementsByTagName()代替)。
5.element.nextSibling:返回該節點的下一個兄弟節點。
6.element.previousSibling:返回該節點的上一個兄弟節點。
節點常用屬性:
1.element.nodeName:其內容是給定節點的名字。
如果是元素節點,nodeName返回這個元素的名稱(標簽名)。
如果是屬性節點,nodeName返回這個屬性的名稱(屬性名)。
如果是文本節點,nodeName返回一個內容為#text 的字符串。
2.element.nodeType:返回一個整數,這個數值代表着給定節點的類型。
Node.ELEMENT_NODE ---1 -- 元素節點
Node.ATTRIBUTE_NODE ---2 -- 屬性節點
Node.TEXT_NODE ---3 -- 文本節點
3.element.nodeValue:返回給定節點的當前值(字符串)。
如果給定節點是一個屬性節點,返回值是這個屬性的值。
如果給定節點是一個文本節點,返回值是這個文本節點內容。
如果給定節點是一個元素節點,返回值是 null。
操作節點常用方法:
1.element.appendChild():在該節點所有子節點的最后加入一個子節點。
2.element.insertBefore(new,old):在該節點的指定子節點前加入一個子節點。
3.element.removeChild():刪除該節點的指定子節點。
4.element.replaceChild(new,old):替換該節點的指定子節點。
5.element.cloneNode(boolean):復制指定節點並返回,參數為true時復制子節點,默認為false。
innerHTML屬性不是W3C推薦標准,但由於其操作的方便性,大多數主流瀏覽器都支持這個屬性,通過此屬性可以很方便的獲取或寫入元素的文本信息,可以調用該屬性直接獲得元素的文本內容,也可以通過賦值字符串的方式將指定的HTML文本寫入調用該屬性的元素。