DOM：节点、元素与事件

节点继与元素

dom树的继承关系

节点

如上图关系可得出结论：

1. 节点包含元素
2. 节点包含文本，元素，注释，空行等
3. 通过以下方法拿到的结果也是节点

元素

元素 是指 html标签

元素有以下方法获取，返回的结果也是元素

节点和元素之间的关系

1. 节点包含元素、文本、注释、document等
2. 元素是节点的 子类，是一种节点

❗ 提示

元素是节点，节点不一定是元素，所以元素拥有节点的方法，节点不一定拥有元素的方法

获取元素的方法

1. 特点

❗ 提示

1. 支持在元素上调用意味着可以获取到某个元素后，还可以链式调用
2. 实时的意味着，获取元素后再通过js添加元素，是否会更新到前面的获取结果中

1. 通过类名获取getElementsByClassName

const appElList  = document.getElementsByClassName('app')
//获取一个元素的集合---并非数组，类数组 伪数组，是一个对象 

1. 通过ID获取

const appEl = document.getElemetById('app')
//获取单个元素

1. 通过选择器获取--使用最多

//单个元素
document.querySelector()

//多个元素的类数组
document.querySelectorAll()

1. 标签名获取

//tag or *
document.getElementsByTagName()
//一个类数组

1. 通过名称获取

document.getElementsByName()
//获取一个类数组，如form表单item会有name属性

节点属性

nodeType

❗ 提示

节点类型，常量和数值都可以 1 or ELEMENT_NODE 元素 3 or TEXT_NODE 文本

nodeName

❗ 提示

节点名称，返回节点的名称 如DIV #text #comment

innerHtml

❗ 提示

innerHtml 获取包含标签的内容，设置时同理

Data

❗ 提示

Data/nodeValue 获取非文本属性获取内容

outerHtml

❗ 提示

outerHtml 获取包含自身标签的内容

textContent

❗ 提示

textContent 仅获取文本内容，设置时同理

元素属性

属性分类：

标准属性

❗ 提示

html中规定属性

自定义属性

❗ 提示

自定义的属性，一般以 data- 为前缀

attribute

特点：

• 所有属性都支持的操作（自定义和标准属性）
• elem.hasAttribute(name) — 检查特性是否存在。
• elem.getAttribute(name) — 获取这个特性值。
• elem.setAttribute(name, value) — 设置这个特性值。
• elem.removeAttribute(name) — 移除这个特性。
• attributes：attr对象的集合，具有name、value属性；
• 它们的名字是大小写不敏感的（id 与 ID 相同）。
• 它们的值总是字符串类型的。

property与attribute的区别

• attribute属性是通过方法来获取和设置，对所有属性都生效
• property是通过对象来操作属性，仅仅html标准属性生效

<div id="app" age="18"></div>

<script>
const appEl = document.querySelector('#app')

//attribute的方法获取
appEl.getAttribute('age') //可以获取age的值
appEl.getAttribute('id') //可以获取id的值

//property的方式获取，自定义数值age无法获取
appEl.age//不能age的值，
appEl.id //可以获取id的值，

</script>

元素全局属性

id、hidden、title、class、style

style和class设置

1. style 是一个对象，属性都要使用小驼峰获取或者设置

const appEl = document.querySelector('#app')
appEl.style.color='red'//重设某个样式
appEl.style.cssText='font-size:18px' //会替换所有的行内样式

getComputedStyle(appEl).fontSize  //全局方法，元素样式获取（包含在class中的样式）

1. class 需要使用className（会替换）或者classList（有添加移除以及包含等操作方法）

const elem = document.querySelector('#app')
elem.classList.add (class) 
//添加一个类 
elem.classList.remove(class)
//添加/移除类。 
elem.classList.toggle(class) 
//如果类不存在就添加类，存在就移除它。
elem.classList.contains(class)
//检查给定类，返回 true/false。

创建元素

1. 创建元素的方法

const newEl = document.createElement(tag) 

1. 添加元素的方法（推荐使用的方法）

//newEl可以是多个元素
Elem.append(newEl,...) //添加到Elem的子元素后
Elem.prepend(newEl) //添加到Elem的子元素前

Elem.before(newaEl) //Elem的前面，成为兄弟元素
Elem.after(newEL)  //Elem的后面，成为兄弟元素

Elem.repalceWith(newEl) //替换掉Elem元素

元素的移除和clone

1. 元素的移除

const appEl = document.querySelector('#app')
appEl.remove()//直接调用自身的remove方法，元素和子元素都会被移除

//复制的是节点哦
const cloneNode =  appEl.cloneNode(true) 
//复制一份，参数是表示是否递归复制子元素，默认为false，不复制
//复制后还需要插入才能显示

元素的大小尺寸位置信息

clientWith clientHeight   contentWidth  + padding  
//内容+内边距 无单位数值 单位是px 不包含滚动条

offsetWidth offsetHeight 
//元素的完整大小

scrollWidth scrollHeight 
//可滚动区域大小

scrollTop scrollLeft 
// 已滚动的大小

offsetLeft offsetTop 
// 距离最近的父元素（指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 
// table, td, th, body 元素）相对于其内边距边界的

window的属性和事件

1. 属性

//内容区域的大小
innerHeight 
innerWidth 
//窗口的滚动位置
scrollX 
scrollY 

1. 方法

scrollBy(x,y) //每次滚动的增量
scroollTo(x,y) //滚动到具体的坐标

元素事件处理

事件监听的方案

1. 元素的事件属性如onClick,也可以写到行内

const appEl = document.querySelector('#app')
appEl.onClick = function(){
  console.log(123)
}

addEventListener(name,func)
  const appEl = document.querySelector('#app')
  appEl.addEventListener('click',function(){
  console.log(123)
}) 

事件流

❗ 提示

为什么会有两种事件流的传递方案？ 早期的ie使用的冒泡，netscape使用的捕获方案， 现在两个过程都存在，为了兼容

1. 事件流的完整触发过程是： 事件捕获-->触发元素绑定的事件回调-->事件冒泡

事件冒泡：

❗ 提示

子元素触发的事件会往外向父元素传递到body的过程 --浏览器的默认处理方案

const appEl = document.querySelector('#app')
appEl.addEventListener('click',function(){
console.log(123)
}) 
//默认是事件冒泡的过程

事件捕获：

❗ 提示

元素触发的事件从body向触发元素传递的过程 -- 可以使用addEventListener传递第3个参数为true

const appEl = document.querySelector('#app')
appEl.addEventListener('click',function(){
  console.log(123)
},true) 
//第3个参数为true，则是事件捕获的过程

事件对象 event

事件回调时传递回的参数

属性

1. type

❗ 提示

事件类型，比如点击、双击

1. eventPhase

❗ 提示

事件阶段 1 -> 捕获阶段 2 -> 触发元素 3 -> 冒泡阶段

1. target

❗ 提示

事件发生的对象，因为事件流的存在，事件触发的对象和正在进行事件处理的对象可能并不是同一个

1. currentTarget

❗ 提示

当前事件处理的元素，可能并不是触发的事件的对象

方法

1. 阻止默认事件 preventDefault
2. 阻止事件冒泡 stopPropagation 阻止后不会向外传播

事件委派

1. 定义

❗ 提示

多个子元素的相同事件，通过事件冒泡，委派给父元素或者祖先元素处理，这个模式称为事件委派或者事件委托、事件代理

1. 应用

❗ 提示

组件事件可以通过 判断触发事件的具体子元素，分发不同的处理逻辑