原生js dom操作

2021-07-12 00:25:38 字數 2235 閱讀 6279

這裡說說一些原生js操作dom的方法:

1,元素的獲取     

getelementbyid(),getelementsbytagname(),getelementsbyclassname(),這裡要注意這個getelementsbyclassname()在ie8以下是不相容的。

//相容寫法

function getbyclassname(classname)    

var nodes=document.getelementsbytagname("*");//獲取頁面裡所有元素,因為他會匹配全頁面元素,所以效能上有缺陷,但是可以約束他的搜尋範圍;    

var arr=;//用來儲存符合的classname;    

for(var i=0;i

2,元素操作方法

123(3)insertbefore(nodo1, node2),將node1作為當前元素的子節點,插入到當前元素的節點node2的前面

123這裡注意了,inserbefore的第二個引數,div的子節點,就是p要是div的子節點

(4)replacechild(newnode, oldnode);新節點,代替糾結點

123這裡注意了,replacechild的第二個引數,div的子節點,就是p要是div的子節點    

3,獲取節點

(1)haschildnodes() 這個方法返回乙個布林值,指示元素是否有子元素。

(2)childnodes 返回當前指定元素所有子元素(包括被注釋掉的元素)的陣列: document.body.childnodes;

它返回指定元素的子元素集合,包括html節點(元素節點),文字節點(空格也是文字節點)。可以通過nodetype來判斷是哪種型別的節點,只有當nodetype==1時才是元素節點,2是屬性節點,3 是文字節點。

(3)children返回當前指定元素所有子元素,但是與childnodes 不同的是,他只會返回html節點(元素節點),不返回文字節點。

(4)firstchildelem.firstchild 返回當前元素下的第乙個子節點。

這個獲取到的節點是以childnodes為 標準的,就是包括

html節點(

元素節點),文字節點(空格也是文字節點),所以返回的有可能是乙個文字節點

(5)lastchild

elem.lastchild返回當前元素下的最後乙個子節點。

這個獲取到的節點是以childnodes為 標準的,就是包括html節點(

元素節點),文字節點(空格也是文字節點),所以返回的有可能是乙個文字節點

(6)nextsbilingelem.nextsbiling 返回緊跟在當前節點後的那乙個同級節點(同級元素,不是子元素)。

這個獲取到的節點是以childnodes為 標準的,就是包括html節點(元素節點),文字節點(空格也是文字節點),所以返回的有可能是乙個文字節點

(7)previoussibling

elem

.previoussibling 返回前乙個同級節點,跟nextsbiling類似,只不過nextsbiling是返回後乙個,

(8)parentnodeelem.parentnode 返回父節點

4,屬性操作

(1)elem.getattribute(name); 獲取元素屬性

(2)elem.setattribute(name, value); 設定元素屬性

5,建立元素、文字節點

(1) var p = document.createelement("p"); 建立元素,裡面的「p」,就是代表建立p元素

(2) var txt = document.createtextnode("這是文字"); 這是建立文字元素

6,獲取元素,節點的值

123要獲取p之下的文字值

1, document.getelementbyid("test")

.childnodes[0].nodevalue;(這裡不能用children替換childnodes,因為children獲取不到 文字節點)

2, document.getelementbyid("test").

innertext;3,

document.getelementbyid("test").

innerhtml;

注意這裡2個3是有區別的:

123如果是這樣 那麼2的值還是 123, 但是3的值就是a href="#">123,就是說innerhtml會連html標籤也拿到,但是innertext不會

js DOM模型操作

dom模型中的節點 元素節點 文字節點 屬性節點 例 私 dotnet小屋 1 a是元素節點 2 私 dotnet小屋 是文字節點 3 href 是屬性節點 dom節點的屬性 nodename string 節點名稱,根據節點的型別而定義 nodevalue string 節點的值,根據節點的型別而...

js dom基本操作

class wraper class one 老大 ppppp div class box 內容span href 鏈結a 段落p llp div class last 老弟div div 查 所有節點屬性都是元素物件下的屬性 使用節點 第一步獲取元素物件,再獲取節點 var box documen...

JS DOM基本操作

如下表 方法描述 getelementbyid 返回帶有指定 id 的元素。getelementsbytagname 返回包含帶有指定標籤名稱的所有元素的節點列表 集合 節點陣列 getelementsbyclassname 返回包含帶有指定類名的所有元素的節點列表。把新的子節點新增到指定節點。re...