DOM（文档对象模型）
Posted 劳埃德·福杰
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM（文档对象模型）相关的知识，希望对你有一定的参考价值。
1.简介
DOM（文档对象模型）提供了访问和操作网页内容的方法和接口。
DOM1级规范： 由DOM Core和DOM html两个模块组成。DOM Core规定如何映射XML的文档结构，以便简化对文档中任意部分的操作。DOM HTML在DOM Core上加以扩展，添加了针对HTML的对象和方法。
2.DOM1
①节点关系
DOM将任何HTML或XML文档描绘成一个由多层节点构成的结构。
JS中的所有节点类型都继承自Node类型，所以所有节点都有一些共同的属性和方法。
每个节点都有一个nodeType属性，用于表明节点的类型，共有12种。
我们也可以使用nodeName和nodeValue属性查看节点信息。
(1)每个节点都有一个childNodes属性，其中保存一个NodeList对象，NodeList是一种类数组对象，保存了一组有序的节点，可通过位置下标来访问，也有length属性，但它不是Array的实例，可使用中括号或使用 item() 方法访问 NodeList 中的元素。
查询一个节点是否有子节点：利用hasChildNodes()方法或length属性
let firstChild = someNode.childNodes[0];
let secondChild = someNode.childNodes.item(1);(2)每个节点都有一个 parentNode 属性，指向其 DOM 树中的父元素。
childNodes 列表中的每个节点都是同一列表中其他节点的同胞节点，使用 previousSibling 和 nextSibling 属性可以访问同一列表中的其它节点。
父节点的第一个及最后一个子节点有专门属性： firstChild 和 lastChild。
(3)共有属性ownerDocument是一个指向代表整个文档的文档节点的指针。
②操作节点
(1)appendChild() ：用于在 childNodes 列表末尾添加节点。如果添加的是文档中已经存在的节点，那么之前位置的那个节点会被移除。
(2)insertBefore() ：把节点放到 childNodes 中的特定位置，该方法接收两个参数：要插入的节点和参照节点。
(3)replaceChild() ：替换节点。该方法接收两个参数：要插入的节点和要替换的节点。(4)removeChild() ：移除节点。该这个方法接收一个参数，即要移除的节点。
(5)cloneNode() ：返回与调用它的节点一模一样的节点。 该方法接收一个布尔值参数，表示是否深复制。传入true参数，会进行深复制，即复制节点及其整个子 DOM树。传入false ，则只复制调用该方法的节点。
(6)normalize()：处理文档子树中的文本节点。检测调用节点的所有后代，如果发现空文本节点，将其删除；如果两个同胞文本节点是相邻的，则将其合并为一个文本节点。
③Document 类型
浏览器中，文档对象 document 是HTMLDocument 的实例，表示整个 HTML页面。 document 是 window对象的一个属性，因此是一个全局对象。
document.documentElement： 指向<html> 元素，也可以通过 childNodes 列表访问
document.body：指向 <body> 元素
document.doctype 属性： 指向一个DocumentType 对象，包含文档的文档类型信息， 就是<!DOCTYPE>标签里面的一些东西，也可以通过 childNodes 列表访问
理论上，出现在<html>标签外部的注释应该算文档的子节点，然而不同浏览器在是否解析这些注释方面存在很大差异。
document 作为 HTMLDocument 的实例，还有一些标准 Document 对象上所没有的属性：
document.title：读取文档标题，可以修改 title 属性但并不会改变 <title> 元素
document.URL：取得完整的 URL
document.domain：取得域名
document.referrer：取得来源，没有来源就是空字符串
所有这些信息都可以在请求的 HTTP 头部信息中获取
④查找元素
document.getElementById()、document.getElementsById()
document.getElementsByTagName() ：返回一个HTMLCollection对象，可通过中括号或 item() 方法从中取得特定的元素；该对象还有一个方法namedItem() ，可通过标签的 name 属性取得集合中的项；HTMLCollection对象本身也支持通过["name属性名"]的方式获取列表项。
获取页面中的所有元素：document.getElementsByTagName("*")
getElementsByName()：返回具有给定 name 属性的所有元素，也返回一个HTMLCollection对象，最常用于单选框，所有单选框id不同，但是name相同，从而保证了只将一个值发送给服务器(name:xxx)
⑤文档写入
3.DOM2
以上是关于DOM（文档对象模型）的主要内容，如果未能解决你的问题，请参考以下文章