sialvsic的Tech空间

# DOM 基础

# History

DOM文档对象模型是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netscape公司及微软公司创始的DHTML

1998年10月DOM1级规范成W3C的推荐标准

IE中的所有DOM对象都是以COM对象的形式实现的，这意味着IE中的DOM对象和原生JavaScript对象的行为或者活动特点并不一致

# 节点层次

DOM可以将任何的HTML或XML文档描绘成一个由多个节点构成的结构。节点分成不同的类型，每种类型分别表示文档中不同的信息及(或)标记。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。文档节点是每个文档的根节点。

# 节点类型

# Node类型

DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。这个Node接口在JavaScript中是作为Node类型实现的 每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由Node类型中定义的下列12个数值常量来表示，任何节点类型必居其一：

Node.ELEMENT_NODE 1  元素节点
Node.TEXT_NODE 3  Element中的实际文字
Node.PROCESSING_INSTRUCTION_NODE 7 一个用于XML文档的 ProcessingInstruction
Node.COMMENT_NODE 8 一个 Comment节点
Node.DOCUMENT_NODE 9 一个 Document节点
Node.DOCUMENT_TYPE_NODE	10 描述文档类型的 DocumentType 节点
Node.DOCUMENT_FRAGMENT_NODE	11 一个 DocumentFragment 节点

//以下常量已经被弃用
Node.ATTRIBUTE_NODE	2
Node.CDATA_SECTION_NODE	4
Node.ENTITY_REFERENCE_NODE 5
Node.ENTITY_NODE 6
Node.NOTATION_NODE 12

//一些方法
someNode.appendChild();
someNode.insertBefore();
someNode.replaceChild();
someNode.removeChild();
someNode.cloneNode();

# Document类型 nodeType 9

JavaScript通过Document类型来表示文档。在浏览器中，document对象是HTMLDocument(继承自Document类型)的一个实例，表示整个HTML页面。而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问。

//一些方法
document.getElementById()
document.getElementsByTagName()

# Element类型 nodeType 1

特性的名称是不区分大小写的

操作Element类型的方法有：

  • getAttribute()
  • setAttribute()
  • removeAttribute()

通过getAttribute无法取得自定义的属性

创建元素 document.createElement()

# Text类型 nodeType 3

创建文本节点 document.createTextNode()

正常情况下，每个元素都只有一个文本节点，但是在某些情况下可能会存在多个文本节点。如果两个文本节点是相邻的同胞节点，那么这两个节点中的文本就会连起来显示，中间不会有空格。

DOM文档中存在相邻的同胞文本节点很容易导致混乱，因为分不清哪个文本节点代表哪个字符串。所以存在一个normalize()方法能够将相邻文本节点合并。、

# Comment类型

# DOM操作技术

动态脚本 使用<script>元素可以向页面中插入JavaScript代码，一种是通过其src特性包含外部文件，另一种是使用这个元素本身来包含代码

动态加载外部文件

<script type="text/javascript" src="client.js"></script>

function loadScript(){
  var script = document.createElement();
  script.type = "test/javascript";
  script.src = "client.js";
  document.body.appendChild(script);
}

任意时刻，调用如上的方法，就会动态的添加js代码。但是，如何知道脚本已经加载完毕，目前并没有什么标准方式来得知这一点。

# DOM扩展

对DOM的主要扩展是Selectors API(选择符API)和HTML5

# 选择符API

Selectors API是由W3C发起制定的一个标准，致力于让浏览器原生支持CSS查询

querySelector()  //返回模式匹配的第一个元素
querySelectorAll()  //返回模式匹配的所有的元素

# 元素遍历

对于元素间的空格，IE9之前不会返回文本节点，但是其他所有的浏览器都返回文本节点。这意味firstChild得到的值在不同浏览器下可能不同。为了统一，产生了一些新的API去处理

firstChild(Node) vs firstElementChild(Element)

<h4>
  The new endpoint:
  <code>api/home-loan-calculator</code>
</h4>

firstChild => "The new endpoint:"
firstElementChild => <code>api/home-loan-calculator</code>

← TypeScript 基础 →

陕ICP备20004732号-3