怎么在JavaScript中操作DOM

本篇文章給大家分享的是有關(guān)怎么在JavaScript中操作DOM，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

javascript是一種什么語言

javascript是一種動態(tài)類型、弱類型的語言，基于對象和事件驅(qū)動并具有相對安全性并廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言，同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網(wǎng)頁添加動態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡服務器，如Node.js。

DOM概念

DOM：document object model : 文檔對象模型
通過js去操作HTML的代碼，添加元素，刪除元素。。。

獲取元素

（1）getElementById 通過id獲取，獲取到的是一個元素
（2）getElementsByTagName 通過標簽名獲取，獲取到的是一個元素集合（數(shù)組）
（3）getElementsByClassName 通過class獲取，獲取到的是一個元素集合（數(shù)組）
（4）getElementsByName 通過name屬性獲取，獲取到的是一個元素集合（數(shù)組）

總結(jié)：獲取元素可以根據(jù)標簽名、id、class、name屬性來獲取。Id獲取的結(jié)果是一個 元素，而其他獲取的是一個集合。
document對象支持以上四種，而element對象僅支持
getElementsByTagName和getElementsByClassName

修改元素

（1）修改內(nèi)容
通過innerText屬性讀取或設置標簽內(nèi)部的文本
可以用innerHTML屬性讀取或設置標簽內(nèi)部的文本
兩個區(qū)別：innerHTML會按照HTML的規(guī)則解析文本，而innerText只是當作普通的文本 內(nèi)容。

（2）修改樣式
a：xxx.style.yyy
b：xxx.classname = “……”（相當于修改了class屬性）

添加刪除元素

（1）createElement 創(chuàng)建一個元素節(jié)點
createElement（“p”）創(chuàng)建一個段落
（2）createTextNode創(chuàng)建一個文本節(jié)點
createTextNode(“文本內(nèi)容”)創(chuàng)建一個值為“文本內(nèi)容”的文本節(jié)點
（3）appendChild 添加子節(jié)點
（4）removeChild 刪除子節(jié)點

導航

Document：根節(jié)點
parentNode： 獲取父節(jié)點
childNodes： 獲取所有的子節(jié)點
firstChild：第一個子節(jié)點
lastChild：最后一個子節(jié)點

以上就是怎么在JavaScript中操作DOM，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。