DOM完整内容

阿聪_
367 阅读8分钟

重要概念

DOM

文档对象模型（DOM，Document Object Model）是 HTML 和 XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。

节点（node)

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点的类型有七种

  • Document：整个文档树的顶层节点
  • DocumentType：doctype标签（比如<!DOCTYPE html>）
  • Element：网页的各种HTML标签（比如<body>、<a>等）
  • Attr：网页元素的属性（比如class="right"）
  • Text：标签之间或标签包含的文本
  • Comment：注释
  • DocumentFragment：文档的片段

    浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法。

节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，又像一棵树。

浏览器原生提供document节点，代表整个文档。

  • document:整个文档树
  • 文档的第一层有两个节点:
    • 第一个是文档类型节点（<!doctype html>），
    • 第二个是 HTML 网页的顶层容器标签<html>。构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点。
  • 除了根节点，其他节点都有三种层级关系:
    • 父节点关系（parentNode）：直接的那个上级节点
    • 子节点关系（childNodes）：直接的下级节点
    • 同级节点关系（sibling）：拥有同一个父节点的节点

      DOM 提供操作接口，用来获取这三种关系的节点。比如，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。

Node接口

阮一锋 - Node接口

  • 属性
    • Node.prototype.nodeType
    • Node.prototype.nodeName
    • Node.prototype.nodeValue
    • Node.prototype.textContent
    • Node.prototype.baseURI
    • Node.prototype.ownerDocument
    • Node.prototype.nextSibling
    • Node.prototype.previousSibling
    • Node.prototype.parentNode
    • Node.prototype.parentElement
    • Node.prototype.firstChild，Node.prototype.lastChild
    • Node.prototype.childNodes
    • Node.prototype.isConnected
  • 方法
    • Node.prototype.appendChild()
    • Node.prototype.hasChildNodes()
    • Node.prototype.cloneNode()
    • Node.prototype.insertBefore()
    • Node.prototype.removeChild()
    • Node.prototype.replaceChild()
    • Node.prototype.contains()
    • Node.prototype.compareDocumentPosition()
    • Node.prototype.isEqualNode()，Node.prototype.isSameNode()
    • Node.prototype.normalize()
    • Node.prototype.getRootNode()

NodeList接口，HTMLCollection 接口

  • 节点都是单个对象，有时需要一种数据结构，能够容纳多个节点。DOM 提供两种节点集合，用于容纳多个节点：NodeList和HTMLCollection。
  • 这两种集合都属于接口规范。许多 DOM 属性和方法，返回的结果是NodeList实例或HTMLCollection实例。主要区别是，NodeList可以包含各种类型的节点，HTMLCollection只能包含 HTML 元素节点。

NodeList 接口

概述

  • NodeList实例是一个类似数组的对象，它的成员是节点对象。
  • 通过以下方法可以得到NodeList实例。
    • Node.childNodes
    • document.querySelectorAll()等节点搜索方法

属性

  • NodeList.prototype.length

方法

  • NodeList.prototype.forEach()
  • NodeList.prototype.item()
  • NodeList.prototype.keys()，NodeList.prototype.values()，NodeList.prototype.entries()

HTMLCollection 接口

概述

  • HTMLCollection是一个节点对象的集合，只能包含元素节点（element），不能包含其他类型的节点。它的返回值是一个类似数组的对象，但是与NodeList接口不同，HTMLCollection没有forEach方法，只能使用for循环遍历。

属性

  • HTMLCollection.prototype.length

方法

  • HTMLCollection.prototype.item()
  • HTMLCollection.prototype.namedItem()

ParentNode 接口，ChildNode 接口

阮一锋 - ParentNode 接口，ChildNode 接口

  • 节点对象除了继承 Node 接口以外，还拥有其他接口。
  • ParentNode接口表示当前节点是一个父节点，提供一些处理子节点的方法。
  • ChildNode接口表示当前节点是一个子节点，提供一些相关方法

ParentNode 接口

概述

  • 如果当前节点是父节点，就会混入了（mixin）ParentNode接口。由于只有元素节点（element）、文档节点（document）和文档片段节点（documentFragment）拥有子节点，因此只有这三类节点会拥有ParentNode接口。

属性

  • ParentNode.children
  • ParentNode.firstElementChild
  • ParentNode.lastElementChild
  • ParentNode.childElementCount

方法

  • ParentNode.append()
  • ParentNode.prepend()

ChildNode 接口

概述

  • 如果一个节点有父节点，那么该节点就拥有了ChildNode接口。

方法

  • ChildNode.remove()
  • ChildNode.before()，ChildNode.after()
  • ChildNode.replaceWith()

Document 节点

阮一锋 - Document 节点

概述

  • document节点对象代表整个文档，每张网页都有自己的document对象。
  • window.document属性就指向这个对象。只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。
  • document对象有不同的办法可以获取。
    • 正常的网页，直接使用document或window.document。
    • iframe框架里面的网页，使用iframe节点的contentDocument属性。
    • Ajax 操作返回的文档，使用XMLHttpRequest对象的responseXML属性。
    • 内部节点的ownerDocument属性。
  • document对象继承了EventTarget接口和Node接口，并且混入（mixin）了ParentNode接口。这意味着，这些接口的方法都可以在document对象上调用。除此之外，document对象还有很多自己的属性和方法。

属性

  • 快捷方式属性
    • document.defaultView
    • document.doctype
    • document.documentElement
    • document.body，document.head
    • document.scrollingElement
    • document.activeElement
    • document.fullscreenElement
  • 节点集合属性
    • document.links
    • document.forms
    • document.images
    • document.embeds，document.
    • document.scripts
    • document.styleSheets

    除了document.styleSheets，以上的集合属性返回的都是HTMLCollection实例。

  • 文档静态信息属性
    • document.documentURI，document.URL
    • document.domain
    • document.location
    • document.lastModified
    • document.title
    • document.characterSet
    • document.referrer
    • document.dir
    • document.compatMode
  • 文档状态属性
    • document.hidden
    • document.visibilityState
    • document.readyState
  • document.cookie
  • document.designMode
  • document.currentScript
  • document.implementation

方法

  • document.open()，document.close()
  • document.write()，document.writeln()
  • document.querySelector()，document.querySelectorAll()
  • document.getElementsByTagName()
  • document.getElementsByClassName()
  • document.getElementsByName()
  • document.getElementById()
  • document.elementFromPoint()，document.elementsFromPoint()
  • document.createElement()
  • document.createTextNode()
  • document.createAttribute()
  • document.createComment()
  • document.createDocumentFragment()
  • document.createEvent()
  • document.addEventListener()，document.removeEventListener()，document.dispatchEvent()
  • document.hasFocus()
  • document.adoptNode()，document.importNode()
  • document.createNodeIterator()
  • document.createTreeWalker()
  • document.execCommand()，document.queryCommandSupported()，document.queryCommandEnabled()
  • document.getSelection()

Element节点

概述

  • Element节点对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）。
  • 元素节点的nodeType属性都是1。
  • Element对象继承了Node接口，因此Node的属性和方法在Element对象都存在。
  • 此外，不同的 HTML 元素对应的元素节点是不一样的，浏览器使用不同的构造函数，生成不同的元素节点，比如<a>元素的构造函数是HTMLAnchorElement()，<button>是HTMLButtonElement()。因此，元素节点不是一种对象，而是许多种对象，这些对象除了继承Element对象的属性和方法，还有各自独有的属性和方法。

实例属性

  • 元素特性的相关属性
    • Element.id
    • Element.tagName
    • Element.dir
    • Element.accessKey
    • Element.draggable
    • Element.lang
    • Element.tabIndex
    • Element.title
  • 元素状态的相关属性
    • Element.hidden
    • Element.contentEditable，Element.isContentEditable
  • Element.attributes
  • Element.className，Element.classList
  • Element.dataset
  • Element.innerHTML
  • Element.outerHTML
  • Element.clientHeight，Element.clientWidth
  • Element.clientLeft，Element.clientTop
  • Element.scrollHeight，Element.scrollWidth
  • Element.scrollLeft，Element.scrollTop
  • Element.offsetParent
  • Element.offsetHeight，Element.offsetWidth
  • Element.offsetLeft，Element.offsetTop
  • Element.style
  • Element.children，Element.childElementCount
  • Element.firstElementChild，Element.lastElementChild
  • Element.nextElementSibling，Element.previousElementSibling

实例方法

  • 属性相关方法

    元素节点提供六个方法，用来操作属性。

    • getAttribute()：读取某个属性的值
    • getAttributeNames()：返回当前元素的所有属性名
    • setAttribute()：写入属性值
    • hasAttribute()：某个属性是否存在
    • hasAttributes()：当前元素是否有属性
    • removeAttribute()：删除属性
  • Element.querySelector()
  • Element.querySelectorAll()
  • Element.getElementsByClassName()
  • Element.getElementsByTagName()
  • Element.closest()
  • Element.matches()
  • 事件相关方法

    以下三个方法与Element节点的事件相关。这些方法都继承自EventTarget接口，详见相关章节。

    • Element.addEventListener()：添加事件的回调函数
    • Element.removeEventListener()：移除事件监听函数
    • Element.dispatchEvent()：触发事件
  • Element.scrollIntoView()
  • Element.getBoundingClientRect()
  • Element.getClientRects()
  • Element.insertAdjacentElement()
  • Element.insertAdjacentHTML()，Element.insertAdjacentText()
  • Element.remove()
  • Element.focus()，Element.blur()
  • Element.click()

属性的操作

Element.attributes 属性

  • 元素对象有一个attributes属性，返回一个类似数组的动态对象，成员是该元素标签的所有属性节点对象，属性的实时变化都会反映在这个节点对象上。其他类型的节点对象，虽然也有attributes属性，但返回的都是null，因此可以把这个属性视为元素对象独有的。
  • 单个属性可以通过序号引用，也可以通过属性名引用。

元素的标准属性

属性操作的标准方法

元素节点提供六个方法，用来操作属性。

  • getAttribute()
  • getAttributeNames()
  • setAttribute()
  • hasAttribute()
  • hasAttributes()
  • removeAttribute()

dataset 属性

Text 节点和 DocumentFragment 节点

Text 节点

Text 节点的概念

  • 文本节点（Text）代表元素节点（Element）和属性节点（Attribute）的文本内容。如果一个节点只包含一段文本，那么它就有一个文本子节点，代表该节点的文本内容。
  • 通常我们使用父节点的firstChild、nextSibling等属性获取文本节点，或者使用Document节点的createTextNode方法创造一个文本节点。
  • 浏览器原生提供一个Text构造函数。它返回一个文本节点实例。它的参数就是该文本节点的文本内容。
  • 文本节点除了继承Node接口，还继承了CharacterData接口。

Text 节点的属性

  • data
  • wholeText
  • length
  • nextElementSibling，previousElementSibling

Text 节点的方法

  • appendData()，deleteData()，insertData()，replaceData()，- subStringData()
  • remove()
  • splitText()

DocumentFragment 节点

CSS 操作

HTML 元素的 style 属性

  • 操作 CSS 样式最简单的方法，就是使用网页元素节点的getAttribute()方法、setAttribute()方法和removeAttribute()方法，直接读写或删除网页元素的style属性。

CSSStyleDeclaration 接口

简介

  • CSSStyleDeclaration 接口用来操作元素的样式。三个地方部署了这个接口。
    • 元素节点的style属性（Element.style）
    • CSSStyle实例的style属性
    • window.getComputedStyle()的返回值

    CSSStyleDeclaration 接口可以直接读写 CSS 的样式属性，不过，连词号需要变成骆驼拼写法。

CSSStyleDeclaration 实例属性

  • CSSStyleDeclaration.cssText
  • CSSStyleDeclaration.length
  • CSSStyleDeclaration.parentRule

CSSStyleDeclaration 实例方法

  • CSSStyleDeclaration.getPropertyPriority()
  • CSSStyleDeclaration.getPropertyValue()
  • CSSStyleDeclaration.item()
  • CSSStyleDeclaration.removeProperty()
  • CSSStyleDeclaration.setProperty()

CSS 模块的侦测

CSS 对象

  • CSS.escape()
  • CSS.supports()

window.getComputedStyle()

CSS 伪元素

StyleSheet 接口

概述

  • StyleSheet接口代表网页的一张样式表，包括<link>元素加载的样式表和<style>元素内嵌的样式表。
  • document对象的styleSheets属性，可以返回当前页面的所有StyleSheet实例（即所有样式表）。它是一个类似数组的对象。
  • 如果是<style>元素嵌入的样式表，还有另一种获取StyleSheet实例的方法，就是这个节点元素的sheet属性。
  • 严格地说，StyleSheet接口不仅包括网页样式表，还包括 XML 文档的样式表。所以，它有一个子类CSSStyleSheet表示网页的 CSS 样式表。我们在网页里面拿到的样式表实例，实际上是CSSStyleSheet的实例。这个子接口继承了StyleSheet的所有属性和方法，并且定义了几个自己的属性，下面把这两个接口放在一起介绍。

实例属性

  • StyleSheet.disabled
  • Stylesheet.href
  • StyleSheet.media
  • StyleSheet.title
  • StyleSheet.type
  • StyleSheet.parentStyleSheet
  • StyleSheet.ownerNode
  • CSSStyleSheet.cssRules
  • CSSStyleSheet.ownerRule

实例方法

  • CSSStyleSheet.insertRule()
  • CSSStyleSheet.deleteRule()

实例：添加样式表

CSSRuleList 接口

CSSRule 接口

概述

CSSRule 实例的属性

  • CSSRule.cssText
  • CSSRule.parentStyleSheet
  • CSSRule.parentRule
  • CSSRule.type

CSSStyleRule 接口

属性

  • CSSStyleRule.selectorText
  • CSSStyleRule.style

CSSMediaRule 接口

window.matchMedia()

基本用法

MediaQueryList 接口的实例属性

MediaQueryList 接口的实例方法

参考

网道 - WangDoc.com - DOM

avatar
文章
阅读
粉丝