【js】DOM基础

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);

    【js】DOM基础_第1张图片

    可以看到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);

【js】DOM基础_第2张图片
【js】DOM基础_第3张图片
【js】DOM基础_第4张图片
其他节点类型都对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);

    【js】DOM基础_第5张图片

  • 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事件流

  • 捕获阶段:从根节点开始查找
  • 到达目标:寻找到目标元素的目标事件
  • 冒泡阶段:从目标元素向上传递
  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输入字符时触发

事件处理程序

你可能感兴趣的