什么是DOM
DOM(document object model) 文档对象模型，表示一个页面文档的模型
DOM的作用
是浏览器提供的一个操作页面内容的接口,通过DOM，编程语言可以操作浏览器加载的页面中的任意元素（a,p,div,span,文本、脚本.....）,DOM建立了js和页面的桥梁
DOM特点
增、删、改、查
先说DOM中的查，
查分为三大类。分别是：通过元素间的关系、通过HTML间的关系、通过选择器查找
元素节点
元素间的关系
假如声明一个名为nav的变量
nav.parentElement //名为nav的父辈元素节点
nav.children //名为nav下的所有子元素节点
firstElementChild //名为nav下的第一个子元素
lasElementChild //名为nav下的最后一个子元素
previousElementSibling //名为nav的前一个元素，兄弟元素
nextElementSibling //名为nav的后一个元素，兄弟元素
HTML节点
HTML间的关系
var item=document.getElementById('ID名'); //通过ID查找
var item=document.getElementsByClassName('class名'); //通过类名查找
var item=document.getElementsByTagName('标签名'); //通过HTML中的标签名查找
var item=document.getElementsByName('表单元素中的name'); //通过HTML的表单元素中的name属性
HTML节点的特点是
1）ID查找特点：ID具有唯一性，只有一个所以只能找到一个
2）类查找特点：类是多个性，可以找到很多，特点是返回的是动态数组集合
3）标签查找特点：标签是多个性，可以找到很多，特点是返回的是动态数组集合
4）name查找特点：name是多个性，可以找到很多，特点是返回的是动态数组集合
选择器节点
利用选择器
var ele=document.querySelector(‘支持ID名、类名、标签’); //找到一个选择器
var ele=document.querySelectorAll(‘支持ID名、类名、标签’); //找到多个选择器
选择器节点的特点是
1）都支持ID名、class名、HTML标签
以上是查
——————————————————我是分割线—————————————————
DOM中的删除
DOM中的删除： remove()；
remove()要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点把自己删掉，例如：
HTML代码块
<p>我是JavaScript中的DOM文档对象模型，点击我删除</p>
JavaScript代码块
var rse = document.querySelector('p'); //通过选择器找到删除节点
rse.onclick = function() { //节点点击事件
rse.parentElement.removeChild(this); //删除父节点
}
以上是删
——————————————————我是分割线—————————————————
DOM中的增
DOM中的增加： createElement();
DOM中的追加： appendChild();
示例：
HTML代码块
<input type="text" id="inp" value="" /> //文本输入框
<button onclick="btn()">添加</button> //添加按钮
<p></p> //文本指定地点
JavaScript代码块
function btn() {
var p = document.createElement('p'); //创建p元素
document.querySelector('p').appendChild(p).innerHTML = inp.value; //追加文本内容到指定地点
inp.value = ""; //添加按钮点击一次输入框清空一次
}
以上是增
——————————————————我是分割线—————————————————
DOM中的改
DOM中的改，可以改变HTML中的文档
示例：
HTML代码块
<p id="p2">Hello world!</p> //内容，指定地点
JavaScript代码块
document.getElementById("p2").innerHTMl="Are you ok?"; //将指定地点的内容修改为Are you ok?
DOM中的改，可以改变css中的样式
示例：
HTML代码块
<p id="p2">Hello world!</p> //内容，指定地点
JavaScript代码块
document.getElementById("p2").style.color="blue"; //将指定地点字体颜色改为蓝色
