Element

Class

EventTarget
    └── Node
        └── Element

Event

事件类型	说明
dblclick	鼠标双击
mousedown	鼠标按下
mouseup	鼠标抬起
mousemove	鼠标移动时触发
mouseover	鼠标进入元素时触发（会冒泡）
mouseout	鼠标离开元素时触发（会冒泡）
mouseenter	鼠标进入元素时触发（不冒泡）
mouseleave	鼠标离开元素时触发（不冒泡）
contextmenu	右键点击触发菜单

click

在一个元素上被按下和放开时，click 事件就会被触发。

如果在一个元素上按下按钮，而将指针移到元素外再释放按钮，则在包含这两个元素的最具体的父级元素上触发事件。

click 事件会在 mousedown 和 mouseup 事件依次触发后触发。

属性	值
Bubbles	Yes
Cancelable	Yes
Interface	MouseEvent
Event handler property	onclick

blur

当一个元素失去焦点的时候 blur 事件被触发。

属性	值
Bubbles	No
Cancelable	No
Interface	FocusEvent
Event handler property	onblur

keydown

keydown 事件触发于键盘按键按下的时候。所有按键均会触发 keydown 事件，无论这些按键是否会产生字符值。

属性	值
Bubbles	Yes
Cancelable	Yes
Interface	KeyboardEvent
Event handler property	onkeydown

input

属性	值
Bubbles	Yes
Cancelable	No
Interface	InputEvent
Event handler property	oninput

wheel

滚轮（wheel）事件会在滚动鼠标滚轮或操作其他类似输入设备时触发。

属性	值
Bubbles	Yes
Cancelable	Yes
Interface	WheelEvent
Event handler property	onwheel

Properties

innerHTML

• 类型：string
• 定义：渲染前的HTML 内容

    <div id="box">
      Hello
      <span style="color: red">World</span>
    </div>

box.innerHTML

/*
      Hello
      <span style="color: red">World</span>
*/

outerHTML

• 定义：渲染前，包含自身的 HTML

box.outerHTML
/*
<div id="box">
      Hello
      <span style="color: red">World</span>
    </div>
    */

children

• 类型：HTMLCollection

该元素的所有“元素子节点”。只包含元素节点（Element），不包含：文本节点、注释节点。

html

<div id="box">
  文本
  <span></span>
  <!-- 注释 -->
  <p></p>
</div>

ts

const box = document.getElementById('box')!
box.children.length // 2
box.children[0].tagName // 'SPAN'
box.children[1].tagName // 'P'

previousElementSibling

• 类型：Element

previousElementSibling 返回当前元素在其父元素的子元素节点中的前一个Element【同级前】，如果该元素已经是第一个元素节点，则返回 null, 该属性是只读的。

<ul>
  <li>苹果</li>
  <li id="target">香蕉</li>
  <li>橘子</li>
</ul>

const target = document.getElementById('target')!
const prev = target.previousElementSibling

console.log(prev?.textContent) // 苹果

nextElementSibling

• 类型：Element

nextElementSibling 返回当前元素在其父元素的子元素节点中的后一个Element【同级后】，如果该元素已经是最后一个元素节点，则返回 null, 该属性是只读的。

const target = document.getElementById('target')!
const next = target.nextElementSibling

console.log(next?.textContent) // 橘子
console.log(target.previousElementSibling.innerText);//橘子，本质上还是HTMLElement，可以使用innerText。

client*

元素可视区域尺寸。

该属性包括内边距（padding），但不包括边框（border）、外边距（margin）和滚动条

element.clientWidth
element.clientHeight
element.clientLeft  
element.clientTop

属性	是否包含
padding	√
border	×
margin	×
scroll	×

clientHeight的特例

• 如果该元素是html元素且该元素的节点文档不在怪异模式中

• 或者如果该元素是body元素且该元素的节点文档在怪异模式中

以上两种情况下将返回视口高度，不包括渲染的滚动条的大小

offset*

元素布局占用尺寸

属性	是否包含
padding	√
border	√
margin	×
scroll	√

element.offsetWidth
element.offsetHeight
element.offsetLeft   
element.offsetTop

scroll*

包括由于溢出而在屏幕上不可见的内容

element.scrollWidth
element.scrollHeight
element.scrollTop
element.scrollLeft

属性	是否包含
padding	√
border	×
margin	×
scroll	×

Methods

remove

remove 指的是将自己(当前节点) 从文档树中移除。

const el = document.querySelector('.box')
el.remove()

scroll

用于在给定的元素中滚动到某个特定坐标

scroll(scrollLeft, scrollRight)
scroll(options)

• scrollLeft

  你想要显示在左上角的元素沿水平轴的像素。

• scrollRight

  你想要显示在左上角的元素沿垂直轴的像素。

• options

  包含以下参数的对象：top指定沿 Y 轴滚动窗口或元素的像素数。left指定沿 X 轴滚动窗口或元素的像素数。behaviorsmooth 表示平滑滚动并产生过渡效果，auto 或缺省值会直接跳转到目标位置，没有过渡效果。

getBoundingClientRect

• bounding：边界

• client：可视/客户端区域

• rect：矩形

• Return：DOMRect，其提供了元素的大小及其相对于视口的位置。

DOMRect包含整个元素的最小矩形（包括 padding 和 border-width）。

interface DOMRect {
  readonly top: number
  readonly right: number
  readonly bottom: number
  readonly left: number

  readonly width: number//盒模型宽，和 box-sizing: border-box时的width相同
  readonly height: number//盒模型高，和 box-sizing: border-box时的height相同

  readonly x: number
  readonly y: number
}