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 树上删除。