1，DOM操作
1.1 概念
所谓DOM，全称Document Object Model 文档对象模型，DOM是W3C（World Wide Web Consortuum ）标准，同时也定义了访问诸如XML和HTML文档的标准。DOM是一个使程序和脚本有能力动态地访问和更新文档的内容，结构以及样式的平台和语言中立的接口。
在文档中一切皆对象，比如 html，body，div，p等等都看做对象，那么我们如何来点击某个盒子让他变色呢？
DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让 js 操作 html 元素而制定的一个规范。
1.2 解析过程
HTML 加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementByid 是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
1.3 DOM（树）一切皆是节点
HTML 标签通过浏览器的解析后才会形成DOM树，此后HTML中的每个标签元素，属性，文本都能看做是一个DOM的节点，JavaScript都能通过DOM的提供的编程接口操作到每个节点，去了解浏览器的渲染机制能够帮助我们了解DOM。
上图可知，在HTML当中，一切都是节点，并且文本节点和属性节点属于元素节点：
- 元素节点：HTML标签
- 文本节点：标签中的文字（比如标签之间的空格，换行）
- 属性节点：标签的属性
整个html 文档就是一个文档节点，所有的节点都是Object。要注意：文本节点和属性节点就像这棵DOM树的果子，而元素节点就是树枝，所以，在操作时，一定要记顺枝摘果：得先取到元素节点，然后再操作子节点！！！
1.4 DOM可以做什么？
- 找对象（元素节点）
- 设置元素的属性值
- 设置元素的样式
- 动态创建和删除元素
- 事件的触发响应：事件源，事件，事件的驱动程序
1.5 清楚DOM的结构
- 获取文档对象：document
- 获取html：document.documentElement
- 获取body：document.body
1.6 常用DOM对象方法
下面列出常用的DOM对象方法：
操作代码如下：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.active{
width: 200px;
height: 200px;
background-color:red;
color: white;
line-height:200px;
text-align:center;
font-size:30px;
}
</style>
</head>
<body>
<div id="box">
<p id="active">this is p label</p>
<p>this also is p label</p>
</div>
<!-- 动态的操作节点
1，创建节点 createElement()
2，插入节点 appendChild()
insertBefore(newNode, node)
3，删除节点 removeChild()
4，替换节点 replaceChild(newNode, node)
5，创建文本节点 createTextNode()-->
<script type="text/javascript">
var oDiv = document.getElementById('box');
// 创建节点
var newNode = document.createElement('p');
// 插入节点
oDiv.appendChild(newNode);
// 设置属性
newNode.setAttribute('class', 'active');
// 创建文本 节点
var textNode = document.createTextNode('this is p label too');
oDiv.appendChild(textNode);
var newNode1 = document.createElement('p');
var newNode2 = document.createElement('p');
oDiv.appendChild(newNode1);
oDiv.appendChild(newNode2);
// 创建innerHTML
newNode1.innerHTML = '<a href="#">123.qq.com</a>';
newNode2.innerText = '<a href="#">123.qq.com</a>';
// 释放节点
// newNode2 = null;
// 删除节点
// oDiv.remove(newNode2)
</script>
效果如下：
在页面查看的html代码如下：
1.7 获取其他DOM（事件源）的四种方法
其实可以通过使用getElement系列方法，取到元素节点。
//方式一：通过id获取单个标签
var oDiv1 = document.getElementById("box1");
//方式二：通过 标签名 获得 标签数组，所以有s
var oDiv2 = document.getElementsByTagName("div")[0];
//方式三：通过 类名 获得 标签数组，所以有s
var oDiv3 = document.getElementsByClassName("box")[0];
//方式四：通过 name属性 获得id号，返回元素对象数组
var oDiv3 = document.getElementsByName("box")[0];
1.8 获取/设置元素的属性值
- 1，element.getAttribute(attrubuteName) // 括号传入属性名，返回对应属性的属性值
- 2，element.setAttribute(attributeName, attributeValue) // 传入属性名及设置的值
1.9 创建节点 Node
- 1，document.createElement('h3') // 创建一个html元素
- 2，document.createTextNode(string) // 创建一个文本节点
- 1，document.createAttribute('class') // 创建一个属性节点
1.10 增添节点
- 1，element.appendChild(Node) // 往element内部最后面添加一个节点，参数是节点类型
- 2，element.insertBefore(newNode, existingNode) // 在element内部中在existingNode前面插入 newNode
1.11 删除节点
- 1，element.removeChild(Node) // 删除当前节点下指定的子节点，删除成功返回该删除的节点，否则返回 null
2，事件
JS 是事件驱动为核心的一门语言。
2.1，事件三要素
事件源，事件，事件驱动程序
比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯的开和关。
再比如，网页上弹出一个广告，我点击右上角的 x，广告就关闭了。这件事情里，事件源是：x，事件是 onclick。事件驱动程序是：广告关闭了。
于是我们可以总结出：谁引发的后续事件，谁就是事件源。
- 事件源：引发后续事件的html标签
- 事件：js已经定义好了（如下图）
- 事件驱动程序：对样式和HTML的操作，也就是DOM。
代码书写步骤如下：
（1）获取事件源：document.getElementById(“box”);
//类似与ios语言的UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
（2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
（3）书写事件驱动程序：关于DOM的操作
常用事件如下：
2.2，绑定事件的方法
直接绑定匿名函数
var oDiv = document.getElementById("box");
//绑定事件的第一种方式
oDiv.onclick = function () {
alert("我是弹出的内容");
};
先单独定义函数，再绑定
var oDiv = document.getElementById("box");
//绑定事件的第二种方式
oDiv.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
alert("我是弹出的内容");
};
注意上方代码的注释。绑定的时候，是写 fn，而不是 fn()。fn代表的是整个函数，而fn() 代表的是返回值。
行内绑定
<!--行内绑定-->
<div id="box" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是弹出的内容");
}
</script>
注意第一行代码，绑定时，是写的“fn()”，不是写的“fn”。因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。
2.3 JavaScript入口函数 window.onload()
此函数调用，是当页面加载完毕（文档和图片）的时候，触发 onload() 函数，文档先加载，图片资源后加载。
<script type="text/javascript">
window.onload = function () {
console.log("james"); //等页面加载完毕时，打印字符串
}
</script>
有一点我们要知道：js的加载是和html 同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候onload事件就能派上用场了，我们可以把使用元素的代码放在 onload 里，就能保证这段代码是最后执行。
window.onload() 方法存在的问题
- 图片加载完成才调用onload方法，大家想个问题，如果现在用户访问JD商城页面，如果JD商城中的脚本文件在 window.onload() 方法调用，如果此时用户网速卡了，然后图片资源加载失败了，此时用户是做不了任何操作的，所以 window.onload() 方法有很大的问题。
- window.onload() 方法如果脚本中书写两个这样的方法，那么会有事件覆盖现象。
2.4 样式属性操作
所谓样式书写，就是对之前所讲解的 style 标签中的属性进行操作，并且通过 js 控制盒模型的属性（width，height等），控制盒子的显示隐藏（display: none|block），控制盒子的颜色切换（background:red|green）等等。
首先大家明确一点，你要操作文档对象了，要遵循事件三步走：
- 获取事件源
- 事件
- 事件驱动程序
<div id='box'></div>
<script>
window.onload = function(){
//1.获取事件源(事件对象，在文档中一切的标签都是对象)
var oDiv = docuement.getElementById('box');
//2.事件
oDiv.onclick = function(){
//3.事件驱动程序 ps:记得 所有的style中使用的像margin-left
//在js操作时都是用marginLeft属性进行赋值
oDiv.style.backgroundColor = 'yellow'；
}
};
</script>
2.5 值的操作
所谓值的操作，就是对前闭合标签和后闭合标签中间的文本内容的设置和获取。
- 双闭合标签：innerText或者innerHTML
- 单闭合标签：除了img标签，就剩 input了，使用value进行赋值
<div id='box'></div>
<input type='text' value = 'james' id='user'>
<script>
window.onload = function(){
//1.获取事件源(事件对象，在文档中一切的标签都是对象)
var oDiv = docuement.getElementById('box');
var oInput = docuement.getElementById('user');
//2.事件
oDiv.onclick = function(){
//3.事件驱动程序
oDiv.innerText = 'james'；//仅仅设置文本内容
oDiv.innerHTML = '<h1>james</h1>';//将标签和文本内容一起解析
};
//2.事件
oInput.onclick = function(){
//3.事件驱动程序 只有有value属性的 才能使用value赋值和设置值
oInput.value = 'the king'；
}
};
</script>
2.6 标签属性操作
所谓标签属性，就是对标签中（字面上看到的）属性的操作。比如像每个标签中 id，class，title，img 标签的src属性和 alt属性，a标签的href属性，input标签中的name，type 属性等等。
<script>
//window.onload页面加载完毕以后再执行此代码
window.onload = function () {
//需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var oImg = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
oImg.onmouseover = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd2.png";
// this.src = "image/jd2.png";
}
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
oImg.onmouseout = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd1.png";
}
}
</script>
3，节点操作
都是函数（方法）。JavaScript原生方法对DOM节点的操作包括：访问（查找），创建，添加，删除，替换，插入，复制，移动等。
总体代码总结如下：
//查找节点
document.getElementById("id");// 通过id查找，返回唯一的节点
document.getElementsByClassName("class");// 通过class查找，返回值为nodeList类型
document.getElementsByTagName("div");// 通过标签名查找，返回值为nodeList类型
//创建节点
document.createDocumentFragment();//创建内存文档碎片
document.createElement();//创建元素
document.createTextNode();//创建文本节点
//添加节点
var ele = document.getElementById("my_div");
var oldEle = document.createElement("p");
var newEle=document.createElement("div");
ele.appendChild(oldEle);
//删除节点
ele.removeChild(oldEle);
//替换节点
ele.replaceChild(newEle,oldEle);
//插入节点
ele.insertBefore(oldEle,newEle);//在newEle之前插入 oldEle节点
//复制节点
var cEle = oldEle.cloneNode(true);//深度复制，复制节点下面所有的子节点
cEle = oldEle.cloneNode(false);//只复制当前节点，不复制子节点
//移动节点
var cloneEle = oldEle.cloneNode(true);//被移动的节点
document.removeChild(oldEle);//删除原节点
document.insertBefore(cloneEle,newEle);//插入到目标节点之前
下面我们一一学习。
3.1 创建节点
格式如下：
新的标签(元素节点) = document.createElement("标签名");
比如，如果我们想创建一个 li 标签，或者是创建一个不存在的 adbc 标签，可以这样做：
<script type="text/javascript">
var a1 = document.createElement("li"); //创建一个li标签
var a2 = document.createElement("adbc"); //创建一个不存在的标签
console.log(a1);
console.log(a2);
console.log(typeof a1);
console.log(typeof a2);
</script>
结果如下
3.2 插入节点
插入节点有两种方式，他们的含义是不同的。
方式1：
父节点.appendChild(新的子节点);
解释：父节点的最后插入一个新的子节点（属性节点，文本节点，元素节点）。
方式2：
父节点.insertBefore(新的子节点,作为参考的子节点);
解释：
- 在参考节点前插入一个新的节点。
- 如果参考节点为 null，那么他将在父节点最后插入一个子节点。
3.3 删除节点
格式如下：
父节点.removeChild(子节点);
解释：用父节点删除子节点。必须要指定是删除那个子节点。
如果我想删除自己这个节点，那么可以这样做：
node1.parentNode.removeChild(node1);
4，DOM操作的常用属性
4.1，获取当前元素的父节点
element.parentNode //返回当前元素的父节点对象
4.2，获取当前元素的子节点
//返回当前元素所有子元素节点对象，只返回HTML节点 element.chlidren //返回当前元素多有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点） element.chilidNodes //返回当前元素的第一个子节点对象 element.firstChild //返回当前元素的最后一个子节点对象 element.lastChild
4.3，获取当前元素的同级元素
//返回当前元素的下一个同级元素 没有就返回null element.nextSibling //返回当前元素上一个同级元素 没有就返回null element.previousSibling
4.4，获取当前元素的文本
//返回元素的所有文本，包括html代码 element.innerHTML //返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码 element.innerText
4.5，获取当前元素的节点类型
//返回节点的类型,数字形式（1-12）常见几个1：元素节点，2：属性节点，3：文本节点。 node.nodeType
4.6，设置样式
//设置元素的样式时使用style，这里以设置文字颜色为例 element.style.color=“#eea”;
5，DOM的节点对象属性在各浏览器兼容性处理
5.1 innerHTML属性和innerText属性的区别
document 对象中有 innerHTML和 innerText 两个属性，这两个属性都是获取 document 对象的文本内容的，这两个属性的区别下面学习一下：
innerHTML 返回从 body元素开始所有的带标签的文本内容，并按照在HTML文档中的原格式显示
innerText 返回从 body 元素开始所有的文本内容，但是它去除HTML标签
同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了。
下面看个示例：
<body>
<div id = "box1">
hello div 1
</div>
<div id = "box2">
<p>hello p 1</p>
<p>hello p 2</p>
</div>
<script type="text/javascript">
var oNode = document.getElementById('box1');
console.log(oNode.innerHTML);
console.log(oNode.innerText);
</script>
控制台打印如下：
通过示例，我们很清楚的发现，innerHTML是带有标签的文本内容，并且按照原格式显示（包括空格）；而innerText只是内容，去除了HTML标签。
6，DOM操作的代码过程
6.1 先找树枝——获取元素节点
首先可以通过 getElement 系列的方法，取到元素节点。
下面展示一个代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.btn{
width: 200px;
height: 200px;
background-color:red;
color: white;
line-height:200px;
text-align:center;
font-size:30px;
}
</style>
</head>
<body>
<div class="btn" id="box" onclick="add()">
hello dom
</div>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('box');
console.log(oDiv);
<!-- 这个注释的代码 只能一次性的转换-->
<!-- oDiv.onclick = function add(){-->
<!-- // this指向了当前元素的节点对象-->
<!-- console.log(this);-->
<!-- this.style.backgroundColor = 'green';-->
<!-- }-->
var flag = true;
oDiv.onclick = function add(){
if (flag){
this.style.backgroundColor = 'green';
flag = false;
}else{
this.style.backgroundColor = 'red';
flag = true;
}
}
}
</script>
</body>
</html>
原图和效果图如下：
下面我们通过 name属性 ，标签属性和 class名，直接看一下怎么使用：
<div class="btn" id="box" onclick="add()">
hello dom
</div>
<script type="text/javascript">
var idName = document.getElementById("box");
var className = document.getElementsByClassName("btn");
var tagName = document.getElementsByTagName("div");
var name = document.getElementsByName("btn");
console.log(idName)
console.log(className)
console.log(tagName);
console.log(name);
</script>
结果如下：
注意：获取元素节点时，一定要注意：获取节点的语句，必须在DOM渲染完成后执行。可以有两种方式实现：1将JS代码写在BODY之后，2将代码写到 window.onload函数之中；后面三个 getElements，取到的是数组格式，不能直接添加各种属性，而应该去除数组的每一个单独操作：
getElementsByName("name1")[0].onclick = function;
6.2 再找树枝摘果子——查看设置属性节点
首先我们注意：查看和设置属性节点，必须先取到元素节点，才能使用；
下面看查看和设置属性节点函数：
1、查看属性节点：getAttribute("属性名")；
2、设置属性节点：setAttribute("属性名","新属性值")；
下面代码展示了查看和设置属性节点：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color:red;
color: white;
line-height:200px;
text-align:center;
font-size:30px;
}
</style>
</head>
<body>
<p title="p的title">this is p</p>
<ul id="classList">
<li class="'item">JavaScript</li>
<li class="'item">CSS</li>
</ul>
<script type="text/javascript">
var oP = document.getElementsByTagName('p')[0];
console.log(document.getElementsByTagName('p'));
console.log(oP);
// 设置属性值 有一个必需的参数，这个节点对象的名字
var title = oP.getAttribute('title');
console.log(title);
var className = oP.getAttribute('class');
console.log(className);
// 设置属性值
oP.setAttribute("id", 'box');
</script>
</body>
我们查看网页（包括控制台打印的结果）：
查看网页源码，我们发现id被赋值了：
注意：这里 setAtribute()函数在IE浏览器中可能会存在兼容性问题。比如在IE中不支持这个函数设置 style onclick。等样式属性和事件属性。
我们推荐使用符号法替代上述函数：
eg:dom1.style.color="" dom1.onclick="" dom1.src=""
总结：js修改DOM节点的样式
1，使用setAttribute() 设置 class和style 属性，但是存在兼容性问题，不提倡；
div.setAttribute("class","cls1");
2，使用 .className直接设置class类，注意是className而不是 .class：
div.className = "cls1";
3，使用 .style 设置单个属性，注意属性名要用驼峰命名法：
div.style.backgroundColor = "red";
4，使用 .style 或者 .style.cssText 设置多个样式属性：
div.style = "background-color:red;color:yellow;" div.style = "background - color:red;color:yellow" √
6.3 查看设置文本节点
- .innerText:取到或设置节点里面的文字内容;
- .innerHTML:取到或设置节点里面的HTML代码；
- .tagName:取到当前结点的标签名。标签名全部大写
上面已经学习过，就不多学习。
7，DOM事件练习
在HTML中允许JavaScript对HTML事件作出反应。比如当用户点击一个HTML元素时，如需要在用户点击某个元素执行代码，请把JavaScript代码添加到HTML事件属性中。
HTML事件的例子练习：
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
也就是上面学习的事件常用函数的使用，下面一一练习：
7.1，当用户点击时，会改变<h1>元素的内容
代码如下：
<h1 onclick="this.innerHTML='hello!'">请点击这段文本!</h1>
原图及其效果：
7.2，下面会从事件处理程序中调用函数
代码如下（效果和上面相同，这里不展示）
<h1 onclick="changetext(this)">请点击这段文本!</h1>
<script type="text/javascript">
function changetext(id){
id.innerHTML = 'hello!';
}
</script>
7.3，向button元素分配一个onclick()事件（HTML事件属性）
如需向HTML元素分配事件，你可以使用事件属性。
<p >点击按钮来执行<b>displayDate()</b>函数。</p>
<button onclick="displayDate()">试一试</button>
<p id="demo"></p>
<script type="text/javascript">
function displayDate(){
document.getElementById('demo').innerHTML = Date();
}
</script>
我们点击按钮时，会执行名为 displayDate()的函数，效果如下：
7.4，为button元素分配onclick()事件（使用HTML DOM分配事件）
HTML DOM 允许你使用JavaScript向HTML元素分配事件，比如为button元素分配 onclick事件：
<p >点击按钮来执行<b>displayDate()</b>函数。</p>
<button id="myBtn">试一试</button>
<p id="demo"></p>
<script type="text/javascript">
document.getElementById('myBtn').onclick=function(){
displayDate()
};
function displayDate(){
document.getElementById('demo').innerHTML=Date();
}
</script>
效果和上面相同，只不过名为 displayDate 的函数被分配给了 id='myBtn'的HTML元素，当按钮被点击时，将执行函数。
7.5，onload() 和 onunload() 事件
当用户进入或离开页面时，会触发 onload 和 onunload 事件
onload事件用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。等待文档元素加载完成才会调用 onload() 事件。
onload和 onunload事件可用于处理 cookies。
代码如下：
<body onload="checkCookies()">
<p>弹出的提示框会告诉你浏览器是否已启用 cookie</p>
<script type="text/javascript">
function checkCookies(){
if (navigator.cookieEnbaled==true)
{
alert('Cookies are enabled')
}else{
alert('Cookies are not enabled')
}
}
</script>
效果如下：
7.6，onchange事件
onchange事件常用于输入字段的验证。
下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。
代码如下：
请输入你的英文名：
<input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p>
<script type="text/javascript">
function myFunction(){
var x=document.getElementById('fname');
x.value = x.value.toUpperCase();
}
</script>
效果如下：
7.7，onmouseover和onmouseout事件
onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。下面一个简单的 onmouseover-onmouseout 例子：
<style type="text/css">
.active{
width: 200px;
height: 200px;
background-color:red;
color: white;
line-height:200px;
text-align:center;
font-size:30px;
}
</style>
</head>
<body>
<div class="active" onmouseover = 'mOver(this)' onmouseout='mOut(this)'>
Mouse Over Me
</div>
<script type="text/javascript">
function mOver(obj){
obj.innerHTML = 'thank you';
}
function mOut(obj){
obj.innerHTML = 'please move mouse cursor';
}
</script>
效果如下：
7.8，onmousedown，onmouseup以及 onclick 事件
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。
代码如下：
<style type="text/css">
.active{
width: 200px;
height: 200px;
background-color:red;
color: white;
line-height:200px;
text-align:center;
font-size:30px;
}
</style>
</head>
<body>
<div class="active" onmouseover = 'mDown(this)' onmouseout='mUp(this)'>
Mouse Over Me
</div>
<script type="text/javascript">
function mDown(obj){
obj.style.backgroundColor = 'green';
obj.innerHTML = 'level to mouse';
}
function mUp(obj){
obj.style.backgroundColor = 'blue';
obj.innerHTML = 'thank you ';
}
</script>
效果如下：
参考文献：https://www.cnblogs.com/Ry-yuan/p/6918155.html