【js】DOM基础

头像
怼怼
    阅读 6 分钟

    DOM

    1. 基本概念
    2. 节点类型
    3. 节点样式
    4. 事件

    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

        • Element body

          • Text Hello World!
      document为根节点类型为Document
      根节点有一个唯一子节点html，我们称之为文档元素documentElement，类型为Element
      console.log(document);
console.log(document.documentElement);

      image.png

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

    2 节点类型

    总共12种，这里仅部分介绍

    1. Node
    2. Document
    3. Element
    4. Text
    5. Comment
    6. CDATASection
    7. DocumentType
    8. DocumentFragment
    9. Attr

    2.1 Node类型

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

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

    image.png
    image.png
    image.png
    其他节点类型都对Node类型进行了引用

    2.1.1 Node类型的属性

    节点类型 静态属性

    1. Node.DOCUMENT_NODE：9
    2. Node.ELEMENT_NODE：1
    3. Node.TEXT_NODE：3
    4. Node.COMMENT_NODE：8
    5. Node.CDATA_TYPE_NODE：4
    6. Node.DOCUMENT_TYPE_NODE：10
    7. Node.DOCUMENT_FRAGMENT_NODE：11
    8. 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);

      image.png

    • 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：取得对<body></body>的引用
    • doctype：取得对<!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事件流

    • 捕获阶段：从根节点开始查找
    • 到达目标：寻找到目标元素的目标事件
    • 冒泡阶段：从目标元素向上传递
    1. 事件绑定
    2. DOM事件对象
    3. 事件类型

    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');
}
    如果需要解绑，不能使用匿名函数

    4.2 DOM事件对象

    event对象是传给事件处理程序的唯一参数

    event的属性

    • bubbles：是否冒泡
    • cancelable：是否可取消事件默认行为
    • currentTarget：当前元素
    • defaultPrevented：是否调用了对应的方法
    • eventPhase：事件处理的阶段1 2 3
    • type：事件类型
    • target：事件目标

    event的方法

    • preventDefault()：阻止默认行为
    • stopPropagation() :取消所有后续事件捕获或事件冒泡
    • stopImmediatePropagation()：取消所有后续事件捕获或事件冒泡，并阻止调用任何后续事件处理程序
    this始终指向currentTarget，target才是事件目标

    4.3 事件类型

    • 用户界面事件
    • 焦点
    • 鼠标
    • 滚轮
    • 输入
    • 键盘
    • 合成：在某种IME输入字符时触发

    事件处理程序

    javascriptdom事件
    怼怼
    73 声望6 粉丝
    « 上一篇
    【js】BOM基础
    下一篇 »
    【vue】虚拟DOM与Diff算法

    引用和评论

    推荐阅读
    头像
    【Vue2源码分析与实现】（一）变化侦测

    怼怼赞 1阅读 937

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.5k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.8k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.8k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.8k

    头像
    开发插件集合

    寒青赞 12阅读 3.2k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新