JavaScript&&DOM&&BOM

前端MarkDown

# JavaScript&&DOM&&BOM

DOM（Document Object Model），文档对象模型。

# Element对象

一个Element对象表示一个HTML元素，它的子节点可以是元素节点、文本节点、注释节点。NodeList表示节点列表。

Element对象继承了Node对象，而HTMLElement继承了Element对象，这节实际上指HTMLElement对象。

# 常用方法

# getAttribute

# appendChild

# 常用属性

# id

# innerHTML

# className

# title

# style

# scrollTop...

# offsetTop

# 尺度

# offsetWidth

# clientWidth

# scrollWidth

# innerWidth

# outerWidth

# 更改内容

# innerHTML

设置和获取标签内的HTML文本。

# outerHTML

设置和获取该节点（包括HTML标签）的HTML文本。

# innetText

设置和获取标签内的文本内容。

# textContent

用于设置和获取标签中的文本内容。与innerText类似，但textContent可以获取到script、style或其他元素的内容，并且会返回由css隐藏的文本，textContent改变也不会触发重排（reflow）。以及，直接对innetText修改可能会破坏元素的后代文本节点。

# event 事件

# addEventListener

element.addEventListener(eventName, function(event), userCapture=false)

其中this绑定被点击的元素（即target）。如果function返回了false，相当于同时执行了preventDefault与stopPropagation。

# preventDefault

event.preventDefault()

比如链接就不会被打开，但是仍然会传递事件。

# stopPropagation

见‘阻止事件冒泡’。

# stopImmediatePropagation

不仅阻止事件传递，还阻止对同一事件监听的监听器执行。绑定事件的先后顺序形成了触发的先后顺序，如果执行stopImmediatePropagation，添加顺序在它之后的事件将不会执行。

# target和currentTarget的区别

target：触发事件的元素

currentTarget：绑定事件的元素

target是点击的元素节点，也是事件真正的发出者，可能不同的元素触发同一事件；currentTarget是注册了侦听器的节点。在事件流中，目标阶段对应target，而捕获/冒泡、目标阶段都有可能对应currentTarget。

# 捕获、冒泡

DOM响应事件的过程包括捕获阶段、目标阶段、冒泡阶段，事件捕获自最外层元素（html）到target元素（最底层元素），然后又冒泡，将事件传递到最外层。

每一次点击都会从最外层传递到点击的最底层元素那里，然后又传递到最外层，因此，如果click同时绑定了捕获和冒泡模式下的事件，会先触发捕获事件，再触发冒泡事件。

# 阻止事件冒泡

event.stopPropagation()在某一级事件处理程序中运行这句代码就可以中止传播过程。也可以利用event.target==this，比较触发事件的元素与当前收到事件的元素，如果不是那么不执行。

# 事件委托

为过多元素绑定事件会带来不必要的内存开销，因此对于列表等情况，由父元素接受事件并判断、控制子元素能够优化性能。JQuery提供on、delegate方法支持事件委托。

# touch 触摸

首先，我们假定一次触摸事件是从第一根手指按下到最后一根手指移开。

# touches

包括当前所有触摸点的数组（手指离开时是空数组）。

# targetTouches

包括触发touchstart事件对象上所有触摸点的数组。如果两根手指分别位于触发元素的内部和外部，它只会包括内部的触摸点。注意不是绑定touch事件的元素，是触发touch事件的元素。

# changedTouches

在当前触摸事件中，变化的触摸点的数组。例如两根手指同时按下，changedTouches包括这两个触摸点，移开一个手指，changedTouches又会包括这个离开的触摸点。即使触摸事件结束，changedTouches也会包括最后离开的触摸点。

# position 位置

# clientX/Y

相对于可视区域

# screenX/Y

相对于屏幕

# pageX/Y

相对于网页

# 文件上传

# Formdata

let formData = new FormData();
formData.append('file', fileInputElement.files[0]);

let content = `love like you've never been hurt`
let blob = new Blob([content],{type:"text"})

# FormData.append()

FormData.append(name, value[, filename])

向FormData添加数据，value支持Blob、File、string类型，filename可选。

# Blob

Blob对象表示一个不可变、原始数据的类文件对象，不一定是JavaScript原生格式的数据。File接口基于Blob，继承并扩展了Blob。新建Blob的配置中，type指MIMIE类型。

# URL对象

# createObjectURL

objectURL=URL.createObjectURL(object)

其中Object的类型为FIle、Blob或MediaSource。

它返回一个指向对象的DOMString，形如blob:https://mdn.mozillademos.org/8fc61dff-86bd-4ec7-ae2f-62d8df690d45。

# 参考

MDN

developer.mozilla.org

最后更新: 7/15/2020, 4:10:16 PM