DOM的作用：
在网页界面开发中，我们除了可以看到html和css所完成的静态界面外，还可以看到很多动态的效果。比如，tab切换、轮播图、放大镜等，而这些动态效果都是需要DOM操作来完成。
总而言之，可以用DOM实现网页的动态交互效果。
DOM的概念：
DOM （Document Object Model）文档对象模型。
Document，文档，指的是我们网页上的标记和内容。
Object Model，对象模型，指定的是把网页上的标记和内容看成一个对象。
对象可以理解为是一个工具库（api），库中的工具可以帮助我们操作网页上的标记和内 容。
浏览器会把结构化文档（比如HTML和XML）解析成一系列的节点对象，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口(工具的操作方式)，以达到使用编程语言操作文档的目的（比如增删内容）。所以，DOM可以理解成文档（HTML文档、XML文档和SVG文档）的编程接口（操作工具）
节点对象
DOM的最小组成单位叫做节点（对象），一个文档的树形结构（DOM树），就是由各种不同类型的节点组成。
节点的类型
对于HTML文档，节点主要有以下六种类型：Document节点、DocumentType节点、Element节点、Attribute节点、Text节点和DocumentFragment节点。
| 节点类型 |
名称 |
含义 |
| Document 9 |
文档节点 |
整个文档（document） |
| DocumentType 10 |
文档类型节点 |
文档的类型（比如<!DOCTYPE html>） |
| Element 1 |
元素节点 |
HTML元素（比如<body>、<a>等） |
| Attribute 2 |
属性节点 |
HTML元素的属性（比如class=”right”） |
| Text 3 |
文本节点 |
HTML文档中出现的文本 |
| DocumentFragment 11 |
文档碎片节点 |
文档的片段（临时仓库） |
通过对文档树的观察，节点对象从树顶到以下各个节点是有级别的。并且节点与节点之间也是各自有关系的。
祖孙关系、父子关系、兄弟关系
节点操作
获取节点对象
获取单个节点对象为该节点对象
获取多个节点对象为一个数组, 可以通过索引方式获取单个节点对象
1. 通过标签的id获取单个节点对象
document.getElementById()
2. 通过标签名获取一组节点对象
document.getElementsByTagName()
3. 通过name属性获取一组节点对象
document.getElementsByName()
4. 通过类名获取一组节点对象
document.getElementsByClassName()
5. 通过选择器来获取单个节点对象
document.querySelector() # id ('#id值') class('.class值') tag('tag名')
6. 通过选择器来获取一组节点对象
document.querySelectorAll()
script标签的位置
1. body标签最下面
<script> </script>
2. head标签中
<script> window.onload = function(){} </script>
节点对象常用操作
nodeType 获取节点类型所对应的数字
tagName 获取节点对象对应的标签名
innerHTML 设置节点对象所对应的内容(从对象的起始位置到终止位置的全部内容,不包括Html标签.)
outerHTML 设置节点对象所对应的内容(除了包含innerHTML的全部内容外, 还包含对象标签本身.)
innerText 设置节点对象所对应的内容(仅是文本内容)
id 设置或获取节点对象所对应的标签的id属性值
className 设置或获取节点对象所对应的标签的class属性值
title 设置或获取节点对象所对应的title属性值
操作节点对象所对应的标签的属性的工具
getAttribute('标签属性名') 获取标签的指定属性的值,也可以获取自定义属性
setAttribute('标签属性名','值') 设置标签的指定属性,也可以设置自定义属性
removeAttribute('标签属性名') 移除指定标签的属性
创建节点对象
document.createElement('标签名') 创建一个Element类型的节点对象
document.createTextNode('文本内容') 创建一个Text类型的节点对象
插入节点
节点对象.append(node) 插入一个或多个节点或字符串,没有返回值
节点对象.appendChild(node) 把一个节点对象追加到指定节点对象的最后面
节点对象.insertBefore(newNode,oldNode) 把一个节点追加到指定节点对象之前
删除节点
节点对象.remove() 删除节点自身
节点对象.removeChild(node) 删除节点对象中指定的节点
节点对象的遍历
childNodes 获取当前元素节点的所有子节点
children 获取一组只是Element类型的子节点 与childNodes类是
firstChild 获取当前元素节点的第一个子节点
firstElementChild 获取元素类型为Element的第一个节点
lastChild 获取当前元素节点的最后一个子节点
lastElementChild 获取当前元素节点的最后一个子节点Element
parenNode 获取当前节点的父节点
previousSibling 获取当前节点的前一个同级节点
previousElementSibling 获取当前节点的前一个同级节点Element
nextSibling 获取当前节点的后一个同级节点
nextElementSibling 获取当前节点的后一个同级节点Element
表单相关的属性节点对象
节点对象.value 针对所有表单元素
获取或设置表单项的值 可读可写
节点对象.checked 针对单选框 多选框
设置或获取checked属性 可读可写
节点对象.checked = true 被选中
节点对象.checked = false 不被选中
节点对象.selected 针对下拉框
获取或设置 selected属性 可读可写
节点对象.selected = true 被选中
节点对象.selected = false 不被选中
节点对象.readOnly 针对文本框 密码框 文本域
获取或设置readOnly属性 可读可写
节点对象.readOnly = true
节点对象.readOnly = false
节点对象.disabled 针对下文本框 密码框 文本域
获取或设置disabled属性 可读可写
节点对象.disabled = true
节点对象.disabled = false
操作节点对象所对应的样式
标签节点对象.style['样式属性名'] = '样式属性值'
标签节点对象.style.样式属性名 = '样式属性值'
注:
对于font-size,text-height等,后面单词的首字母要大写