js中常見的DOM操作
阿新 • • 發佈：2021-01-20
技術標籤：jsjsjavascript
DOM
DOM是網頁中用來表示文件中物件的標準模型，他是由節點和物件組成的結構集合。在瀏覽器解析HTML標籤時，會構建一個DOM樹結構，把html結構化成js可以識別的樹模型。
樹模型構成的層級結構，可以很容易的表明家族成員之間的關係，把複雜的關係簡明地表示出來
由此呢js也提供了一些dom的操作
一、dom元素獲取
-
document.getElementById(id的值)通過id來獲取元素的物件，返回值是一個物件// 通過id屬性獲取 let box=document.getElementById('box') console.log(box) -
document.getElementsByName(name)通過name屬性來獲取物件的,返回值是一個數組，與getElementById()方法類似，但他是查詢的name元素，而不是id屬性。<html> <head> <script type="text/javascript"> var myinput=document.getElementsByName("myInput"); console.log(myinput) </script> </head><body> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> </body></html> -
document.getElementsByTagName()通過標籤來獲取元素的物件, 返回值是一個數組// 通過name獲取屬性 let input=document.getElementsByTagName('input') console.log(input) -
document.getElementsByClassName()通過class類名來獲取的物件,返回值是一個數組// 通過class屬性獲取 let ul1=document.getElementsByClassName('ul1')[1] console.log(ul1) -
document.querySelector()css選擇符模式，返回與該模式匹配的第一個元素，結果為一個元素；如果沒找到匹配的元素，則返回null// 通過類選擇器獲取對應的節點，能獲取到第一個querySelector() let ul2=document.querySelector('.ul') // console.log(ul2) -
document.querySelectorAll()css選擇符模式，返回與該模式匹配的所有元素，結果為一個類陣列// 通過類選擇器獲取對應的節點，能獲取到此類的節點querySelectorAll() let ul2=document.querySelectorAll('.ul') // console.log(ul2)
二、dom簡單操作
-
建立：
新的標籤(元素節點) = document.createElement("標籤名")
2. 刪除：父節點.removeChild(子節點);
3. 插入：insertBefore(新插入的節點，參照物節點) 往某個節點的前面插入一個新的節點
4. 追加：appendChild(新的節點的名) 當前物件追加一個子節點<body> <ul class="ul2"> <li>11</li> <li>22</li> <li>33</li> </ul> </body> <script> // 建立一個節點 let li=document.createElement("li") // 給節點新增資料 li.innerText="我的天啊" // 尾部追加 box.appendChild(ul) //插入節點 ul2.insertBefore(li,ul2.firstElementChild) // 刪除節點 let ul2=document.querySelector('.ul2') box.removeChild(ul2) </script>DOM相關面試題
問題1、dom是哪種基本的資料結構？
樹結構
問題2、Dom操作的常用API有哪些？
①獲取DOM節點，以及節點的property和Attribute
②獲取父節點，獲取子節點 childNodes/ parentNode
③新增節點，刪除節點
問題3、Dom節點的Attribute和Property有和區別？
①property只是一個JS物件的屬性的修改
②Attribute是對html標籤屬性的修改
問題4、DOM效能優化。
將頻繁的操作改為一次性操作，通過建立文件碎片，最後一次性加入文件碎片。