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

    能够看到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);




其余节点类型都对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);//9console.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.documentElementhtml.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：获得对<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输出字符时触发

事件处理程序