【js】DOM基础 javascriptdom事件

DOM

基本概念
节点类型
节点样式
事件

1 基本概念 Document Object Model 文档对象模型
BOM：与浏览器交互的方法和接口
DOM：处理网页内容的方法和接口 - HTML和XML的应用程序接口
window是BOM的核心对象，window上的document是DOM的核心

任何HTML或XML文档都可以用DOM表示为一个由节点构成的 层级结构
使用 HTML Tree Generator扩展程序可以查看任意网页的DOM结构

Document
- Element html
  - Element head
    - Element title
  - 【【js】DOM基础】Element body
    - Text Hello World!
document为根节点类型为Document
根节点有一个唯一 子节点html，我们称之为文档元素documentElement，类型为Element
console.log(document); console.log(document.documentElement);

文章图片

可以看到document返回的是完整的文档，documentElement只是html节点

2 节点类型总共12种，这里仅部分介绍

Node
Document
Element
Text
Comment
CDATASection
DocumentType
DocumentFragment
Attr

2.1 Node类型
所有节点类型都继承Node类型，所以所有节点类型都共享相同的基本属性与方法

console.dir(Document) console.dir(Text); console.dir(DocumentFragment);

文章图片

文章图片

其他节点类型都对Node类型进行了引用
2.1.1 Node类型的属性节点类型静态属性

Node.DOCUMENT_NODE：9
Node.ELEMENT_NODE：1
Node.TEXT_NODE：3
Node.COMMENT_NODE：8
Node.CDATA_TYPE_NODE：4
Node.DOCUMENT_TYPE_NODE：10
Node.DOCUMENT_FRAGMENT_NODE：11
Node.ATTRIBUTE_NODE：2

节点信息

baseURL：节点绝对基址，等价于location.href
isConnected：是否与DOM树连接
nodeName：当前节点名称
nodeValue：返回或设置当前节点的值

默认情况下，文档节点返回 null，对于text，comment，CDATA返回 文本内容，对于attribute返回该属性的 属性值
nodeType：按上述对应关系返回节点类型的数值

console.log(document.nodeType); //9 console.log(document.documentElement.nodeType); //1
ownerDocument：返回当前节点的顶层document对象
textContent：返回当前节点以及所有子节点的文本内容包括script标签这种页面内不可见的脚本

document与DOCTYPE类型返回 null

节点关系

childNodes：返回子节点的类数组对象NodeList，该对象会及时更新
firstChild：第一个子节点
lastChild：最后一个子节点
previousSibling：前一个兄弟节点
nextSibling：后一个兄弟节点
parentNode：返回父节点
parentElement：返回父元素，nodeType不为1时返回null

2.1.2 Node类型上的方法操作节点

appendChild(child)：将一个节点附加到父节点的子节点列表的末尾，若父节点已存在直接将该节点移动至末尾
insertBefore(newNode,referenceNode)：指定位置插入至某节点之前，若已经存在则只移动不添加

const div = document.createElement('div') div.textContent = '123' const html = document.documentElement html.insertBefore(div, html.childNodes[1]) console.log(document);

文章图片
cloneNode(deep)：克隆一个节点副本，deep为true时，子节点同时被克隆
replaceNode(newChild,oldChild)：替换当前节点的一个子节点，返回被替换的节点
removeChild(child)：删除当前节点的一个子节点，返回该节点
normalize()：节点规范化，删除空文本节点，相邻文本节点合并

节点信息

hasChildNodes()：当前节点是否有子节点
contains(otherNode)：节点参数是否是该节点的子节点，是否包含
isEqualNode(otherNode)：两个节点是否相等
compareDocumentPosition(otherNode)：参数节点与该节点的位置关系

返回值：1 - 不在同一文档，2 - 之前，4 - 之后，8 - 包含，16 - 被包含，32 -待定。这些值会累加，当otherNode被包含时为16+4=20
getRootNode(options)：返回上下文的根节点

命名空间

lookupNamespaceURI()：返回当前节点与指定命名空间前缀绑定的命名空间URI，对动态指定的命名空间不起作用
lookupPrefix()：同上
isDefaultNamespace(URI)：是否为默认命名空间

2.2 Document类型
浏览器中的document对象是HTMLDocument的实例，HTMLDocument又继承了Document，document可以使用Document类型上的属性与方法
2.2.1 Document上的属性

body：取得对的引用
doctype：取得对的引用
head：对head的引用

文档信息

title：读取或修改浏览器标题，不会修改title元素
cookie：返回一个使用分号分隔的cookie列表，可写入

连续的赋值不会覆盖，而是相当于添加的操作，过期时间添加expires=到期时间
readyState：文档加载状态
lastModified：文档最后修改时间
scripts：返回所有script元素
images：返回文档图片列表
links：返回文档中所有超链接列表
forms：返回所有便当元素
plugins：返回插件列表
activeElement：返回获得焦点的元素
charaterSet：返回当前文档的字符编码
compatMode：表明当前文档模式是怪异模式还是标准模式
designMode：on|off，控制文档是否可编辑

节点信息

children：相较于childNodes，它不包括文本节点与注释
childElementCount：相当于children.length
firstElementChild：第一个元素节点
lastElementChild：最后一个元素节点
previousElementSibling
nextElementSibling

2.2.2 Document上的方法与Node对比

adoptNode(externalNode)：从其他文档剪切一个节点导入当前文档

可用于对iframe的操作
imporNode(externalNode,deep)：从其他文档拷贝一个节点导入当前文档，deep是否拷贝子节点
append(...Node|DOMString)：相较于appendChild，它支持多个参数并且可以传入字符串作为Text类型节点
prepend(...)：开始位置插入
replaceChildren(...)：将原文档集合替换为一个新的文档集合

文档写入

open()：打开一个文档
write('html')：写入内容
write('html')：写入内容并换行
close()：关闭文档

创建节点

createElement(tagName)：返回新建的元素
createElementNS(namespaceURI,qualifiedName)：返回指定命名空间URI和限定名称的元素
createTextNode(data)：返回一个文本节点
createComment(data)：返回一个注释节点
createCDATASection(data)：返回一个CDATA片段节点
createDocumentFragment()：返回一个空白文档片段

DocumentFragments是DOM节点但不是DOM树的一部分，文档片段存于 内存中，将子节点插入到文档片段是不会引起页面 回流，性能佳
createAttribute(name)：返回一个Attr节点，设置该节点的value属性可设置属性值

获取节点

getElementById(id)：指定id的节点
getElementsByClassName(class)：指定类名的节点NodeList
getElementsByName(name)：指定name的节点NodeList
getElementsByTagName(tag)：指定标签名
getElementsByTagName(namespace,tag)：指定命名空间下的标签集合
querySelector(selectors)：返回指定一组CSS选择器匹配的第一个元素
querySelectorAll(selectors)：返回一个静态的NodeList，采用深度优先遍历

2.3 Element类型
表示XML或HTML元素，对外暴露出访问元素标签名、子节点和属性的能力
2.3.1 Element上的属性节点信息

attributes：返回该元素所有属性节点的实时集合
id：节点属性
className：class属性值
tagName：标签名 - 大写

元素尺寸

clientHeight/Width：content + padding
offsetHeight/Width：border + client
scrollHeight/Width：无滚动条时，元素内容大小，与client相同，不计算边框

元素位置

clientLeft/Top：边框宽度
offsetLeft/Top：元素边框到offsetParent边框的距离
scrollLeft/Top：滚动的距离

常对documentElement使用

元素内容

innerHTML：与textContent相比，它不能发挥隐藏的文本，会触发回流，写入文本时避免使用
outerHTML：innerHTML + 本元素，可以连同自己一块处理

2.3.2 Element上的一些方法操作节点

after(...nodes)：在其父元素子节点列表中插入节点
before(...nodes)
append(...nodes)
perpend(...nodes)
remove()：从所属DOM树中删除

获取属性

hasAttribute(name)：是否有某个属性
hasAttributeNS(namespace,name)：该元素是否包含指定的元素
getAttribute(name)：返回元素属性值
getAttributeNames()：返回元素属性名称的数组
getAttributeNode(name)：返回指定元素的指定属性节点
getAttributeNodeNS(namespace,name)：通过命名空间URI和名称来获取属性节点

属性操作

setAttribute(name,value)：有则更新，无则添加
removeAttribute(name)：删除一个属性
setAttributeNode(attr)
removeAttributeNode(attrNode)

2.4 Text类型

appendData(text)：尾部添加文本
deleteData(offset,count)：从位置offset开始删除count个字符
replaceData(offset,count,text)：用text替换从位置offset到offset+count的文本
insetData(offset,text)：从offset开始插入文本
splitText(offset)：在位置offset拆分为两个文本节点
substringData(offset,count)：提取从offset到offset+count的文本

3 元素样式 document.style.attr：读取与设置元素的样式
3.1 style上的方法

getPropertyValue(name)：返回属性值
getPropertyPriority(name)：检测是否使用了important
removeProperty(name)
setProperty(name,value,priority)

3.2 计算样式

getComputedStyle(elem,pseudoElt)：返回页面展示的元素最终的样式对象
currentStyle.attr：当前样式IE

在做运动处理时，会经常使用offset，但是它不仅仅只有宽高，计算移动时容易出现反方向的bug，计算样式可以解决这个问题

4 事件 DOM事件流

捕获阶段：从根节点开始查找
到达目标：寻找到目标元素的目标事件
冒泡阶段：从目标元素向上传递

事件绑定
DOM事件对象
事件类型

4.1 事件绑定

const oBtn = document.getElementsByTagName('button') function handle() { console.log('事件1'); } oBtn[0].addEventListener('click', handle) oBtn[1].onclick = () => { console.log('事件2'); oBtn[0].removeEventListener('click', handle) console.log('解绑事件1'); }