JavaScript 复习之 Element 节点-CSDN博客

Element节点对象对应网页的 Html 元素。

一、实例属性

1、元素特性的相关属性

Element.id返回元素id属性，属性可读写。
Element.tagName返回元素的大写标签名，与nodeName属性的值相等。
Element.dir用于读写当前元素的文字方向，从左到右（ltr），从右到左（rtl）
Element.accessKey用于读写分配给当前元素的快捷键。
Element.draggable返回一个布尔值，表示当前元素是否可拖动，属性可读写
Element.lang返回当前元素的语言设置，属性可读写
Element.tabIndex返回一个整数，表示当前元素在 Tab 键遍历时的顺序，属性可读写。
Element.title鼠标悬浮时弹出的文字提示，可读写

2、元素状态的相关属性

Element.hidden返回一个布尔值，表示当前元素的hidden属性，可读写。与 CSS 设置相互独立，优先级低于 CSS 设置。
Element.contentEditable可设置属性，使得元素是否可编辑，三个值true，false，inhert，属性可读写， Element.isContentEditable返回一个布尔值，属性只读。
Element.attributes返回当前元素节点的所有属性节点类数组对象。
Element.className用来读写元素的class属性。
Element.classList返回元素节点的class属性的类数组对象。有以下方法：
1. add()增加一个class
2. remove()移除一个class
3. contains()检查是否包含某个class
4. toggle()将某个class移入或移出当前元素。第二个参数为布尔值，添加为true，移除为false。
5. item()返回指定索引位置的class
6. roString()将class列表转化为字符串
Element.dataset返回一个对象，读取元素上data-属性
Element.innerHTML用来设置某个节点的内容，可读写。
Element.outHTML返回一个当前元素节点所有 HTML 代码的字符串。
Element.clientHeight返回一个整数值，表示元素系欸但的 CSS 高度（单位像素），只对块级元素生效，行内元素返回0。包括padding，不包括border、margin
Element.clientWidth返回节点的 CSS 宽度，块级元素有效，行内元素返回0，包括padding,不包括border、margin。

// 视口高度
document.documentElement.clientHeight

// 网页总高度
document.body.clientHeight
复制代码

Element.clientLeft等于元素节点左边框的宽度，如果没有设置左边框，或者行内元素则返回0。
Element.clientTop元素顶部边框的宽度，其他同上。
Element.scrollLetf表示当前元素的水平滚动条向右侧滚动的像素数量
Element.scrollTop元素垂直滚动条向下滚动的像素数量。如果要查看整张网页的水平的和垂直的滚动距离，要从document.documentElement元素上读取。
Element.offsetParent返回最靠近当前元素的，并且 CSS 的position属性不等于static的上层元素。如果该元素是不可见的（display属性为none），或者位置是固定的（position属性为fixed），则offsetParent属性返回null。
Element.offsetHeight返回元素 CSS 垂直高度（单位像素），包括元素本身高度、padding和border，及水平滚动条的高度（如果存在）。属性只读
Element.offsetWidth元素 CSS 水平宽度，其他同上。属性只读
Element.offsetLeft元素左上角相对于Element.offsetParent节点的水平位移。
Element.offsetTop返回垂直位移。
Element.style用于样式的操作
Element.children返回当前元素节点的所有子元素的类数组对象。
Element.childElementCount返回当前元素节点包含的子元素节点的个数。
Element.firstElementChild返回当前元素的第一个子节点元素，Element.lastElementChild返回最后一个子节点元素。没有返回null
Element.nextElementSibling返回元素节点后一个同级元素节点，Element.previousElementSibling返回元素节点的前一个同级元素节点。

实例方法

1、属性相关方法

getAttribute()获取某个属性的值
getAttributeNames()返回元素所有的属性名
setAttribute()写入属性值
hasAttribute()某个属性是否存在
hasAttributes()元素是否有属性
removeAttribute()删除属性

Element.querySelector()

接受 CSS 选择器为参数，但是无法选中伪元素。返回父元素的第一个匹配的子元素。

Element.querySelectorAll()

接受 CSS 选择器作为参数，返回一个NodeList实例，包含所有匹配的子元素。

Element.getElementsByClassName()

方法返回一个HTMLCollection实例，成员是当前元素节点的所有具有指定 class 的子元素节点。该方法与document.getElementsByClassName方法的用法类似，只是搜索范围不是整个文档，而是当前元素节点。

Element.getElementsByTagName()

返回一个HTMLCollection实例，成员是当前节点的所有匹配指定标签名的子元素节点。该方法与document.getElementsByClassName方法的用法类似，只是搜索范围不是整个文档，而是当前元素节点。

Element.closest()

接受一个 CSS 选择器作为参数，返回匹配选择器的、最接近当前节点的一个祖先节点（包括当前节点本身）。没有则返回null

// HTML 代码如下
// <article>
//   <div id="div-01">Here is div-01
//     <div id="div-02">Here is div-02
//       <div id="div-03">Here is div-03</div>
//     </div>
//   </div>
// </article>

var div03 = document.getElementById('div-03');

// div-03 最近的祖先节点
div03.closest("#div-02") // div-02
div03.closest("div div") // div-03
div03.closest("article > div") //div-01
div03.closest(":not(div)") // article
复制代码