Element對象 · JavaWeb教案2019

## Element對象 ### 1. 特征相關的屬性 `Element.id`，`Element.tagName`，`Element.innerHTML`，`Element.outerHTML`（包含標簽定義本身） `Element.className` `Element.classList:add/remove/contains/toggle/item/toString` ~~~javascript var asia = document.getElementById("asia"); console.log(asia.outerHTML);//包括自己本身 console.log(asia.innerHTML); console.log(asia.tagName); console.log(asia.className); console.log(asia.classList); asia.classList.add('aaa','bbb'); console.log(asia.classList.contains('bbb'));//true console.log(asia.classList.item(3)); asia.classList.remove('bbbb'); ~~~ ### 2.盒子模型相關屬性 `Element.clientHeight/clientWidth` 返回元素可見部分的高度和寬度：注意包含了 `padding` 的值 `Element.clientLeft/Top` 獲取元素左邊框、頂部邊框的寬度 ### 3.相關節點的屬性 `Element.children` 返回當前元素節點的所有子元素。 `Element.childElementCount` 返回當前元素節點所有子元素的個數。 ~~~javascript var _asia = document.getElementById("_asia"); console.log(_asia.children); console.log(_asia.childElementCount); console.log(_asia.children.length); ~~~ `Element.firstElementChild/lastElementChild` `Element.nextElementSibling/previousElementSibling` ### 4.查找相關屬性 `Element.querySelector()` 該方法接收 `CSS` 選擇器作為參數，返回父元素第一個匹配的子元素。 ~~~javascript <ul id="_asia"> <li id="_china" class="t2">China <input type="button" id="btn" value="X" onclick="removeCountry1('_china');"/></li> <li id="_korea" class="t1">Korea <input type="button" id="btn" value="X" onclick="removeCountry1('_korea');"/></li> <li id="_japan" class="t1 t2">Japan <input type="button" id="btn" value="X" onclick="removeCountry1('_japan');"/></li> </ul> var _ali = document.getElementById("_asia").querySelector(".t1"); console.log(_ali); // _korea ~~~ `Element.querySelectorAll()` 方法接收 CSS 選擇器作為參數，返回一個 NodeList 對象，包含所有匹配的子元素。 `Element.getElementsByTagName()` 注意是標簽的參數大小寫不敏感 `Element.getElementsByClassName()` 方法接收類名，返回當前節點所有匹配類名的元素 `Element.closest()` 方法接收 CSS 選擇器作為參數，返回當前元素節點最接近的父元素（從當前節點開始向上遍歷） ~~~javascript <div id="_d" class="ddd"> Here is _d <div id="_d1" class="ddd"> Here is _d1 <div id="_d2"> Here is _d2 <div id="_d3"> Here is _d3 </div> </div> </div> </div> var _d1 = document.getElementById("_d3").closest(".ddd"); console.log(_d1.textContent); // _d1 ~~~ ### 5.其他方法 `Element.remove()` 將當前節點從 DOM 樹上刪除。