web -APIS（dom和BOM)
阿新 • • 發佈：2021-12-22
前言：js的基礎就是為了瀏覽器web端服務，所以有必要知道一下web端的api也就是介面，結合那個web-API的ppt來看。
-
dom ：文件物件模型（Document Object Model，簡稱 DOM），是 W3C 組織推薦的處理可擴充套件標記語言（HTML或者XML）的標準程式設計介面。
-
W3C 已經定義了一系列的 DOM 介面，通過這些 DOM 介面可以改變網頁的內容、結構和樣式。
- dom 就是document文件的意思，一個頁面就是一個文件，裡面的各個標籤，包括html和a標籤，這些都是它的元素，所有的標籤都是元素，
getElentById獲取元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>getElentById獲取元素</title> </head> <body> <div id="time">2021-12-22</div> <script> // 1. 因為我們文件頁面從上往下載入，所以先得有標籤，所以我們script寫到標籤的下面 // 2. get 獲取 element元素by 通過 駝峰命名法 // 3. 引數 id 是大小寫敏感的字串，所以記得加 '' // 4. 返回的是一個元素物件 const getElement = document.getElementById('time') console.log(getElement); // 檢視標籤物件的型別 ，所有的標籤都是物件。 console.log(typeof getElement); // object // 5.console.dir列印我們返回的元素物件 根號的檢視裡面的屬性和方法 console.dir(getElement) </script> </body> </html>
getElementByTagName獲取某些元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>getElementByTagName獲取某些元素</title> </head> <body> <ul> <li>知否應是紅綠肥瘦</li> <li>知否應是紅綠肥瘦</li> <li>知否應是紅綠肥瘦</li> <li>知否應是紅綠肥瘦</li> <li>知否應是紅綠肥瘦</li> </ul> <ol id="ol"> <li>聰明絕頂</li> <li>聰明絕頂</li> <li>聰明絕頂</li> </ol> <script> // 1.返回的是 獲取過來元素物件的集合 以偽陣列的形式儲存的,它把八個li都給合在了一起 const lis = document.getElementsByTagName('li') console.log(lis); console.log(lis[0]); // 2. 我們想要依次列印裡面的元素物件我們可以採用遍歷的方式 for (var i = 0; i < lis.length; i++) { console.log(lis[i]); } const ol = document.getElementsByTagName('ol') console.log(ol); //它是個偽陣列，裡面只有【ol】所以去裡面找它的子元素li沒有， //它不能自己找自己 // 3.如果頁面中只有一個li 返回的還是偽陣列的形式 // 4. 如果頁面中沒有這個元素 返回的是空的偽陣列的形式 // 5.element.getElementByTagName('標籤名');父元素必須是指定的單個元素，所以必須是ol[0]指定ol的第一個。 //不可以 // console.log(ol.getElementsByTagName('li')); console.log(ol[0]); //ol的第0個裡面是它所有的li和它自己。 console.log(ol[0].getElementsByTagName('li')); // 我們一般用id挑選,感覺就是要找到唯一性，不然它咋整啊 const oll = document.getElementById('ol') console.log(oll.getElementsByTagName('li')); </script> </body> </html>