JavaScript 复习之 Element 节点

DreamTruth
282 阅读6分钟

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

Element.matches()

返回一个布尔值，表示当前元素是否匹配给定的 CSS 选择器。

事件相关方法

  • Element.addEventListener()添加事件的回调函数
  • Element.removeEventListener移除事件监听函数
  • Element.dispatchEvent触发事件

Element.scrollInteView()

滚动当前元素，进入浏览器可见区域，类似于window.location.hash的效果。

该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为true。

Element.getBoundingClientRect()

返回一个对象，提供当前元素节点的大小、位置等信息，基本上就是 CSS 盒状模型的所有信息。

Element.getClientRects()

返回一个类似数组的对象，里面是当前元素在页面上形成的所有矩形（所以方法名中的Rect用的是复数）。每个矩形都有bottom、height、left、right、top和width六个属性，表示它们相对于视口的四个坐标，以及本身的高度和宽度。

Element.insertAdjacentElement()

方法在相对于当前元素的指定位置，插入一个新的节点。该方法返回被插入的节点，如果插入失败，返回null。

方法一共可以接受两个参数，第一个参数是一个字符串，表示插入的位置，第二个参数是将要插入的节点。第一个参数只可以取如下的值。

  • beforebegin：当前元素之前

  • afterbegin：当前元素内部的第一个子节点前面

  • beforeend：当前元素内部的最后一个子节点后面

  • afterend：当前元素之后

注意，beforebegin和afterend这两个值，只在当前节点有父节点时才会生效。

Element.insertAdjacentHTML(),Element.insertAdjacentText()

Element.insertAdjacentHTML方法用于将一个 HTML 字符串，解析生成 DOM 结构，插入相对于当前节点的指定位置。

Element.insertAdjacentText方法在相对于当前节点的指定位置，插入一个文本节点.

参数和Element.insertAdjacentElement()一样。

Element.remove()

用于将当前元素节点从它的父节点移除。

Element.focus()，Element.blur()

Element.focus方法用于将当前页面的焦点，转移到指定元素上。

Element.blur方法用于将焦点从当前元素移除。

Element.click()

Element.click方法用于在当前元素上模拟一次鼠标点击，相当于触发了click事件。

avatar
文章
阅读
粉丝