思维导图
DOM是什么东西？他有什么用？
这是很多新入职的开发人员很容易出现困惑的问题。通常我们在开发的时候，只想着怎么把这个需求做出来，面对其原理，似乎很少人去真正的剖析过。
需要了解DOM，就需要从HTML开始了解。html就像是我们使用的word一样，为我们展示出必要的信息，但如果html失去了DOM这个东西，这个word就像只读文件一般，只可远观，改都改不来。而DOM的出现解决了这类问题。
DOM是一个具有使页面可以增加、移除、修改的编程接口。他让页面具有像word一样可以删删改改的功能。工程师只要通过DOM对节点进行修改，就可以得到变化的页面效果。
DOM定义的方法
节点层次：DOM是有一定的节点层次的。我们在浏览器“查看源码”当中可以看到，每项内容都是由一个个标签包裹起来的（也被称之为“标签语言”），并且具有一定的层级关系。这就可以通过索引页面来找到自己需要的html内容。
Node类型：每个标签的名字不同，DOM将其所处的位置和功能不同，定义了12种类型，这样的定义作用旨在定义节点的类型，并让浏览器清楚节点的作用。开发者可以通过：someNode.nodeType来获取当前节点的类型。
既然DOM是用来操作节点的，那么介绍一些比较常见的属性吧。
DOM属性
以下内容，请在前面加上someNode
-
.nodeName和.nodeValue了解节点的具体信息 - 节点关系
-
.childNode[0]=> 节点关系 -
.parentNode=> 节点关系：父节点、子节点、最后节点等等 -
.lastChild=> 节点关系
-
- 操作节点
-
.appendChild()=> 插入节点 -
.insertBefore(newNode, null)=> 插入后成为最后一个子节点 -
.insertBefore(newNode, someNode.firstChild)=> 插入成为最后一个子节点 -
.insertBefore(newNode, someNode.lastChild)=> 插入到最后一个子节点前面
-
-
.replaceChild()替换节点 -
.removeChild()移除节点
介绍DOM的基础知识之后，我们同样来盘一盘DOM具备的各种类型吧。
Document类型
document，英语单词的意思文档，文件的意思。那么这个类型的主要作用就在于不仅可以取得页面有关的信息而且还能操作页面的外观及其底层结构。所以他能够操作整个HTML页面。作者可以使用document.***来获得。
废话不多说，我们来看看如何使用吧。
document属性
以下内容，请在前面加上document
- 节点访问
-
.documentElement()访问<html>节点 -
.body()访问<body>节点
-
- 文档信息
-
.title文档标题 -
.URL完整URL -
.domain域名
-
- 查找元素
-
.getElementById()取得元素为ID -
.getElementByTagName()取得元素标签名 -
.getElementByName()取得元素name
-
- DOM一致性检测（查看当前浏览器支持的版本）
-
.implementation.hasFeature("XML", "1.0”)返回：true 或false
-
- 文档写入
-
.write()原样写入 -
.Writeln()在末尾加换行符（\n） -
.open()打开网页输出流 -
.close()关闭网页输出流
-
总结
对DOM的理解，同时对document的分解，可以发现以前难以处理的事情，似乎现在已经想到了解决方法了。比如修改文档标题。
网友评论