js 列印出來的節點多了m js中的節點操作

2021-10-16 21:29:50 字數 2540 閱讀 3920

一、節點概念:

整個html檔案,其中所有的內容,都視為html檔案的乙個節點物件,可以通過操作節點物件,來操作html檔案。

1、起始節點操作,就是另一種dom操作,也是獲取物件、操作物件,但節點操作比dom操作更加複雜、更加豐富

2、與dom的操作區別:dom操作只能獲取標籤物件,節點操作能獲取標籤物件、內容物件、屬性物件、注釋內容。

3、特點:

a、在複製標籤時會用轉殖方法,而在寫入標籤時會使用節點操作

b、不管是dom方式,還是節點方式 獲取的標籤物件,內容可能不同,形式是完全一致的

c、dom方式 獲取的標籤物件,支援節點操作;節點方式 獲取的節點物件,支援dom操作

d、只要正確的獲取物件,之後想怎麼操作,怎麼操作

二、操作方法:

var odiv = document.queryselector('div');

1、獲取子級標籤節點,執行結果是乙個偽陣列可以foreach迴圈

console.log(odiv.childnodes);

2、獲取標籤的元素節點/標籤節點,結果是乙個偽陣列,但不能被foreach()迴圈

console.log(odiv.children);

3、獲取當前標籤中第乙個節點,執行結果是乙個物件,內容形式與dom操作方式,獲取的內容是一樣的

console.log(odiv.firstchild);

4、獲取標籤最後乙個節點,執行結果也是乙個物件,內容形式與dom操作方式,獲取的內容是一樣的

console.log(odiv.lastchild);

5、獲取當前標籤中,第乙個標籤節點,其他節點不會獲取

console.log(odiv.firstelementchild);

6、獲取當前標籤中,最後乙個節點,其他節點不會獲取

console.log(odiv.lastelementchild);

7、獲取當前標籤,上乙個兄弟節點(找哥哥)

console.log(odiv.previoussibling);

8、獲取當前標籤,下乙個兄弟標籤(找弟弟)

console.log(odiv.nextsibling);

9、獲取當前標籤上乙個兄弟元素節點(找標籤哥哥)

console.log(odiv.previouselementsibling);

10、獲取當前標籤下乙個兄弟元素節點,找標籤弟弟

console.log(odiv.nextelementsibling);

11、獲取當前標籤,父級節點(直接獲取父級)

console.log(odiv.parentnode);

console.log(document.queryselector('span').parentnode)

12、獲取當前標籤所有屬性的節點,執行結果是乙個偽陣列,不能被foreach迴圈

console.log( odiv.attributes );

總結:a:通過節點操作獲取物件/偽陣列與通過dom操作的物件/偽陣列,形式上是一致的,可以互相操作

b、執行結果上,有的偽陣列可以foreach迴圈,有的不能foreach迴圈

三、節點操作的型別,名稱,內容:

1、節點的型別: 物件.nodetype 屬性中儲存,資料是 乙個數值

元素節點/標籤節點 : 1

屬性節點 : 2

文字節點 : 3

注釋節點 : 8

2、節點的名稱: 物件.nodename

元素節點/標籤節點 : 大寫字母的 標籤名稱

屬性節點 : 小寫字母的 屬性名稱

文字節點 : #text

注釋節點 : #comment

3、節點的內容: 物件.nodevalue

元素節點/標籤節點 : null

屬性節點 : 屬性的屬性值

文字節點 : 文字內容,包括換行和空格

注釋節點 : 注釋內容,包括換行和空格

四、節點的獲取、新增、刪除、轉殖、寫入

1、新建標籤及文字

document.createelement('標籤名稱');var odiv = document.createelement('div');

console.dir(odiv);

document.createtexnode('要建立的文字內容')var otext = document.createtexnode('要建立新增的內容')

console.log(otext);

2、刪除節點

標籤物件.removecgild('需要刪除的節點')

3、轉殖節點

標籤物件.clone() 只轉殖標籤本身

標籤物件.clone(true) 轉殖標籤本身和標籤內容

4、寫入節點

a、在當前標籤末位,新增節點

b、在當前標籤,某個子級標籤之前,新增節點

標籤物件.insertbefore('要寫入的標籤' , 要寫在哪個子級節點之前)

var d = document.queryselector('div');

d.insertbefore(odiv,d.firstchild);

將驅動中的printk資訊列印出來

要將linux核心的帶級別控制的printk內容列印出來,在命令列 輸入 dmesg n 8 就將所有級別的資訊都列印出來 linux命令 dmesg 功能說明 顯示開機資訊。語 法 dmesg cn s 緩衝區大小 補充說明 kernel會將開機資訊儲存在ring buffer中。您若是開機時來不...

python 解析python列印出來的陣列

今天遇到個問題,要把python陣列列印到檔案的字串,從檔案裡讀進來,存在陣列裡。舉個例子,我們把python陣列在程式中用 print arr 之後,輸出的是 123 456 789 當我們從檔案裡讀取的時候,都到的是個字串,要把這個字串訪問 python陣列裡,可以通過下面的方法 import ...

print中的逗號「,」列印出來相當於空格

一 print中的逗號 列印出來相當於空格 用print 在括號中加上字串,就可以向螢幕上輸出指定的文字。比如輸出 hello,world 用 實現如下 print hello,world print 函式也可以接受多個字串,用逗號 隔開,就可以連成一串輸出 print the quick brow...