JS中判斷2個節點在DOM結構位置

2021-05-26 07:45:06 字數 1423 閱讀 3092

在ie中使用內建的contains來判斷節點是否在某容器中

ex:document.documentelement.contains(document.body)   === true

document.body.contains(document.documentelement)   === false

但在ff下沒有此屬性,為了相容ff推出comparedocumentposition這個東西但這個只返回乙個數值:

a.comparedocumentposition(b)

):

bits          number        meaning

000000         0              元素一致

000001         1              節點在不同的文件(或者乙個在文件之外)

000010         2              節點 b 在節點 a 之前

000100         4              節點 a 在節點 b 之前

001000         8              節點 b 包含節點 a

010000         16            節點 a 包含節點 b

100000         32            瀏覽器的私有使用

ex:1.  

1>document.documentelement.comparedocumentposition(document.body) === 20

2>document.body.comparedocumentposition(document.documentelement) === 10

解釋下:

1>body在html裡面所以有16,然後html在body前面(我理解的是..)所以有4,故加起來就是20.

2>html在body裡面所以有8,然後body在html後面(我理解的是..)所以有2,故加起來就是10.

2.  

1>document.body.comparedocumentposition(document.getelementsbytagname("head")[0]) === 2

2>document.getelementsbytagname("head")[0].comparedocumentposition(document.body) === 4

解釋下:

head和body沒有包含關係(理解為同一級別)所以是0,而head在body的前面,所以有個2,故加起來就是2.

head和body沒有包含關係(理解為同一級別)所以是0,而body在head的後面,所以就是4,故加起來就是4.

js中dom節點的增刪改

obj.insertbefore newnode,oldnode obj是父節點,在oldnode前面新增newnode obj.replacechild newnode,oldnode obj是父節點,用newnode替換oldnode obj.removechild oldnode obj是父節...

JS中的DOM內容節點操作

document 物件中有innerhtml和innertext 兩個屬性,這兩個屬性都是獲取和修改 document 物件的文字內容。innerhtml 設定或返回所選元素的內容 包括 html 標記 給p標籤新增文字內容 給div標籤新增標籤innertext 設定或返回所選元素的文字內容 不包...

JS中的DOM節點以及操作

操作屬性節點有兩種當時,一種是通過普通物件的方式來操作屬性節點,另外一種是通過屬性節點的方法來操作屬性節點。如果我們可以把元素節點當成普通物件來處理,通過 元素節點.屬性 或 元素節點 屬性 的方式來設定屬性。注意 設定類 class 只能用 classname 1.1 獲取屬性var img do...