0061-0062.DOM操作中相關知識的復習 · 原生js-2020

### JS中常用的DOM操作 > DOM：document object model 文檔對象模型（提供一系列的屬性和方法，供我們獲取和操作DOM元素） #### 1.獲取DOM的方式 - document.getElementById([元素的ID])：在整個文檔中，根據元素的ID，獲得這個元素對象 + document是獲取元素的上下文（獲取元素的范圍），getElementById方法的上下文只能是document + 獲取到的結果是一個對象（堆內存：里面存儲著很多內置的屬性和方法） - [context].getElementsByTagName([標簽名])：在指定的上下文中，基于元素的標簽名獲取一組元素集合 + 獲取的結果是HTMLCollection元素集合 - [context].getElementsByClassName([樣式類名])：在指定上下文中，基于樣式類名獲取對應的元素集合 + 不兼容IE6~8低版本瀏覽器 - document.getElementsByName([NAME屬性值])：根據元素的NAME屬性值，在整個文檔中獲取一組元素集合 + 在IE瀏覽器中（9及以下）只對表單元素作用 - document.documentElement：獲取整個HTML元素對象（HTML是頁面的根節點） - document.body：獲取整個BODY元素對象 - document.head：獲取整個HEAD元素對象不兼容IE6~8低版本瀏覽器，可以根據選擇器（類似于CSS選擇器）快速獲取元素和元素集合的辦法： - [context].querySelector([SELECTOR]) 獲取一個元素對象 - [context].querySelectorAll([SELECTOR]) 獲取一組元素集合在不考慮兼容的情況下，這兩個方法就足以獲取我們需要的元素對象和元素集合了 #### 2.獲取DOM節點的屬性和方法 > 我們認為在頁面中所有呈現的內容，都是DOM文檔中的一個節點（node），例如：元素標簽是元素節點、注釋的內容是注釋節點、文本內容是文本節點、document是文檔節點... #### 3.關于DOM元素中的增加/刪除/修改 - document.createElement([標簽名])：動態創建一個DOM元素 - [CONTAINER].appendChild([元素])：把元素動態插入到指定容器的末尾 - [CONTAINER].insertBefore([新元素],[原始頁面中的元素])：把新創建的元素放置到指定容器原始頁面元素的前面 [原始頁面中的元素]肯定在[CONTAINER]容器中 - [CONTAINER].removeChild([元素])：在指定容器中移除元素 - document.createTextNode()：創建一個文本節點 - ... - 設置元素的屬性/自定義屬性 + 元素.xxx=xxx + 元素.setAttribute(xxx,xxx) setAttribute/getAttribute/removeAttribute #### 4.修改DOM元素的樣式 - 元素.style.xxx ：修改（獲取）當前元素的行內樣式 + 操作的都是行內樣式，哪怕把樣式寫在樣式表中，只要沒有寫在行內上，也獲取不到 - 元素.className：操作的是當前元素的樣式類，基于樣式類的管理給予其不同的樣式 #### 5.給DOM元素設置內容 - innerHTML / innerText：給非表單元素設置或者操作其內容 - value：操作表單元素的內容 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>珠峰培訓 - 微信：18310612838</title>  <style> .active { color: red; background-color: lightblue; } </style> </head> <body> <div class="box"> <h2 class="title">新聞標題</h2> <ul class="item" id="itemBox"> <li class="noLine">我是第1條新聞</li> <li>我是第2條新聞</li> <li class="noLine">我是第3條新聞</li> <li>我是第4條新聞</li> <li>我是第5條新聞</li> </ul> </div> <div class="noLine" name="AAA">我是外面的DIV</div> <input type="text" name="AAA">  <script> // 或者.ITEM這個UL // document.getElementById('itemBox'); // document.getElementsByTagName('ul')[0]; // document.getElementsByClassName('item')[0]; // querySelector不管匹配的結果有多少個，都只獲得第一個（元素對象） // #itemBox .item ul ... // let itemBox = document.querySelector('ul'); // console.log(itemBox); // querySelectorAll獲取的都是集合（哪怕只有一項也是集合） // let navList = document.querySelectorAll('#itemBox li'); // console.log(navList); </script> <script> /* // 獲取整個頁面中所有具備 noLine 樣式類的元素 // let noLines = document.getElementsByClassName('noLine'); // console.log(noLines); //=>[li,li,div] // 獲取到的結果是元素集合，不管集合中有幾項，它都是集合 let item = document.getElementsByClassName('item'); item = item[0]; //=>獲取集合中的第一項（這才是我們要操作的ITEM元素對象） let noLines = item.getElementsByClassName('noLine'); console.log(noLines); //=>[li,li] */ /* var AAAS = document.getElementsByName('AAA'); console.log(AAAS); //=>[div,input] IE9 [input] 真實項目中也是基于它操作表單元素的，尤其是單選框或者復選框 */ </script> <script> /* let itemBox = document.getElementById('itemBox'), navList = itemBox.getElementsByTagName('li'); */ // console.dir(itemBox); //=>它是一個對象：itemBox.xxx=xxx // console.dir(navList); //=>它是一個元素集合HTMLCollection（類數組集合：數字作為索引，LENGTH代表長度），集合中的每一項是單獨的元素對象 navList[0].xxx=xxx //===========設置樣式 /* itemBox.style.color = 'red'; itemBox.style.backgroundColor = 'green'; //=><ul class="item" id="itemBox" style="color: red; background-color: green;"> 設置的結果都是行內樣式 itemBox.style.cssText = `color: red; background-color: green;`; 這種方式是STYLE一個個設置樣式的簡寫，批量給行內上設置很多樣式 */ /* itemBox.className = 'active'; //=>CLASSNAME這樣操作會把之前的樣式類名給覆蓋掉 itemBox.className += ' active'; //=>這樣也可以，記得加空格區分每個樣式類 itemBox.classList.add('active'); //=>向指定樣式集合中新增一個樣式類（兼容性差） */ </script> </body> </html> ~~~