HTML文件結點的遍歷

2021-07-15 10:46:50 字數 1421 閱讀 5258

有這麼個需求,實現文件字型放縮的功能。思路很簡單,遍歷文件結點,將所有元素的font-size屬性設定成原來的多少倍來達到放大的目的。需要注意的是,有的元素剛開始並沒有設定style和font-size屬性,那麼就需要給它乙個預設值。

從上面可以知道,重點就是文件結點的遍歷,剛開始通過chidnodes進行遍歷,**如下:

/*

*改變字型大小

*element 元素

*scale 縮放倍數

*/function fontchange(element,scale)

}

設定預設字型的函式setdefaultfontsize**如下:

/*

*設定元素預設字型

*/ function setdefaultfontsize(node)

}

這裡並沒有列出所有的元素,因為我的頁面只有上面的元素可能沒有設定style或者font-size。

後來測試的時候,發現nodename裡面竟然有"#text",也就是說連文字結點也遍歷了。不想遍歷文字結點而只遍歷元素結點怎麼辦?還好結點有個nodetype屬性,當nodetype=1的時候就是元素結點。於是修改**如下:

/*

*遞迴改變字型大小

*element 元素

*scale 縮放倍數

*/function fontchange(element,scale)

fontchange(ele,scale);

} }

這樣就好了。

再後來發現可以直接通過chidren來遍歷文件,而且children只包含元素結點。**如下:

/*

*遞迴改變字型大小

*element 元素

*scale 縮放倍數

*/function fontchange(element,scale)

}fontchange(ele,scale);

} }

後來一搜才發現childnodes和children的區別,同時也了解了node和element的區別:

node(節點)是dom層次結構中的任何型別的物件的通用名稱,node有很多態別,如元素結點,屬性結點,文字結點,注釋結點等,通過nodetype區分,例如元素結點是1,文字結點是3。element繼承了node類,也就是說element是node多種型別中的一種,即當nodetype為1時node即為elementnode,另外element擴充套件了node,element還擁有id、class、children等屬性。也就是說children是element的屬性,childnodes是node的屬性。

具體可以參考這篇部落格:node與element,childnodes與children的區別。

HTML元素,文件

html元素是構建網頁的一種單位,是由html標籤和html屬性組成的,html元素也是網頁中的一種基本單位.引用 ahref 盡情學習這是乙個html鏈結元素.p 這是我的第乙個網頁,在這裡 ahref 盡情學習吧 這是乙個html段落元素,它包含了乙個html鏈結元素.html文件就是html頁...

HTML 文件型別

宣告幫助瀏覽器正確地顯示網頁。web 世界中存在許多不同的文件。只有了解文件的型別,瀏覽器才能正確地顯示文件。html 也有多個不同的版本,只有完全明白頁面中使用的確切 html 版本,瀏覽器才能完全正確地顯示出 html 頁面。這就是 的用處。不是 html 標籤。它為瀏覽器提供一項資訊 宣告 即...

HTML 文件結構

1.mata 用於提高網頁的相關資訊,包括作者,日期等。還可以設定網頁的關鍵字,過期時間。2.meta http equiv 屬性值 content 具體屬性取值 設定網頁瀏覽器和伺服器之間的請求方式 http equiv content type 設定網頁的編碼 expires 設定網頁的有效期限...