DOM對象,控制HTML元素


getElementsByName()

返回帶有指定名稱節點對象的集合

語法 ?document.getElementsByName(name);



getElementsByTagName()方法

返回帶有指定標簽名的節點對象的集合,返回的元素順序是他們在文檔中的順序

語法 ? ? ? ?document.getElementsByTagName(Tagname)



getElementById,getElementsByName,getElementsByTagName之間的區別



getAttribute()方法

通過元素節點的屬性名稱獲取屬性的值

語法 ? elementNode. ?getAttribute(name)



setAttribute()方法

該方法增加一個指定名稱的值得新屬性,或者把原來的屬性設置為新的

語法 ? elementNode.setAttribute(name,value)

name :要設置的屬性名

value:要設置的屬性值

注意:

1.把指定的屬性設置為指定的值。如果不存在具有指定名稱的屬性,該方法將創建一個新屬性。

2.類似于getAttribute()方法,setAttribute()方法只能通過元素節點對象調用的函數

詳情? http://www.imooc.com/code/1588


節點屬性

在文檔對象模型(DOM)中,每個節點都是一個對象,DOM節點有三個重要的屬性

1. nodeName:節點的名稱

2. nodeValue:節點的值

3. nodeType:節點的類型

nodeName屬性:節點的名稱,是只讀的。

1. 元素節點的nodeName與標簽名相同

2. 屬性節點的nodeName是屬性的名稱

3. 文本節點的nodeName永遠是#text

4. 文檔節點的nodeName永遠是#document

nodeValue屬性:節點的值

1. 元素節點的nodeValue是undefined或者null

2. 文本借點的nodeValue是文本自身

3. 屬性借點的nodeValue是屬性的值

nodeType屬性:節點的類型,是只讀的,常用節點類型



訪問子節點childNodes

訪問選定元素節點下的所有子節點的列表,返回值可以看做是一個數組,具有length屬性

語法 ? ? elementNode.childNodes



訪問子節點的第一和最后一項

鏈接 http://www.imooc.com/code/1591



訪問父節點parentNode

獲取指定節點的父節點

語法 ?elementNode.parentNode


訪問祖節點

語法 ? elementNode.parentNode.parentNode ....



訪問兄弟節點

1. nextSibling屬性可以返回某個節點之緊跟的節點(處于同一樹層級中)

語法 ? nodeObject.nextSibling

如果無此節點,則返回null

2. previousSibling屬性可返回某個節點之緊跟的節點(處于同一樹層級中)

語法 nodeObject.previousSibling

如果無此節點,則返回null

鏈接? http://www.imooc.com/code/1593


插入節點appendChild()

在指定節點的最后一個子節點列表之后添加一個新的子節點

語法 ?appednChild(newnode)

newnode:指定追加的節點



插入節點insertBefore()

insertBefore()方法可以在已有的子節點插入一個新的子節點

語法 ? ? ?insertBefore(newnode,node)

newnode:要插入的新節點

node:指定此節點前插入節點



刪除節點removeChild()

從子節點列表中刪除某個節點,如果刪除成功,此方法可以返回被刪除的節點,如果失敗,則返回null

語法 ? ?nodeObject.removeChild(node)

node:必須要寫,指定需要刪除的節點



替換元素節點replaceChild()

用于實現子節點(對象)的替換,返回被替換對象的引用

語法 ?node.replaceChild(newnode,oldnew)

newnode:必須,用于替換oldnew的對象

oldnew:必須,被newnode替換的對象

注意:1.當oldnode被替換時,所有與之相關的屬性內容都將被移除

2. newnode必須先被建立



創建元素節點createElement()

該方法可創建元素節點,此方法可以返回一個Element對象

語法 ?document.createElement(tagName)

tagName:字符串值,這個字符串用來指明創建元素的類型

學習鏈接:http://www.imooc.com/code/1696

創建文本節點createTextNode

該方法創建新的文本節點,返回新創建的Text節點

語法: ? document.createTextNode(data)

data:字符串值,可規定此節點的文本


瀏覽器窗口的可視區域大小

獲得瀏覽器窗口的尺寸(瀏覽器的視口,不包括工具欄和滾動條)



網頁尺寸scrollHeight

scrollHeight和scrollWidth獲取網頁內容高度和寬度



網頁尺寸offsetHeight

offsetHeight和offsetWidth,獲取網頁內容高度和寬度(包括滾動條等邊線,會隨著窗口的顯示大小改變)



網頁卷去的距離與偏移量


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容