DOM常用操作 元素 節點相關

dom物件的深入理解這篇文章中有提到一些dom操作，我們會在這篇文章中簡單回顧一下。

幾個需求

dom元素的增刪改

注意：如果獲取到一組物件，要獲得元素物件需要加相應索引；

只有事先寫好了行內樣式才可以獲取和修改，其他設定樣式的方法不可。而且設定之後也只是設定行內樣式

需要提前寫好某個樣式類的css**；.classname = "***"這樣的寫法會覆蓋掉當前元素原有的樣式類，可以修改為 .classname += 「***」

給dom元素設定內容

節點型別

nodetype

nodename

nodevalue

文件節點

9「#document」

null

元素節點

1「大寫標籤名」

null

文字節點

3「#text」

文字內容

注釋節點

8「#comment」

注釋內容

屬性描述

[container].childnodes

獲取當前容器的所有子節點(包含各種型別的子節點)

[container].children

獲取當前容器所有元素子節點

[container].firstchild

獲取當前容器第乙個子節點

[container].firstelementchild

獲取當前容器第乙個元素子節點

[container].lastchild

獲取當前容器最後乙個子節點

[container].lastelementchild

獲取當前容器最後乙個元素子節點

[node].parentnode

獲取某節點的父節點

[node].previoussibling

獲取某節點的上乙個兄弟節點(哥哥)

[node].previouselementsibling

獲取某節點的上乙個兄弟元素節點(哥哥)

[node].nextsibling

獲取某節點的下乙個兄弟節點(弟弟)

[node].nextelementsibling

獲取某節點的下乙個兄弟元素節點(弟弟)

所有帶element的都不相容ie6~8，可根據節點的nodetype屬性判斷節點型別。

function children(container)

} return result;
}

思路：獲取當前節點的父節點->獲取父節點的所有子節點->遍歷所有的元素節點，直到遇到當前節點為止。

function prevall(node)

} return result;
}

思路：先找到當前節點的哥哥節點->再找哥哥的哥哥->…直到沒有哥哥節點為止。

function prevall(node)

prev = prev.previoussibling;
} return result;
}

思路：獲取當前節點的父節點->獲取父節點的所有子節點->從後向前遍歷所有的元素節點，直到遇到當前節點為止。

function nextall(node)

} return result;
}

思路：先找到當前節點的弟弟節點->再找弟弟的弟弟->…直到沒有弟弟節點為止。

function nextall(node)

next = next.nextsibling;
} return result;
}

思路：獲取當前節點的父節點->獲取父節點的所有子節點->遍歷篩選出元素節點並跳過自己。

function siblings(node)

return result;
}

思路：通過上面封裝的prevall和nextall方法。

function siblings(node)

function index(node)

描述document.createelement([標籤名])

動態建立乙個元素節點

document.createtextnode()

動態建立乙個文字節點

將元素插入到容器的末尾

[container].insertbefore([新元素],[老元素])

將新元素加入到容器中老元素(必須存在)的前面

[container].removechild([元素])

刪除元素

設定元素屬性

DOM元素節點

目錄 一 dom元素節點的增刪改 1.新增 1.1將新增的節點放到某個標籤內 2.刪除 3.修改 替換 4.轉殖 複製 二 dom元素節點的屬性 1.元素節點本質是乙個物件，存在修飾該元素的屬性和方法 2.通用屬性 2.獲取非內聯 行內 樣式 3.一些標籤特有的屬性 4.節點的屬性 三 拓展clss...

Dom節點操作常用方法

1.訪問 獲取節點 document.getelementbyid id 返回對擁有指定id的第乙個物件進行訪問 document.getelementsbyname name 返回帶有指定名稱的節點集合 注意拼寫 elements document.getelementsbytagname tag...

dom 查詢元素節點

var div document.getelementsbytagname div 0 查詢元素節點，方法會存在一些相容性問題，ie低版本瀏覽器不支援 console.log div.parentelement 父元素節點 console.log div.children 子元素節點 console...