javascript遍歷節點時列印空白節點怎麼辦?

2021-07-24 09:06:21 字數 759 閱讀 9304

總結:在遍歷子節點時,優先選擇使用children()方法和firstelementchild()方法而不是firstchild方法或者childnodes方法,因為它們會列印空白節點

近日在用js做乙個遍歷二叉樹的問題時,遇到乙個很奇怪的問題,在使用js的childnodes方法時,列印返回的陣列元素時居然出現一大堆的「#text」節點,下面我來演示一下

如下為html部分:

乙個root父節點下包含兩個div子節點,接下來我試圖列印root節點的子節點,通過列印root.childnodes(返回值為乙個陣列)的元素 的方式來實現,下面為js的**

var root=document.getelementsbyclassname("root")[0];

var array=root.childnodes;

var str="";

for(var i=0;i和子節點間的空白部分識別為空白節點,列印出來文字節點「#text 」,只有**間無空白連線

才能列印「---div---div---」

如下:

這食物,工作台列印的便是「---div---div」

那如果我們使用children()方法又會怎麼樣呢?html和js**如下:

這時候,即使有空白節點,也不會列印出來,結果為:---div---div

JavaScript獲取節點

可以把html中的每個標籤看成乙個節點,那麼可以通過js將這些節點獲取出來,可以使用js的乙個內建物件 物件有自己的屬性和方法 取得這些節點並且進行操作 修改,刪除,替換其內容 該物件是乙個內建物件叫作document,內建物件就是已經建立好的物件,我們可以直接使用。瀏覽器標題欄 title 引用外...

JavaScript操作節點

之前我們能取得的節點物件,但是僅僅是取得而沒有做其他操作,那麼我們也可以建立乙個節點然後動態的插入到dom節點樹種 獲取div節點 var div document.getelementsbytagname div 0 建立文字節點 var textnode document.createtextn...

DOM遍歷元素節點時忽略空格文字節點的方法

元素節點之間的空格在瀏覽器中會被解釋為文字節點給父節點操作子節點方法帶來困擾,dom中擴充套件了方法解決 a.childelementcount 返回子元素 不包括文字節點和注釋 的個數 b.firstelementchild 指向第乙個子元素 不包括文字節點和注釋 c.lastelementchi...