元素

@Element

概述 Overview: .Element 是 Web API 之一

.最通用的的基类 - the most general base class

.节点 Node 的一个子集：元素节点 ELEMENT_NODE；同样可以继承并使用节点的属性、方法和事件

属性 Properties

基本属性

.带标记的内容 - the HTML or XML markup contained within the element

.类似的属性还有：

.HTMLElement.innerText

.返回已经渲染的节点和其后代的文本内容 - the rendered text content of a node and its descendants

.使用内联样式 style 隐藏的元素不在获取范围 - 未被渲染；而样式文件中，隐藏的元素仍然可以被获取 - 因为它已经被渲染，但是被隐藏了

.如果设置该属性，就删除原有的所有后代元素 - Setting innerText on a node removes all of the node's children and replaces them with a single text node with the given string value

. Node.textcontent

.无论是否被渲染，都可以获取

<div id="box" class="wrap container">
    hi,there.
    <span style="display: none;">hidden text with style</span>
    <p>hidden text with class</p>
</div>

const dom = document.querySelector('#box');
console.log(dom.innerHTML);//所有内容，包括标签
console.log(dom.innerText);//不包括 hidden text with style
console.log(dom.textContent);//包括所有文本内容

class 系列

.开发的灵魂和重点

.通常结合静态类和动态类以及过渡动画等实现交互效果

.直接使用类名即可，不需要使用.

1. Element.className

.以字符串的形式返回元素应用的类；多个类名以空格分隔

.对该属性赋值将会增加、删除类

2. Element.classList

.以数组的形式返回元素应用的类

<div id="box" class="wrap container">hi,there.</div>

console.log(box);
console.log(box.classList);//DOMTokenList(2)
console.log(box.className);//wrap container

client 系列

1. Element.clientWidth

如果没有指定样式设置大小或者是 inline 元素，则为 0

元素的样式高度，不包括隐藏部分、border、margin、滚动条 - the inner height of the element

includes padding but excludes borders, margins, and vertical scrollbars

2. Element.clientHeight

the inner width of the element

3. Element.clientLeft

the width of the left border of the element

4. Element.clientTop

the width of the top border of the element

scroll 系列

1. Element.scrollWidth

元素滚动视图的宽高；整数 - round the value to an integer

包括 padding、不可见的部分，不包括 border、滚动条

the scroll view width of the element

a measurement of the width of an element's content, including content not visible on the screen due to overflow

includes the element's padding, but not its border, margin

2. Element.scrollHeight

the scroll view height of the element

3. Element.scrollLeft、

the left scroll offset of the element

4. Element.scrollTop

the top of the element is scrolled vertically

日常开发中，更多关注 scrollHeight 和 scrollTop

方法 Methods

获取元素相关 Element

.在指定元素的后代中获取元素 - Element.getElementsByTagName is similar to Document.getElementsByTagName(), except that it only searches for elements that are descendants of the specified element.

.更广泛使用的是 Document 的方法获取

.通常先使用 Document 获取一个元素，再使用 Element 获取内部的元素，可以减少检索的范围，提升检索效率

类别	说明
getElementsByTagName	根据标签名获取
getElementsByClassName	根据类名获取
querySelector	获取匹配选择器的第一个元素
querySelectorAll	获取匹配选择器的所有元素

[] 获取元素

<div class="box">
  <div class="item">Lorem.</div>
  <div class="item">Accusamus.</div>
  <div class="item">Cupiditate.</div>
  <div class="item">Ea.</div>
  <div class="item">Iste.</div>
  <div class="item">Rem?</div>
  <div class="item">Doloremque?</div>
  <div class="item">Aspernatur.</div>
  <div class="item">Sit?</div>
  <div class="item">Doloribus.</div>
</div>

const box = document.querySelector('.box')
const items = box.querySelectorAll('.item')

属性相关 Attribute

.和元素的属性相关的方法

类别	说明
getAttribute()	获取属性
hasAttribute()	拥有单个属性
hasAttributes()	拥有多个属性
setAttribute()	设置属性
removeAttribute()	删除属性
toggleAttribute()	切换属性；有则删除，无则添加

scrollIntoView()

.滚动进入视图 - 滚动父级容器，使当前元素可见

.默认和可滚动的祖先容器顶部对齐 - aligned to the top of the visible area of the scrollable ancestor

.选项可以指定和容器的对齐方式：顶部 start、底部 bottom、中部 center对齐等

.选项可以指定滚动行为 behavior；也可以有 CSS 实现

.可以代替 <a>实现页面内部导航/锚点跳转

.适合用于导航、焦点定位等场景

const links = document.querySelectorAll('.nav-item')
const conts = document.querySelectorAll('.nav-cont')
links.forEach((link, ind) => {
    link.addEventListener('click', () => {
        conts[ind].scrollIntoView({ behavior: 'smooth' })
    })
})

scrollTo()

.滚动指定元素的内容，使其内部的滚动位置发生变化 - 平滑滚动到特定位置

.当你需要精确控制元素内部的滚动位置时使用

.适合用于实现自定义滚动效果或复杂布局

.可以使用选项式指定位置

.响应用户交互，如点击按钮滚动到特定内容

.实现无限滚动和分页加载

.固定头部或侧边栏等复杂布局需求

[] 返回顶部

使用 window

window.scrollTo(0, 0);

不要使用 body

document.body.scrollTo({ top: 0, left: 0, behavior: 'smooth' });

requestFullscreen()

.请求全屏，更多应用，请访问文档 Document - 全屏事件

getBoundingClientRect()

.只读属性

.获取元素位置的高频操作；用了都说好；更加方便

.返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置 - the size of an element and its position relative to the viewport

.描述整个矩形的位置和大小：left、top、right、bottom、x、y、width 、height

[] 背景跟随

CSS 变量

事件 Events

Mouse events

.更多鼠标事件信息，请访问 MouseEvent

.鼠标事件

item	desc
click	鼠标单击
dblclick	鼠标双击
mouseenter	鼠标进入
mouseleave	鼠标离开；不冒泡
mousemove	鼠标进入
mouseout	鼠标离开；冒泡
mouseover	鼠标悬停
mouseup	鼠标释放
contextmenu	右键菜单

[] 鼠标单击

1. 坠落 falling

.帧动画 animation

.变换 transform

.DOM

.BOM

2. 评分 rating

[] 鼠标跟随

1. 视口跟随

.通常跟随鼠标在视口内移动 clientY、clientY - 元素应脱离文档流固定定位 fixed

document.addEventListener('mousemove', (e) => {
  cursor.style.left = e.clientX - 15 + 'px'
  cursor.style.top = e.clientY - 15 + 'px'
})

2. 探照灯、探照灯 - CodePen

.鼠标跟随

.路径剪切 clip-path

const light = document.querySelector('.light')
document.addEventListener('mousemove', (e) => {
  let posx = e.clientX
  let posy = e.clientY
  light.style.setProperty('--x', `${posx}px`)
  light.style.setProperty('--y', `${posy}px`)
})

3. 元素跟随

.鼠标仅仅在某个元素内部跟随

.脱离文档流绝对定位 absolute

.局部范围内可以使用 pageX、pageY 配合 offsetX、offsetY

box.addEventListener('mousemove', fn);
function fn(e) {
    let x = e.pageX - box.offsetLeft - 15;
    let y = e.pageY - box.offsetTop - 15;
    img.style.left = x + 'px';
    img.style.top = y + 'px';
}

[] 禁止右键菜单

document.addEventListener('contextmenu', (e) => {
  e.preventDefault()
})

Keyboard events

.按键事件

.返回按键对应的编码 - provide a code indicating which key is pressed

.部分事件不能使用侦听，只能使用传统事件 onXXX

keypress 已废弃；请使用 keydown 代替

item	desc
keydown	按键按下 - when a key is pressed；fired for all keys
keyup	按钮释放 - when a key is released

常用属性
item	desc
e.key	按键名；如，enter、f、F12
e.keycode	按键编码\|键值\|键码；规范已不建议使用

常用键名
item	desc
数字1-9	1-9
字母a-zA-Z	a-zA-Z
回车	Enter
功能键F1-F12	F1-F12
上键	ArrowUp
下键	ArrowDown
左键	ArrowLeft
右键	ArrowRight
其它	Escape、Tab、Capslock、Shift、Control、Meta、Alt、Delete、Backspace
复合键，如shift+8是*	!、 @、 #、 $、 %、 ^、 &、 *、 (、 )

[] JD搜索优化

.页面任何位置按下 s，激活搜索框；为了避免在按下 s 键时，s 被当作值输入到输入框中，需要在触发 sqlBtn.focus() 后阻止默认行为

const sql = document.getElementById('sql');

document.addEventListener('keydown', (e) => {
  if (sqlBtn != document.activeElement && e.key === 's') {
    e.preventDefault()
    sqlBtn.focus()
  }
})

.如果搜索框是聚焦状态，按下 Escape，搜索框失去焦点

document.addEventListener('keyup', (e) => {
  console.log('keyup', e.key);
  if (sql === document.activeElement && e.key === 'Escape') {
    sql.blur()
  }
})

.输入过程中，按 Ctrl + Enter，提交信息

.如果要使用组合键，则可以利用 event.ctrlKey，event.shiftKey，event.altKey 判断是否按下了 Ctrl 键、Shift 键以及 Alt 键

  document.addEventListener('keydown', (e) => {
    if (sql === document.activeElement && e.ctrlKey && e.key === 'Enter') {
      console.log('hi');
    }
  })

[] JD快递单号查询

.为方便阅读，在原搜索框上方额外显示一个字体略大的提示框

.获取焦点时，如果内容不为空，则显示提示框

.失去焦点时，隐藏提示框

[] 禁止 F12 键

document.addEventListener('keydown', (e) => {
  if (e.key === 'F12') {
    e.preventDefault()
  }
})

Focus events

.表单元素事件；更多表单运用，请访问表单事件

item	desc
blur	失去焦点
focus	获取焦点

Animation events

.帧动画事件

item	desc
animationend	动画完全结束
animationstart	动画开始
animationcancel	动画取消
animationiteration	动画开始下一次迭代；多次动画

如果一个元素的帧动画执行2次，那么会依次输出 start iteration end

const box = document.querySelector('.box');
box.addEventListener('animationstart', () => {
    console.log('start');

})
box.addEventListener('animationend', () => {
    console.log('end');

})
box.addEventListener('animationiteration', () => {
    console.log('iteration');
})

[] 页面跳转/加载页

Transition events

.过渡动画事件

item	desc
transitionend	动画完全结束
transitionstart	动画开始
transitioncancel	动画取消
transitionrun	动画运行中

Scroll events

.元素的滚动事件

.元素应出现滚动条

.通常会采取节流措施 - fire at a high rate

item	desc
scroll	元素滚动时
scrollend	元素滚动结束

const wrap = document.querySelector('.wrap');
wrap.addEventListener('scroll', function () {
    console.log('scrolling');
})
wrap.addEventListener('scrollend', function () {
    console.log('end');
})

Clipboard events

.针对特定元素的内容的操作

.为了避免一个一个元素的操作，通常由 Document、Window统一处理

copy

cut

paste

[] 阻止页面复制和粘贴

document.addEventListener('copy', (e) => {
  e.preventDefault()
})
document.addEventListener('paste', (e) => {
  e.preventDefault()
})

Touch events

.触摸事件；移动端

item	desc
touchstart	触摸开始；触发一次
touchmove	触摸并移动；持续触发
touchend	触摸结束；触发一次
touchcancel	触摸取消/中断

.触摸事件属性

item	desc
targetTouches	触摸的手指个数
changedTouches	发生改变的触摸的手指个数；通常使用这个属性作为判断的依据

.优先触发移动端事件[移动优先]，普通单击事件会有延迟：为了判断用户是否要双击，所以第一次单击后，要延迟一定时间[300ms]，等待用户下一次单击。如果有，就是双击，否则判定为单击

.300ms 是早期的一个评估值，和硬件设备和用户操作有关系；目前通常在 100ms 左右

[解决方案]

.使用第三方插件 fastclick；既不影响桌面端使用，也可以在移动端正常使用

.封装 touch 函数

[] 事件触发顺序

let box = document.querySelector('.cont');
let data0, data1;
box.addEventListener('click', () => {
  data1 = new Date();
  console.log(data1 - data0);
  console.log('click');
})
box.addEventListener('touchstart', () => {
  data0 = new Date();
  console.log('touchstart');
})
box.addEventListener('touchend', () => {
  console.log('touchend');
})