導航:首頁 > 編程語言 > js中的dom解析

js中的dom解析

發布時間:2023-07-31 06:19:21

js中提到的dom引用是什麼意思

DOM即(Document Object Model)文檔對象模型,通過 javaScript操作DOM,您可以重構整個 HTML 文檔、添加、移除、改變或重排頁面上的項目。
例:document.getElementById("標簽id").style.color = "FF0000";//可以把HTML中指定ID標簽的文本部分變為紅色,這就是一個javascript操縱DOM的一個例子

❷ javascript DOM COM 區別

HTML DOM 是 W3C 標准(是 HTML 文檔對象模型的英文縮寫,Document Object Model for HTML)。
HTML DOM 定義了用於 HTML 的一系列標準的對象,以及訪問和處理 HTML 文檔的標准方法。
通過 DOM,可以訪問所有的 HTML 元素,連同它們所包含的文本和屬性。可以對其中的內容進行修改和刪除,同時也可以創建新的元素。
HTML DOM 獨立於平台和編程語言。它可被任何編程語言諸如 Java、JavaScript 和 VBScript 使用。

COM組件是遵循COM規范編寫、以Win32動態鏈接庫(DLL)或可執行文件(EXE)形式發布的可執行二進制代碼,能夠滿足對組件架構的所有需求。遵循COM的規范標准,組件與應用、組件與組件之間可以互操作,極其方便地建立可伸縮的應用系統。COM是一種技術標准,其商業品牌則稱為ActiveX。

❸ JS之DOM操作

DOM: Document Object Model,文檔對象模型;js提供了豐富的api來操作文檔內容。
DOM樹: html文檔中的內容是以樹形結構排布,html是DOM樹根,html下只有兩個子標簽head、body
節點: DOM將所有的分支端都成為節點。節點有很多類型,常見的節點類型有:文本節點、元素節點。
可以通過 nodeType查看節點類型 : 1元素節點、3文本節點

特殊的元素節點:
1、html元素

2、body元素

3、head元素

節點操作的api(屬性和方法)
1、nodeName:只讀屬性,可以讀取節點名稱

2、nodeType:只讀屬性,讀取節點類型

3、 hasChildNodes():判斷調用方法的節點是否存在子節點,存在返回true,不存在返回false。
主流瀏覽器會將換行符、製表符、空格當做文本節點處理,IE9以下會忽略它們。

4、childNodes:只讀屬性,獲得節點的子節點集合,子節點集合是一個類數組結構,有數組特點無數組方法

5、firstChild:獲得節點的第一個子節點

6、lastChild:獲得節點的最後一個子節點

7、querySelector():
參數:string類型,css選擇器
作用:獲得文檔中第一個符合選擇器條件的節點
兼容:在IE9以下不支持

8、 querySelectorAll(): // 獲得的都是靜態集合
參數:string類型,css選擇器
作用:獲得文檔中所有符合選擇器條件的節點集合(類數組結構)
兼容:在IE9以下不支持

注意: querySelector() 和 querySelectorAll() 得到的都是元素節點。

9、previousSibling:獲取節點的前一個兄弟節點

10、nextSibling:獲取節點的後一個兄弟節點

11、parentNode:獲得節點的父節點(父節點一定是元素節點)

12、removeChild():節點刪除它的指定子節點
DOM操作元素:暫時不用的隱藏、一定不用的刪除。

13、cloneNode():克隆一個節點
參數:boolean類型,true深克隆,false淺克隆,默認淺克隆
深克隆:不僅克隆節點和節點的屬性,還會克隆節點的子節點
淺克隆:只克隆節點和節點的屬性,不會克隆節點的子節點

14、a.replaceChild(b,c):用b替換c
其中a是c的父節點,c是文檔上已經存在的節點,b可以是節點也可以是已存在節點,被替換的節點會從文檔結構中刪除。

15、a.replaceWith(b):用b替換a
a已存在的節點,b可以是新節點也可以是已存在節點,被替換的節點從DOM樹刪除。

16、a.insertBefore(b,c):在c前面插入b
其中,a是c的父節點,c是已經存在的節點,b是新節點

17、a.appendChild(b):在a末尾追加b

a是父節點,b是a的子節點, c是子節點

元素節點的相關api
1、getElementsByTagName():根據標簽名獲得元素集合(類數組結構)

區別:HTMLCollection 是動態集合,NodeList 是靜態集合。

2、createElement():根據標簽名創建新元素

3、id:讀寫屬性,可以讀取或設置元素的id值

4、className:讀寫屬性,可以讀取或設置元素的class值

5、classList:讀取標簽的類名集合(類數組結構)

add():為元素新增類名,如果類名已存在不會重復添加

remove():刪除元素指定類名,如果類名不存在不會執行操作

元素的屬性分為兩類:
一類是元素本里就擁有的屬性,例如:id、class、style、src、herf、target、alt、title、type、value等等,這些屬性可以在js中直接通過.語法讀取或設置。
再一類是我們為了解決問題給元素添加的自定義屬性,這些屬性在js中無法直接通過.語法讀取,需要通過操作方法訪問。
6、setAttribute(name,value)
參數:name表示要設置的屬性名,value要為屬性設置的值
無返回值

7、getAttribute(name)
參數:name表示要讀取的屬性名
返回值:返回屬性的值,如果屬性不存在會返回null

8、removeAttribute(name)
參數:name表示要刪除的屬性名
無返回值

說明:setAttribute()、getAttribute()、removeAttribute()都可以操作元素的本地屬性和自定義屬性。

element拓展:
兼容:以下屬性、方法在IE9以下不支持。

1、children:讀取元素的所有元素子節點集合(類數組)

2、parentElement:讀取元素的父元素節點

3、previousElementSibling:讀取前一個元素兄弟節點

4、nextElementSibling:讀取後一個元素兄弟節點

5、firstElementChild:讀取第一個元素子節點
6、lastElementChild:讀取最後一個元素子節點
7、remove(): 將調用方法的元素從DOM結構中刪除

閱讀全文

與js中的dom解析相關的資料

熱點內容
python代碼過長換行 瀏覽:697
歐冠直播哪個app畫質最清楚 瀏覽:225
iphone6備份密碼 瀏覽:365
微信打碼賺錢安卓軟體 瀏覽:608
蘋果官換機買什麼版本 瀏覽:979
visio數據模型怎麼用 瀏覽:179
關於駕駛的app 瀏覽:92
多線程編程有什麼特點 瀏覽:453
iso文件系統 瀏覽:116
蘋果932攔截騷擾電話 瀏覽:765
盲盒開箱app有哪些 瀏覽:422
win10激活腳本之家 瀏覽:191
魔鬼作坊工具包 瀏覽:185
ae源文件下載 瀏覽:520
如何將照片內容轉換成pdf文件 瀏覽:137
浙里辦app如何更換手機號碼 瀏覽:244
電子資料文件有哪些 瀏覽:241
猥瑣貓表情教程 瀏覽:599
android音頻文件格式 瀏覽:458
漫畫臉app哪裡可以下載 瀏覽:959

友情鏈接