学习目标：
| 节数 | 知识点 | 要求 |
|---|---|---|
| 第一节 什么是DOM? | DOM的介绍 | 了解 |
| 第二节 Document对象 | Document对象介绍 | 了解 |
| 第三节 Dom节点分类 | Dom节点分类 | 掌握 |
| 第四节 Document节点属性 | Document节点属性 | 掌握 |
| 第五节 获取页面元素节点 | 获取页面元素节点 | 掌握 |
| 第六节 创建页面元素 | 创建页面元素 | 掌握 |
| 第七节 操作页面元素属性 | 操作页面元素属性 | 掌握 |
一、什么是DOM?
DOM Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改html文档的内容和结构。
二、Document对象
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问
三、DOM节点分类
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。are text nodes。
注释是注释节点。
四、Document节点属性
4.1返回文档内部的某个节点doctype,documentElement,body,head
-
doctype
-
documentElement
-
Body
-
Head
4.2返回文档指定信息
documentURI，URL，domain，lastModified，location，title，readyState属性
-
documentURI:返回当前的网址（url）
-
URL
-
domain:返回当前的域名
lastModified
Location:
location.assign('传递一个url');
window.location = '传递一个url';
location.href = '传递一个url';
Title:
readyState
readyState属性返回当前文档的状态。
共有三种可能值：
加载HTML代码阶段（尚未完成解析）是“loading”，
加载外部资源阶段是“interactive”，
全部加载完成是“complete”。
4.3返回文档内部特定节点的集合
anchors,forms,images,links,scripts
五、获取元素节点（重点）
5.1 getElementById()
getElementById():通过标签的id属性获取元素
5.2 getElementsByTagName()
getElementsByTagName():通过标签名来获取元素。（数组）
5.3 getElementsByName()
getElementsByName():通过标签的name属性获取元素。（数组），
5.4 getElementsByClassName()
getElementsByClassName():通过标签的class属性来获取元素。（数组），有浏览器兼容性，主要是ie8以下。
5.5 querySelector()
querySelector():通过css选择器来获取元素
5.6 querySelectorAll()
querySelectorAll():通过css选择器来获取元素(数组)
5.7 getElement和querySelector的区别
query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变． 在使用的时候getElement这种方法性能比较好，query选择符则比较方便．
1.得到的元素不是需要很麻烦的多次getElementBy..的话，尽量使用getElementBy..,因为他快些。
2.得到的元素需要很麻烦的多次getElementBy..组合才能得到的话使用querySelector，方便。
3.看实际情况，你决定方便优先还是性能优先。
