DOM-文档对象模型

Posted on   |   In   |     |   Views

DOM 是针对 HTML 和 XML 文档的一个 API。 DOM 描绘了一个层次化的节点树。 HTML 文档的树形结构包含表示 HTML 标签或元素和表示文本字符串的节点，它也可能包括表示 HTML 注释节点。

DOM基本概念

DOM 描述

  • DOM Document Object Model 文档对象模型
  • 就是把HTML文档模型化，当作对象来处理
  • DOM提供的一系列属性和方法可以视作一个工具箱，极大地方便了我们对文档的处理。

内容概念

  • 文档(Document)：就是指HTML或者XML文件
  • 节点(Node)：HTML文档中的所有内容都可以称之为节点，常见的节点有
    • 元素节点
    • 属性节点
    • 文本节点
    • 注释节点
  • 元素(Element)
    • HTML文档中的标签可以称为元素

结构概念

  • 父节点 当前节点的父级
  • 子节点 当前节点的子级
  • 兄弟节点 和当前节点同属一个父级的节点

节点类型

DOM1 级定义了一个 Node 接口，该接口由 DOM 中的所有节点类型实现。这个 Node 接口在 JavaScript 中是作为 Node 类型事项的。JavaScript 中的所有节点类型都继承自 Node 类型。每个节点有一个 NodeType 属性，用于表明节点的类型。节点类型由在 Node 类型中定义的 12 个常量来表示：

  • Node.ELEMENT_NODE(1); 表示元素节点
  • Node.ATTRIBUTE_NODE(2); 表示属性节点
  • Node.TEXT_NODE(3); 表示文本节点
  • Node.CDATA_SECTION_NODE(4);
  • Node.ENTITY_REFERENCE_NODE(5);
  • Node.ENTITY_NODE(6);
  • Node.PROCESSING_INSTRUCTION_NODE(7);
  • Node.COMMENT_NODE(8); 表示文本节点
  • Node.DOCUMENT_NODE(9); Document 节点
  • Node.DOCUMENT_TYPE_NODE(10);
  • Node.DOCUMENT_FRAGEMENT_NODE(11); DocumentFragment 是特殊的节点，作为其它节点的一个容器。
  • Node.NOTATION_NODE(12);

someNode.nodeType 兼容所有浏览器，IE 没有公开 Node 类型的构造函数。

nodeName 和 nodeValue

这两个属性了解节点的具体信息，对于节点类型为 1 的元素节点，nodeName 中保存的是元素标签名，nodeType 的值始终是 null。

节点关系

作为元素树的文档节点

  • firstChild 指向 childNodes 列表中的第一个元素
  • lastChild 指向 childNodes 列表中的最后一个元素
  • childNodes 每个节点都有 childNodes 属性，保存了 NodeList 类数组对象。
    • NodeList 是有生命、有呼吸的对象，DOM 结构的变化能够自动反映在 NodeList 对象中。
    • 下面代码将 NodeList 对象转成真正的数组。
1
2
3
4
5
6
7
8
9
10
11
12
function convertToArray(nodes) {
  var array = null;
  try {
    array = Array.prototype.slice.call(nodes, 0);  // 针对非 IE 浏览器
  } catch (e) {
    array = new Array();
    for (var i = 0, len = nodes.length; i < len; i++) {
      array.push(nodes[i]);
    }
  }
  return array;
}
  • parentNode 每个节点都有 parentNode 属性，指向文档树的根节点。
  • previousSibling 上一个同胞节点
  • nextSibling 下一个同胞节点

作为元素树的文档

  • firstElementChild 第一个子元素 有兼容性问题
  • lastElementChild 最后一个子元素 有兼容性问题
  • children 子元素 虽然不是早期DOM标准中的方法，但是所有浏览器都支持。
  • childElemntCount 子元素的数量。返回值和 childre.length 相等。
  • previousElementSibling 上一个兄弟元素 有兼容性问题
  • nextElementSibling 下一个兄弟元素 有兼容性问题

haschildNodes() 方法在节点包含一个或多个子节点的情况下返回 true。

操作节点

  • appendChild() 向 childNodes 列表的末尾添加一个节点。
    • 添加节点后，childNodes 的新增节点、父节点以及以前的最后一个子节点的关系指针都会相应地得到更新。返回新增的节点。
    • 如果传入的节点已经是文档的一部分了，那么就将该节点从原来的位置移动到新位置。
  • insertBefore()
    • 接收两个参数：要插入的节点和作为参照的节点。
    • 插入节点后，被插入的节点会变成参照节点的前一个同胞节点，同时被方法返回。
    • 如果参照节点是空，则该方法和 appendChild() 执行相同的操作。
  • replaceChild()
    • 接收两个参数：要插入的节点，要替换的节点。
    • 要替换的节点被该方法返回，从文档树种移除，该节点所占位置被新的节点代替
  • removeChild()
    • 接收一个参数，即要被移除的节点，返回这个节点。

以上几个方法是有父节点的子节点才具有的。下面两个方法所有类型的节点都有的。

  • cloneNode()
    • 用于创建调用该方法的节点完全相同的节点。
    • 该方法接收一个布尔值，表示是否深度克隆
    • 参数为 true 时，克隆调用该方法的节点及其整个子节点树
    • 参数为 false 时，只复制节点本身。
    • 复制后返回的节点副本属于文档所有，但并没有为它指定父节点。
    • 使用上面的 appendChild()、insertBefore()、replaceChild()方法添加的文档中。
  • normalize()
    • 唯一作用是处理文档树中的文本节点。
    • 调用该方法的节点，在其后代节点中查找空文本节点并删除。如果找到相邻文本节点，则合并

Document 类型

在浏览器中，document 对象是 HTMLDocument (继承自 Document) 的一个实例，表示整个 HTML 页面。

特点：

  • nodeType 为 9
  • nodeName 为 “#document”
  • nodeValue 为 “null”
  • parentNode 为 “null”
  • ownerDocument 为 “null”
  • 子节点可能是 DocumentType(最多一个)、Element(最多一个)、Comment、ProcessingInstruction。

文档子节点

  • documentElement 属性
    • 内置的访问子节点的方式 document.documentElement ， 返回值和 childNodes[0]、firstChlid 的值相同。
  • body 属性
    • 直接指向 body 元素。

documentElement 和 body 属性所有浏览器都支持。

  • doctype 属性
    • IE8 以及之前的版本，如果存在文档声明，会错误的解释为 一个助手并当做 Comment 节点。返回 null。
    • IE9+ 以及 FF，如果存在文档声明，会将其作为文档的第一个子节点；document.doctype 是一个 DocmentType 节点。会出现在 document.childNodes 中。
    • Safari、Chrome 和 Opera，如果存在文档声明，将其解析，不作为文档的子节点。document.doctype 是一个 DocmentType 节点。不会出现在 document.childNodes 中。

浏览器对处理位于 <html> 外部的注释节点，也有差异

文档信息

  • document.title
    • 获取 <title></title> 标签中的内容

网页请求相关的属性

  • document.URL
    • 包含网页完整的 URL
  • document.domain
    • 包含页面的域名
  • document.referrer
    • 保存着链接到当前页面的那个页面的 URL。

所有的这些信息保存在请求的 HTTP 头部。以上三个属性中只有 domain 属性是可以设置的。

当页面中包含来自其它子域的框架或者内嵌框架时候，能够设置 document.domain 就非常方便。由于跨域安全限制，来自不通子域的页面无法通过 JavaScript 通信。而通过将每个页面的 document.domain 设置为相同的值，这些页面就可以听歌互相访问对方包含的 JavaScript 对象了。

获取元素

  • getElementById();
    • 该方法只能被document对象调用；
    • 该方法接收一个参数，要获取元素的 ID ；
    • 如果找到返回该 DOM 元素，否则返回 null。
    • IE7 以及较低版本会将表单元素 name 值为该方法中的 id 相同的元素返回。
  • getElementsByTagName();
    • 该方法接收一个参数，标签名。还可以传入 “*”，表示获取文档中的所有元素。
    • 通过标签名寻找一类元素（找到的是由元素对象组成的伪数组）。返回的是一个 HTMLCollection。
    • 即可以被 document 调用，又可以被元素对象调用。
    • 被元素对象调用时表示在该元素对象内部执行查找。
  • getElementByName();
    • 只有 HTMLDocument 才有的方法。
    • 返回带有给定 name 特性的所有元素。最常用于取得单选按钮。

可以使用方括号或者 item() 来访问 HTMLCollection 集合中的项。该对象还有一个 nameItem() 方法，可以通过元素的 name 特性取得集合中的项。

特殊集合

  • document.anchors 返回包含页面中所有带 name 特性的 <a> 元素
  • document.applets 包含文档中所有的 <applet> 元素，这个已经不用了。
  • document.froms 包含文档中的所有的 <form> 元素。
  • document.images 包含文档中的所有的 <img> 元素。
  • document.links 包含文档中的所有带 herf 的 <a> 元素。

DOM 的一致性检测

  • document.implementation 属性
    • 该属性有个 hasFeature() 方法，接收两个参数：
      • 要检测的 DOM 功能的名称
      • 要检测的 DOM 功能的版本号

文档写入

将输出流写入到网页中。可以使用这些方法动态的给网页中添加内容。

  • document.write()
    • 接收要写到输出流的文本
  • document.writeln()
    • 接收要写到输出流的文本
  • document.open()
    • 打开输出流
  • document.close()
    • 关闭输出流

write() 和 writeln() 方法动态地包含外部资源。使用时不能直接包含字符串 </sript>，而是使用 <\/script> 进行转义。

Element 类型

Element 提供了对元素标签名、子节点及其特性的访问。

特点：

  • nodeType 为 1
  • nodeName 为 元素的标签名
  • nodeValue 为 “null”
  • parentNode 可能是 Document 或 element
  • 子节点可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或 EntityReference

要访问元素的标签名可以使用 nodeName 或 tagName 属性。DOM元素.tagName 输出的是大写。 在 HTML 中，标签名始终都是全部以大写标书；而在 XML 或 XHML 中标签名会与源码代码中保持一致。

HTML 元素

由 HTMLElement 类型表示。每个 HTML 元素的特性：

  • id 元素在文档中的唯一标识符
  • title 有关元素的附加说明
  • lang 元素内容的语言代码，很少用
  • dir 语言的方向，值为 “ltr” (从左至右) 或 “rtr” (从右至左)，很少用
  • className，与元素的 class 相对应。

获取属性

  • getAttribute()
    • 传递的参数与实际的属性名相同。
    • 可以获取自定义属性。

任何元素的所有特性，都可以通过 DOM 元素本身的属性来访问。只有非自定义的属性才会以属性的形式添加到 DOM 对象中。

有两类特殊的属性，虽然有对应的属性名，但是属性的值与通过 getAttribute() 返回的值并不相同。

  • style, 用于通过 CSS 为元素指定样式；
  • 事件处理程序。通过 getAttribute() 访问会返回相对应的代码字符串。

设置属性

  • setAttribute()
    • 接收两个参数：要设置的属性名，要设置的值
    • 存在替换，不存在创建
  • 元素对象.属性名 = "属性值";
  • <标签 属性名="属性值">

删除属性

  • removeAttribute()
    • IE6 之前版本不支持。

attribute 属性

该属性有一下几种方法：

  • getNamedItem(name)
    • 返回 nodeName 等于 name 的节点
  • removeNamedItem(name)
    • 移除 nodeName 等于 name 的节点
  • setNamedItem(node)
    • 向列表中添加节点
  • item(pos)
    • 返回位于 pos 处的节点

创建元素

  • document.createElement()
    • 接收的参数是要创建元素的标签名
    • HTML 中不区分大小写，XML 或 XHTML 中区分大小写
    • 在 IE 中可以使用为该方法传入完整的元素标签的方式创建。

元素的子节点

元素可以任意多的子节点和后代节点。 childNodes 属性包含了所有的子节点。

Text 类型

不包含 HTML 结构的纯文本

特点：

  • nodeType 为 3
  • nodeName 为 “#text”
  • nodeValue 为 节点所包含的文本
  • parentNode 是 Element

可以通过 nodeValue 属性或 data 属性访问 Text 节点中包含的文本。

  • appendData(text): 将 text 添加到节点的末尾
  • deleteData(offset, count): 从 offset 指定的位置开始删除 count 个字符
  • insertData(offset, text): 从 offset 指定的位置开始插入 text
  • replaceData(offset, count, text): 用 text 替换 offset 指定的位置开始到 offset+count 为止处的文本。
  • splitText(offset): 从 offset 指定的位置将当前文本分成两个文本节点
  • substringData(offset, count): 提取从 offset 指定的位置开始到 offset + count 为止处的字符串

还有个 length 属性，保存着节点中字符的数目。

创建文本节点

  • document.createTextNode()
    • 创建新文本节点
    • 接受一个参数-要创建的文本

规范化文本节点

  • normalize()
    • 在包含两个或多个文本节点的父元素上调用此方法，则会将所有文本节点合并成一个节点。

切割文本节点

  • splitText()
    • 将一个文本分隔成两个文本节点。

Comment 类型

特点：

  • nodeType 为 8
  • nodeName 为 “#document”
  • nodeValue 为 注释内容
  • parentNode 是 Document 或 Element
  • 无子节点

CDATASection 类型

特点：

  • nodeType 为 4
  • nodeName 为 “#cdata-section”
  • nodeValue 为 CDATA 区域中的内容
  • parentNode 是 Document 或 Element
  • 无子节点

DocumentType 类型

特点：

  • nodeType 为 10
  • nodeName 为 doctype 的名称
  • nodeValue 为 null
  • parentNode 是 Document
  • 无子节点

DocumentFragment 类型

特点：

  • nodeType 为 11
  • nodeName 为 “#document-fragment”
  • nodeValue 为 null
  • parentNode 是 null
  • 子节点可以是 Element、ProcessingInstruction、Comment、Text、CDATASection 或 EntityReference

使用 document.createDocumentFragment() 方法。可以通过 appendChild() 或 insertBefore() 将文档片段中内容添加到文档中。

Attr 类型

特点：

  • nodeType 为 2
  • nodeName 为 属性名
  • nodeValue 为 特性的值
  • parentNode 是 null
  • HTML 中无子节点
  • XML 或 HTML 中子节点可以是 Text 或 EntityReference

Attr 有 3 个属性：name、value 和 specified。

操作表格

  • caption
  • tBodies
  • tFoot
  • tHead
  • rows
  • createHead()
  • createTFoot()
  • createCaption()
  • deleteRow(pos)
  • insertRow(pos)
  • cells
  • deleteCell(pos)
  • insertCell(pos)

DOM 扩展

对 DOM 的两个主要扩展是 Selectors API 和 HTML5。支持的浏览器： IE8+、FireFox 3.5+、Safari 3.1+、Chrome 和 Opera 10+。

选择符 API

Selectors APILevel 1 的核心是两个方法：

  • querySelector()
    • 接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有匹配到，返回 null。
  • querySelectorAll()
    • 接收一个 CSS 选择符，返回一个 NodeList 对象。如果没有找到，NodeList 对象是空的。

Selectors APILevel 2 新增了一个 matchesSelector() 方法，接收一个参数，CSS 选择符，如果调用元素与该选择符匹配，返回 true，否则返回 false。

元素遍历

  • childElementCount: 返回不包括文本节点和注释的子元素个数；
  • firstElementChild: 指向一个子元素，firstChild 元素版
  • lastElementChild: 指向最后一个子元素，lastChild 元素版
  • previousElementChild: 指向前一个兄弟元素。 previousSibling 的元素版
  • nextElementChild: 指向下一个兄弟元素。 nextSibling 的元素版

HTML5

与类相关的扩充

  • getElementsByClassName();
    • 通过类名获取元素。
    • 可以通过 document以及所有 HTML 元素调用该方法。
    • 接收一个参数，即包含一或多个类名的字符串。
    • 返回指定类型的所有 NodeList。

getElementsByClassName() 支持的浏览器有 IE9+、FireFox 3+、Safari 3.1+、Chrome 和 Opera 9.5+。

classList 属性

HTML5 新增了一种操作类名的方式，就是为所有的元素添加 classList 属性。

  • add(value): 给定的字符串值添加到列表中。如果值已经存在，就不添加了。
  • contains(value): 表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
  • remove(value): 从列表中删除给定的字符串。
  • toggle(value): 如果列表中已存在给定的值，删除它；如果列表值没有给定的值，添加它。

焦点管理

  • document.activeElement 属性
    • 始终会引用 DOM 中当前获得了焦点的元素。
  • document.hasFocus() 方法
    • 用于确定文档是否获得了焦点

支持的浏览器有 IE4+、FireFox 3+、Safari 4+、Chrome 和 Opera 8+。

HTMLDocument 的变化

readyState 属性
  • loading， 正则加载文档
  • complete，已经加载完文档

支持的浏览器有 IE4+、FireFox 3.6+、Safari、Chrome 和 Opera 9+。

兼容模式

在标准模式下，document.compatMode 的值等于 “CSS1Compat”; 在混杂模式下，document.compatMode 的值等于 “BackCompat”。

支持的浏览器有 FireFox、Safari 3.1+、Chrome 和 Opera。

head 属性

document.head，引用文档的 <head> 元素。

支持的浏览器有 Safari 5、Chrome。

字符集属性

  • charset 属性表示文档中实际使用的字符集。默认是这个属性值是 “UTF-16”，可以通过 <meta> 元素、响应头部或者直接设置 charset 属性修改这个值。
  • defaultCharset，表示根据默认浏览器以及操作系统的设置。

document.charset 支持的浏览器有 IE、Safari、Chrome 和 Opera。document.defaultCharset 支持的浏览器有 IE、Safari 和 Chrome。

自定义数据属性

自定义数据属性是以 data- 开头的。这些属性可以任意添加、随便命名。

添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。dataset 属性的值是 DOMStringMap 的一个实例，也就是键值对的映射。在这个映射中，每一个 data-name 形式的属性都会有一个对应的属性，只不过属性名没有 data- 前缀。

支持的浏览器有 FireFox 6+ 和 Chrome。

插入标记

  • innerHTML 属性
    • 读模式下，innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记；
    • 写模式下，innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。
    • 读模式返回的字符串内容各浏览器之间有差异
    • 写模式 innerHTML 的值被认为是 HTML，如果是纯文本，则设置纯文本
    • innerHTML 中的 <script> 标签不会执行其中的脚本
    • 并不是所有的元素都支持 innerHTML 属性。
      • <col>、<colgrounp>、<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>、<tr>
      • IE8 以及之前的版本 <title> 没有 innerHTML 属性
  • outerHTML 属性
    • 读模式下，outerHTML 属性返回与调用元素的所有子节点的 HTML 标签；
    • 写模式下，outerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素。
    • 支持的浏览器有 IE4+、Safari 4+、Chrome 和 Opera 8+。
  • innerAdjacentHTML() 方法
    • 接收两个参数：插入位置和要插入的 HTML 文本，第一个参数必须是：
      • “beforebegin” 在当前元素之前插入一个紧邻的兄弟元素
      • “afterbegin” 在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素
      • “beforeend” 在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素
      • “afterend” 在当前元素之后插入一个紧邻的兄弟元素

内存与性能

在使用innerHTML、outerHTML、innerAdjacentHTML() 等时最好先把被替换元素上绑定的事件处理程序删除。

使用 innerHTML 方法时，首先拼串，然后在往 DOM 树中添加，提高性能。

scrollIntoView() 方法

任何 HTML 元素都可以调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在时口中。

支持的浏览器有 IE、Safari、FireFox 和 Opera。

专有扩展

文档模式

文档模式决定了页面可以使用什么功能。有混杂模式和标准模式。

通过 document.documentMode 属性可以指定给定页面使用的是什么样的文档模式。

children 属性

返回只包含元素中同样还是元素的子节点，与 childNodes 没区别。

contains() 方法

返回 true 或 false，如果传入的参数元素是调用元素的后代，则返回 true，否则返回 false。

插入文本

  • innerText 属性
    • 可以操作元素中包含的所有文本内容
    • 会按照由浅到深的顺序，将子文档树中的所有文本都拼接起来
    • 会对文本中存在的 HTML 语法字符进行编码

支持 innerText 属性有 IE9+、Safari 3+、Chrome 和 Opera 8+。

  • textContext 属性
    • 是 DOMLevel 3 规定的一个属性。

支持 textContext 属性有 IE9+、Safari 3+、Chrome、FireFox 和 Opera 10+。

  • outerText
    • 它的读模式和 innerText 没区别
    • 写模式：outerText 不只是替换调用它的子节点，而是会替换包括替换整个元素。

支持的浏览器有 IE4+、Safari3+、Chrome 和 Opera8+。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//封装
function getInnerText(element) {
    if (typeof element.innerText === "string") {
        return element.innerText;
    } else {
        return element.textContent;
    }
}
function setInnerText(element, content) {
    if (typeof element.innerText === "string") {
        element.innerText = content;
    } else {
        element.textContent = content;
    }
}

滚动

  • scrollIntoViewIfNeeded(alignCenter): 只有当前元素在视口中不可见的情况下，才能滚动浏览器窗口或容器让其可见。
  • scrollByLines(lineCount): 将元素的内容滚动指定的行高；
  • scrollByPages(pageCount): 将元素的内容滚动指定页面的高度；

支持的浏览器 Chrome 和 Safari。scrollIntoView() 是唯一个所有浏览器都支持的方法，所以比较常用。

DOM2 和 DOM3

DOM1 级主要定义的是 HTML 和 XML 文档的底层结构。DOM2 和 DOM3 则在这个基础上引进了更多的交互能力。DOM2 和 DOM3 分为很多模块。如下：

  • DOM2 级核心(DOM Level 2 Core)：为节点添加了更多的方法和属性
  • DOM2 级视图(DOM Level 2 Views)：为文档定义了基于样式基本信息的不同视图。
  • DOM2 级事件(DOM Level 2 Events): 说明了如何使用事件与 DOM 文档操作
  • DOM2 级样式(DOM Level 2 Style)：定义了如何通过编程方式操作 CSS 样式
  • DOM2 级遍历和范围(DOM Level 2 Trversal and Range): 引入了遍历 DOM 文档和选择其他特定部分的新接口。
  • DOM2 级 HTML(DOM Level 2 HTML)：在 1 级 HTML 基础上添加了更多的属性、方法和新接口

DOM 变化

针对 XML 命名空间的变化

HTML 不支持 XML 命名空间，XHTML 支持 XML 的命名空间。

命名空间使用 xmlns 特性来定义。

  • Node 类型变化
  • Document 类型变化
  • Element 类型变化
  • NamedNodeMap 类型的变化
  • NamedNodeMap 类型的变化
  • Document 类型的变化
  • 框架的变化

样式

访问元素的样式

任何支持 style 特性的 HTML 元素在 JavaScript 中都有一个对应的 style 属性。在 style 特性指定的任何 CSS 属性都将表现为 style 对象的相应属性。对于使用短线分隔的 CSS 属性，将其转换成驼峰大小写的形式。

float 是 javascript 的保留字，不能用作属性名，其相应的属性名是 cssFloat，FireFox、Safari、Opera、Chrome 都支持；但是 IE 支持的是 styleFloat.

直接可以访问的样式：widh; height; padding; margin; display;

设置和获取样式

  • 通过对象的style属性只能设置和获取行内样式
  • 获取样式的时候 如果行内没有该样式 输出空字符串
  • 设置样式的时候 赋的值是一个字符串 如果这个属性有单位 一定要节点加单位

什么情况通过class控制样式 什么情况通过style控制样式

不严格的说：

  • 如果样式很多 通过 直接控制类名 的方式加样式
  • 如果样式比较少 通过直接设置比较方便

严格来说：

  • 从标准的角度讲 即使是样式比较少的时候 设置样式也要用类名
  • 但是有一类情况 是无论如何也必须直接通过JS加的 那就是涉及到计算的时候
DOM 样式属性和方法
  • cssText
  • length 应用给元素的 CSS 属性
  • parentRule
  • getPropertyCSSValue(propertyName)
  • getPropertyPriority(propertyName)
  • getPropertyValue(propertyName)
  • item(index) 返回给定位置的 CSS 属性名称。
  • removeProperty(propertyName)
  • setProperty(propertyName, value, priority)
计算的样式
  • getComputedStyle()
    • 接收两个参数：要获取的计算样式的元素和一个伪元素字符串。第二个参数是可选的
    • 在 IE 中不支持，而是有个 currentStyle 属性
  • 使用 document.defaulView.getComputedStyle(DOM元素, 伪元素/null)
  • 返回 CSSStyleDeclaration 对象，包含当前元素的所有计算的样式。
操作样式表
  • disabled
  • href
  • media
  • ownerNode
  • parentStyleSheet
  • title
  • type
  • cssRules
  • ownerRule
  • deleteRule(index)
  • inserRule(rule, index)

应用于文档的所有样式表时通过 document.styleSheets 集合来表示的。IE 支持的是 styleSheet 属性 而其他浏览器都支持 sheet 属性。

CSS 规则，CSSStyleRule 类型继承了 CSSRule，包含以下属性：
  • CSSText
  • parentRule
  • parentStyleSheet
  • selectorText
  • style
  • type
创建规则
  • sheet.insertRule()
    • 接收两个参数：规则文本和在哪里插入规则的索引。
    • 除了 IE 以外的其它四个浏览器支持
  • sheet.addRule()
    • 接收两个必选参数一个可选参数：选择符文本和CSS样式信息，在哪里插入规则的索引。
    • IE 浏览器支持
删除规则
  • sheet.deleteRule()
    • 接收一个参数：要删除规则的位置
    • 除了 IE 以外的其它四个浏览器支持
  • sheet.removeRule()
    • 接收一个参数：要删除规则的位置
    • IE 浏览器支持
元素的大小

偏移量：包括元素在屏幕上占用的所有的可见的空间。由其高度、宽度来决定，包括内边距、滚动条和边框大小。

  • 偏移量
    • offsetHeight
    • offsetWidth
    • offsetLeft
    • offsetTop
  • 客户区的大小：不包括边框，包括内边距
    • clientWidth
    • clientHeight
  • 滚动大小：包含滚动内容的大小
    • scrollHeight
    • scrollWidth
    • scrollLeft
    • scrollTop
  • 确定元素的大小
    • getBoundingClientRect() 方法返回一个矩形对象，有四个属性：
      • left、top、right、bottom
      • 给出了元素在叶明中相对于视口的位置。

遍历

NodeIterator

可以使用 document.createNodeIterator() 方法来创建 NodeIterator 的新实例，接收四个参数。

  • root: 想要搜索的起始树中的节点
  • whatToShow: 要访问哪些节点的数字代码
  • filter: 是一个 NodeFilter 对象，表示应该接收还是拒绝某种特定的节点的函数
  • entityReferenceExpansion: 布尔值，是否要扩展引用。

whatToShow 的参数在这里不再列出，需要的时候直接查找 JavaScript 高级程序设计；

TreeWalker

是 NodeIterator 的更高级版本。可以使用 document.createTreeWalker() 方法来创建 TreeWalker 的新实例，接收四个参数。

范围

有关范围的一些方法、属性此处不再列出。详细更多参见 《JavaScript 高级程序设计》

总结

动态创建结构

  • 方式一：直接在文档中书写
    • document.write(“内容”)
  • 方式二：改变元素对象内部的HTML
    • innerHTML=”内容”
  • 方式三：创建或克隆节点并追加
    • createElement();
    • cloneNode();
    • 通过这两种方法创建出来的元素只是保存在内存中，必须放到页面上才行!
  • 动态创建结构（效率问题）
    • 把字符串变为文档对象
    • 把当前对象挂接到DOM树上
    • 渲染引擎根据新的DOM树重新渲染
感谢您的支持！