JavaScript DOM 简单介绍

1、DOM概述

• DOM是一种与浏览器、平台及语言无关的接口，能够以编程方式访问和操作文档。
• DOM是Document Object Model（文档对象模型）的简称。
• DOM提供了访问、操作该模型的API。

2、DOM分层结构

在DOM中文档的层次结果被表示为树形结构，倒立的树形结构。

3、遍历文档

在DOM中，HTML文档各个节点被视为各种类型的Node对象，并且将HTML文档表示为Node对象的树。
Node对象的属性

属性名	类型	解释
parentNode	Node	节点的父节点，没有父节点则为null
childNodes	Nodelist	节点的所有子节点的NodeList
firstChild	Node	节点的第一个子节点，没有则为null
lastChild	Node	节点的最后一个子节点，没有为null
nodeName	String	节点名
nodeValue	String	节点值
previousSibling	Node	上一个兄弟节点
nextSibling	Node	下一个兄弟节点
nodeType	short	表示节点类型的常量 （Element 1,）

4、DOM操作文档

Node对象常用方法

属性名	解释
insertBefore(newChild,refchild)	在现有节点refChild之前插入节点newChild
replaceChild(newChild,oldChild)	将子节点清单中的子节点oldChild换成newChild，并返回oldChild节点
removeChild(oldChild)	删除oldChild节点并返回
appendChild(newChild)	将节点newChild放入原列表的末尾，如果newChild已经存在树中，则先将其删除
hasChildNodes()	返回bool值，是否存在此节点
cloneNode(deep)	返回这个节点的拷贝（包括属性），如果deep为true则拷贝所有包含的节点，否则只拷贝这个节点。