DOM

一、理解DOM

文档对象模型, 将网页所有的内容表示为可修改的对象; 于是浏览器把每个元素都抽象成一个个对象, 通过JS访问这些对象, 从而进行操作页面

整个文档被抽象到document对象中

1、document.documentElement对应的是html元素

2、document.body对应的是body元素

3、document.head对应的是head元素

二、获取元素的方法

元素的导航

DOM提供的获取元素的方法

1、querySelector : CSS-selector

2、querySelectorAll : CSS-selector

3、getElementById : id

4、getElementByName : name

5、getElementByTagName : tag or *

6、getElementByClassName : class

三、节点的属性

tagName 属性仅适用于 Element 节点

nodeName 是为任意 Node 定义的

innerHTML 属性

1、将元素中的HTML获取为字符串的形式

2、设置元素中的内容

outerHTML 属性

1、包含了元素的完整HTML

2、innerHTML加上元素本身一样

textContent 属性

1、仅仅获取元素中的文本内容

innerHTML和textContent的区别

1、使用innerHTML, 我们将其“作为HTML”插入, 带有所有HTML标签

2、使用textContent, 我们将其“作为文本”插入, 所有符号(symbol)均按字面意义处理

nodeValue 属性

1、用于获取非元素节点的文本内容

hidden 属性

1、全局属性, 设置元素隐藏

四、元素的属性和特性

浏览器在解析HTML元素时, 会将对应的attribute也创建出来放到对应的元素对象上

1、比如id、class就是全局的attribute, 会有对应的id、class属性

2、比如href属性是针对a元素的, type、value属性是针对input元素的

attribute的分类

1、标准的attribute: 某些attribute属性是标准的, 比如id、class、href、type、value等

2、非标准的attribute: 某些attribute属性是自定义的, 比如abc、age、height等

attribute的操作

1、elem.hasAttribute(name) — 检查特性是否存在

2、elem.getAttribute(name) — 获取这个特性值

3、elem.setAttribute(name, value) — 设置这个特性值

4、elem.removeAttribute(name) — 移除这个特性

5、attributes:attr对象的集合，具有name、value属性

五、property

对于标准的attribute, 会在DOM对象上创建与其对应的property属性

在大多数情况下, 它们是相互作用的

1、改变property, 通过attribute获取的值, 会随着改变

2、通过attribute操作修改, property的值会随着改变

六、元素的className和classList

元素的class attribute, 对应的property叫className

对className进行赋值, 它会替换整个类中的字符串

使用classList属性添加或移除单个的class

elem.classList是一个特殊的对象

1、elem.classList.add (class) :添加一个类

2、elem.classList.remove(class):添加/移除类

3、elem.classList.toggle(class) :如果类不存在就添加类，存在就移除它

4、elem.classList.contains(class):检查给定类，返回 true/false

七、元素的style属性

boxEl.style.width = "50px"

读取style: getComputedStyle

getComputedStyle(boxEl).width

八、创建元素

const boxEl = document.querySelector(".box")
const h2El = ducument.createElement("h2")
h2El.innerHTML = "我是标题"
h2El.classList.add("title")
boxEl.append(h2El)

插入元素

1、node.append(...nodes or strings) —— 在 node 末尾 插入节点或字符串

2、node.prepend(...nodes or strings) —— 在 node 开头 插入节点或字符串

3、node.before(...nodes or strings) —— 在 node 前面 插入节点或字符串

4、node.after(...nodes or strings) —— 在 node 后面 插入节点或字符串

5、node.replaceWith(...nodes or strings) —— 将 node 替换为给定的节点或字符串

九、移除和克隆元素

boxEl.remove()

const cloneBoxEl = boxEl.cloneNode(true)
document.body.append(cloneBoxEl)

十、元素的大小、滚动

1、clientWidth:contentWith+padding(不包含滚动条)

2、clientHeight:contentHeight+padding

3、clientTop:border-top的宽度

4、clientLeft:border-left的宽度

5、offsetWidth:元素完整的宽度

6、offsetHeight:元素完整的高度

7、offsetLeft:距离父元素的x

8、offsetHeight:距离父元素的y

9、scrollHeight:整个可滚动的区域高度

10、scrollTop:滚动部分的高度

十一、window的大小、滚动

window的width和height

1、 innerWidth、innerHeight:获取window窗口的宽度和高度(包含滚动条)

2、outerWidth、outerHeight:获取window窗口的整个宽度和高度(包括调试工具、工具栏)

3、documentElement.clientHeight、documentElement.clientWidth:获取html的宽度和高度(不包含滚动条)

window的滚动位置

1、scrollX:X轴滚动的位置(别名pageXOffset)

2、scrollY:Y轴滚动的位置(别名pageYOffset)

3、方法 scrollBy(x,y) :将页面滚动至 相对于当前位置的 (x, y) 位置

4、方法 scrollTo(pageX,pageY) 将页面滚动至 绝对坐标

十二、常见的事件列表

鼠标事件

1、click —— 当鼠标点击一个元素时(触摸屏设备会在点击时生成)

2、mouseover / mouseout —— 当鼠标指针移入/离开一个元素时(支持冒泡, mouseenter和mouseleave不支持冒泡)

3、mousedown / mouseup —— 当在元素上按下/释放鼠标按钮时

4、mousemove —— 当鼠标移动时

键盘事件

1、keydown 和 keyup —— 当按下和松开一个按键时

表单元素事件

1、submit —— 当访问者提交了一个 <form> 时

2、focus —— 当访问者聚焦于一个元素时，例如聚焦于一个 <input>

Document事件

1、DOMContentLoaded —— 当 HTML 的加载和处理均完成，DOM 被完全构建完成时

CSS事件

1、transitionend —— 当一个 CSS 动画完成时

十三、事件对象

当一个事件发生时, 就会有和这个事件相关的很多信息

1、比如事件的类型是什么，你点击的是哪一个元素，点击的位置是哪里等等相关的信息

2、那么这些信息会被封装到一个Event对象中，这个对象由浏览器创建，称之为event对象

3、该对象给我们提供了想要的一些属性，以及可以通过该对象进行某些操作

如何获取event对象

1、event对象会在传入的事件处理(event handler)函数回调时，被系统传入

2、我们可以在回调函数中拿到这个event对象

spanEl.onclick = function(event) {
  console.log("事件对象", event)
}
spanEl.addEventListener("click" function(event) {
  console.log("事件对象", event)
})

event常见的属性和方法

常见的属性:

 type:事件的类型;

 target:当前事件发生的元素;

 currentTarget:当前处理事件的元素;

 eventPhase:事件所处的阶段;

 offsetX、offsetY:事件发生在元素内的位置;

 clientX、clientY:事件发生在客户端内的位置;

 pageX、pageY:事件发生在客户端相对于document的位置;

 screenX、screenY:事件发生相对于屏幕的位置;

常见的方法:

 preventDefault:取消事件的默认行为;

 stopPropagation:阻止事件的进一步传递(冒泡或者捕获都可以阻止);

十四、EventTarget类

addEventListener: 注册某个事件类型以及事件处理函数

removeEventListener: 移除某个事件类型以及事件处理函数

dispatchEvent: 派发某个事件类型到EventTarget上