一文秒懂JavaScript DOM操作基礎
DOM概念
DOM：document object model : 文檔對象模型
通過js去操作HTML的代碼，添加元素，刪除元素。。。
獲取元素
（1）getElementById 通過id獲取，獲取到的是一個元素
（2）getElementsByTagName 通過標簽名獲取，獲取到的是一個元素集合（數組）
（3）getElementsByClassName 通過class獲取，獲取到的是一個元素集合（數組）
（4）getElementsByName 通過name屬性獲取，獲取到的是一個元素集合（數組）
總結：獲取元素可以根據標簽名、id、class、name屬性來獲取。Id獲取的結果是一個 元素，而其他獲取的是一個集合。
document對象支持以上四種，而element對象僅支持
getElementsByTagName和getElementsByClassName
修改元素
（1）修改內容
通過innerText屬性讀取或設置標簽內部的文本
可以用innerHTML屬性讀取或設置標簽內部的文本
兩個區(qū)別：innerHTML會按照HTML的規(guī)則解析文本，而innerText只是當作普通的文本 內容。
（2）修改樣式
a：xxx.style.yyy
b：xxx.classname = “……”（相當于修改了class屬性）
添加刪除元素
（1）createElement 創(chuàng)建一個元素節(jié)點
createElement（“p”）創(chuàng)建一個段落
（2）createTextNode創(chuàng)建一個文本節(jié)點
createTextNode(“文本內容”)創(chuàng)建一個值為“文本內容”的文本節(jié)點
（3）appendChild 添加子節(jié)點
（4）removeChild 刪除子節(jié)點
導航
Document：根節(jié)點
parentNode： 獲取父節(jié)點
childNodes： 獲取所有的子節(jié)點
firstChild：第一個子節(jié)點
lastChild：最后一個子節(jié)點
到此這篇關于JavaScript DOM操作基礎的文章就介紹到這了,更多相關JavaScript DOM基礎內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了JS中去掉array中重復元素的方法,需要的朋友可以參考下2017-05-05
JavaScript中的object轉換成number或string規(guī)則介紹
這篇文章主要介紹了JavaScript中的object轉換成number或string規(guī)則介紹,本文講解了object自動轉換成string的規(guī)則、object自動轉換成number的規(guī)則等內容,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細介紹了JS實現無縫循環(huán)marquee滾動效果，兼容IE, FireFox, Chrome，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
常用js,css文件統一加載方法(推薦) 并在加載之后調用回調函數
下面小編就為大家?guī)硪黄Ｓ胘s,css文件統一加載方法(推薦) 并在加載之后調用回調函數。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了JavaScript使用表單元素驗證表單的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
如何在Mozilla Gecko 用Javascript加載XSL
如何在Mozilla Gecko 用Javascript加載XSL...2007-01-01
這篇文章主要介紹了JavaScript通過元素的ID和name設置其樣式，下面有個不錯的示例，感興趣的朋友可以測試下2014-07-07
javascript設計模式 – 中介者模式原理與用法實例分析
這篇文章主要介紹了javascript設計模式 – 中介者模式,結合實例形式分析了javascript中介者模式基本概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
在IE模態(tài)窗口中自由查看HTML源碼的方法...2007-03-03
Bootstrap 折疊（Collapse）插件用法實例詳解
這篇文章主要介紹了Bootstrap 折疊（Collapse）插件用法實例詳解的相關資料,需要的朋友可以參考下2016-06-06