1.引入
BOM 是操作浏览器窗口等一些相关操作的接口
Document 对象，可以获得一些特定的标签并且对其进行操作
只能获得特定标签，不能获得 HTML 中的任意标签，如<div>标签
通过数组索引方式获得特 定标签，不方便维护
2.DOM简介
DOM（Document Object Model）：文档对象模型
对文档的结构化的表述
定义了在程序中对该结构进行访问的方式
3.DOM 分类
核心 DOM：用于任何结构化文档的标准模型
定义了与系统平台和编程语言无关的接口，DOM 是一种 API（应用程序编程接口）
HTML DOM：用于 HTML 文档的标准模型
XML DOM：用于 XML 文档的标准模型
4.DOM 作用
访问文档内容，包括元素、属性、文本
增加文档内容，包括元素、属性、文本
删除文档内容，包括元素、属性、文本
修改文档内容，包括元素、属性、文本
5.BOM描述了与浏览器进行交互的方法和接口，DOM描述了处理网页内容的方法和接口。从 window.document 可以看出，DOM的根对象document 是 BOM 的 window 对象的子对象。
6.DOM 树
DOM 将 HTML 文档抽象为树形结构，称这棵树为 DOM 树
DOM 的核心就是对 DOM 树的操作，即增加、删除、修改
7.节点分类
① 整个文档是一个文档节点
② 每个 HTML 元素是元素节点 （html以下的，包括head、title、body、a、h1这些都是元素节点）
③ HTML 元素内的文本是文本节点
④ 每个 HTML 属性是属性节点
⑤注释是注释节点
8.DOM 节点有三类：元素节点、属性节点、文本节点
9.直接获取节点
通过 id 属性获得节点
document.getElementById( )
通过标签名获得所有同名标签
document.getElementsByTagName( )
通过类名获得所有类名相同的标签
document.getElementsByClassName( )
10.通过节点关系获取
通过父节点获得子节点
childNodes 属性——返回节点的子节点集合
document.getElementById("myList").childNodes; 返回的是子节点的集合 document.getElementById("myList").childNodes[0]; 获取元素节点
children属性——返回节点的所有元素子节点集合
document.getElementById("myList").children;
document.getElementById("myList").children[0];
firstChild 属性——返回指定节点的首个子节点
document.getElementById("myList").firstChild;
firstElementChild 属性——返回指定节点的首个元素子节点
document.getElementById("myList").firstElementChild;
通过子节点获得父节点
node.parentNode 属性 ——返回指定节点的父节点
node.parentElement 属性——返回指定节点的父节点
获得前后兄弟节点
previousSibling属性 例：document.getElementById("item2").previousSibling
previousElementSibling 属性—返回指定节点紧跟的前一个元素兄弟节点
11.元素节点内容
innerHTML 属性
innerHTML 是 DOM 中元素节点的属性，相当于一个容器
用于获取或改变任意元素节点的内容，该属性可读可写
操作简单，几乎所有浏览器均支持
12.读取元素节点内容
var txt = document.getElementById("intro").innerHTML;
document.write(txt);
修改元素节点内容
document.getElementById("intro").innerHTML = "hello";
13.元素节点属性
获取某一元素节点的属性
node.getAttribute( attrName )
设置某一元素节点的属性
node.setAttribute( attrName，value )
当属性存在时，为修改相应属性值
当属性不存在时，为添加相应属性
删除某一元素节点的属性
node.removeAttribute( attrName )
判断某一元素节点是否含有某属性
node.hasAttribute( attrName )
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称）、nodeValue（节点值）可读可写、nodeType（节点类型）
添加DOM节点
生成一个元素节点： document.createElement( )
生成一个文本节点：document.createTextNode( )
把生成的节点作为某一个节点（node）的子节点进行添加
作为node节点的最后一个子节点：node.appendChild( newNode )
8.3 删除DOM节点
通过父节点删除本节点：myParent.removeChild( mySelfNode )
通过自己删除本节点：mySelfNode.parentNode.removeChild(mySelfNode )
删除一个属性节点： node.attrName = “”;
8.4 修改DOM节点
修改一个元素节点（新节点替换旧节点）：oldNode.parentNode.replaceChild ( newNode, oldNode )
修改一个文本节点（替换文本值）：textNode.nodeValue = “”;
修改一个属性节点（覆盖原有属性）： node.attrName = ‘newAttrValue’;
8.5 节点对象的事件属性
节点对象拥有事件属性——用于指定事件处理函数
节点拥有的事件属性等同于标签中的事件属性
例：
imgNode.onclick
inputNode.onblur
inputNode.onfocus
window.onload
14.DOM操作小结
获取带有指定 id 的节点（元素）- node.getElementById("id");
通过标签名获得所有同名标签- node.getElementsByTagName("tagname");
查找带有相同类名的所有 HTML 元素-
document. document.getElementsByClassName("intro");
通过父节点获得子节点：
- node.children[ ] 获得元素子节点
- node.childNodes[ ]
- node.firstChild
- node.lastChild
通过子节点获得父节点：
- node.parentNode
获得前后兄弟节点：
- node.previousSibling node.nextSibling
获得某一元素节点的属性节点
标准方式获得属性：
node.getAttribute( name )
简单方式获得属性：
node.attrName
修改某一元素节点的属性节点
14.改变 HTML 内容—innerHTML 属性
①innerHTML是DOM中元素节点的属性，相当于一个容器，可用于获取或改变任意 HTML 元素，包括 <html> 和 <body>
②innerHTML属性，可读可写
读取节点内容：node.innerHTML；
修改节点内容：node.innerHTML = “”
直接赋值给属性
特点：
通用性强，几乎所有浏览器均支持
不仅可以操作HTML文档，也可以操作XML文档
操作稍嫌复杂，书写的代码量过大