1.概念
1.全称：Document Object Model，即文档对象模型
区别：BOM树：Browser Object Model 浏览器对象模型2.功能： DOM描绘了一个层次化的树，允许开发人员动态（CRUD）添加、删除、修改，查询页面的某一部分。
注：浏览器在解析HTML页面标记的时候，是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，组建好之后，按照树的结构将页面显示在浏览器的窗口中。
3.关系梳理：
html ---------------根元素
标签 ---------------元素
标签内属性 ------属性
标签包括内容----文本
2.DOM树层次
document代表当前的整个文档树，通过其操作整个页面
1.访问属性：
all ：获取所有的标签
images：获取所有的图片标签，可通过src属性加载图片
links：获取所有的a链接标签，可通过href属性设置超链接
理解：一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述，我们在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到应的对象操作对象的属性，则可以改变浏览器当前显示的内容
3.核心DOM模型
W3C DOM 标准被分为 3 个不同的部分
核心DOM - 针对任何结构化文档的标准模型
Document： 文档对象
Element： 元素对象
Attribute： 属性对象
Text： 文本对象
Comment： 注释对象
Node:节点对象，上述5个对象的父对象
XML DOM - 针对XML文档的标准模型
HTML DOM - 针对HTML文档的标准模型
3.1Document文档对象
1.创建/获取两种方式：
window.document
document
2.四个方法
getElementById(): 根据id属性获取到的永远只是一个Node对象，其余方法获取的均是数组
getElementsByClassName() 根据Class属性获取元素(即标签)对象们，是数组，注意s
getElementsByTagName() 根据元素名称(即标签名)获取Node对象们，是数组,注意s
getElementsByName() 根据name属性值获取Node对象们，是数组,注意s
3.创建其他DOM对象：
createAttribute（） ：创建属性对象
createComment() : 创建注释对象，可操作注释内容
createElement() : 创建新元素结点，即标签，必须通过父节点操作（重要）
createTextNode()：创建文本对象
4.属性
<body>
<input type="button" onclick="add()" value="添加" />
<script type="text/javascript">
var num = 1;
function add() {
//创建一个Node
var inputNode = document.createElement("input");
inputNode.setAttribute("type", "button");
inputNode.setAttribute("value", "按钮" + num);
num++;
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.appendChild(inputNode);
}
</script>
</body>实现全选/全不选功能
<body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />笔记本
电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本
电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="all" onclick="checkAll()" />全/不选<br />
<input type="checkbox" name="all" onclick="reverseAll()" />反选<br />
<input type="button" value="总金额：" onclick="getSum()" />
<span id="sumid"></span>
<script type="text/javascript">
var items = document.getElementsByName("item");
//全选，两种写法
function checkAll() {
//第一种情况：全选，全不选
var all = document.getElementsByName("all")[0];
for (var i = 0; i < items.length; i++) {
/* if(all.checked){
items[i].checked = true;
}else{
items[i].checked = false;
} */
items[i].checked = all.checked;
}
}
//反选，两种写法
function reverseAll() {
for (var i = 0; i < items.length; i++) {
/* if (items[i].checked) {
items[i].checked = false;
} else {
items[i].checked = true;
} */
items[i].checked = !items[i].checked;
}
}
function getSum(){
var sum = 0;
for(var i = 0; i < items.length; i++){
if(items[i].checked){
//因为获取到的值是String类型
sum += parseInt(items[i].value);
}
}
document.getElementById("sumid").innerHTML = "￥" + sum;
}
</script>
</body>3.2Element元素对象
1.获取/创建：document.createElement()
2.方法：
removeAttribute（） ：删除属性
setAttribute("属性名", "属性值") :设置属性
<body>
<a>点我试一试</a>
<input type="button" id="btn_set" value="设置属性">
<input type="button" id="btn_remove" value="删除属性">
<script>
//获取btn
var btn_set =document.getElementById("btn_set");
btn_set.onclick = function(){
//1.获取a标签
var element_a = document.getElementsByTagName("a")[0]; element_a.setAttribute("href","https://www.baidu.com");
}
//获取btn
var btn_remove =document.getElementById("btn_remove");
btn_remove.onclick = function(){
//1.获取a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.removeAttribute("href");
}
</script>
</body>3.3Node节点对象，其他5个的父对象，非特指
特点：所有dom对象都可以被认为是一个节点
方法：CRUD dom树，均是由直接父节点来操作
appendChild(e) :将元素e插入到当前节点中的末尾
removeChild(e) ：删除（并返回）当前节点的指定子节点e。
replaceChild()：用新节点替换一个子节点。
elt.insertBefore(newNode, childNode) :将某个节点插入到当前(父)节点内的指定节点前。即newNode添加到elt中，childNode之前。
属性：通过关系(父子关系、兄弟关系)找标签
nodeType 节点类型
nodeName 节点名称
nodeValue 节点值
parentNode：获取当前(节点)元素父节点
childNodes：获取当前(节点)元素所有下一级子节点
firstChild： 获取当前节点的第一个子节点
lastChild：获取当前节点的最后一个子节点
nextSibling：获取下一个相邻、平级的兄弟节点
previousSibling：获取上一个相邻、平级的兄弟节点
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
对于文本节点，nodeValue 属性是所包含的文本
对于属性节点，nodeValue 属性是属性值。
对于注释节点，nodeValue 属性注释内容。
nodeValue 属性对于文档节点和元素（标签）节点是不可用的。
4.HTML DOM(设置标签)
1.获取/设置标签体的值：innerHTML。
接收返回值时是获取标签体的值，
赋值时是设置标签体的值
2.value 主要用于获取/设置文本框中的内容
<body>
<div id="div1">
div
</div>
<script >
var div = document.getElementById("div1");
var innerHTML = div.innerHTML;
//alert(innerHTML); 获取值
//div标签中替换一个文本输入框
// div.innerHTML = "<input type='text'>";
//div标签中追加一个文本输入框
div.innerHTML += "<input type='text'>";
</script>
</body>5.正则表达式
1.正则表达式：定义字符串的组成规则。
1.单个字符:[] 如： [a] [ab] [a-zA-Z0-9_]
特殊符号代表特殊含义的单个字符: \d:单个数字字符 [0-9] \w:单个单词字符[a-zA-Z0-9_]
2.量词符号： ?：表示出现0次或1次 *：表示出现0次或多次 +：出现1次或多次 {m,n}:表示 m<= 数量 <= n
m如果缺省： {,n}:最多n次
n如果缺省：{m,} 最少m次
3.开始结束符号
^:开始
$:结束
2.正则对象：
1.两种创建方式：
1. var reg = new RegExp("正则表达式");
2**.var reg = /正则表达式/;**2.方法
test(参数):验证指定的字符串是否符合正则定义的规范，true为通过
var reg = new RegExp("^\\w{6,12}$");
//2.
var reg2= /^\w{6,12}$/;//注意：不是字符串形式，无转义字符
/* alert(reg);
alert(reg2);
*/
var username = "zhangsan";
//验证
var flag = reg.test(username);//字符串形式的多一个\,
alert(flag);6.经典例题：城市联动框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>城市联动框</title>
</head>
<body>
省份<select id="province" onchange="showCity()">
<option>省份</option>
<option>河南</option>
<option>山东</option>
<option>广东</option>
</select> 城市
<select id="city">
<option>城市</option>
</select>
<script type="text/javascript">
function showCity() {
var citys = [
[],
["郑州", "商丘", "洛阳", "南阳"],
["济南", "青岛", "菏泽"],
["广州", "深圳", "东莞"]
];
var provNode = document.getElementById("province");
var index = provNode.selectedIndex;
var data = citys[index];
var cityNode = document.getElementById("city");
//删除原来的数据
var childs = cityNode.childNodes;
//注意这里不要i++;因为childs.length每次都会重新判断，会减少
for (var i = 0; i < childs.length;) {
cityNode.removeChild(childs[i]);
}
for (var i = 0; i < data.length; i++) {
var optionNode = document.createElement("option");
optionNode.innerHTML = data[i];
cityNode.appendChild(optionNode);
}
}
</script>
</body>
</html>
每日问题：
1.获取所有的节点
document.all
2.获取所有的图片节点
document.images
3.获取所有的超链接节点
document.links;
4.获取当前元素的父节点
parentNode
5.获取当前元素的下一级子元素
childNodes;
6.获取当前节点的第一个子节点
firstChild
7.获取当前节点的最后的一个子节点
lastChild
8.节点的类型属性
nodeType
9.节点的名称属性
nodeName
10.节点的值属性
nodeValue
11.通过dom对象创建一个input标签，并且类型为button，按钮内容为提交
var inputNode = document.createElement("input");
inputNode.setAttribute("type","button");
inputNode.setAttribute("value","提交");
12.iinsertBefore(a,b) 这段代码的意思
将a节点插入在b节点之前
13.removeChild()方法的作用
删除指定的子节点
14.根据id获取元素，返回值
document.getElementById("id"); 返回一个节点对象
15.根据名字获取元素，返回值
document.getElementsByName("name"); 返回一个节点对象数组
16.根据类名称获取元素，返回值
document.getElementsByClassName("className"); 返回一个节点对象数组
17根据标签名称获取元素，返回值
document.getElementsByTagName("tagName"); 返回一个节点对象数组
