DOM是document object model的简写，文档对象模型
当网页被加载时，浏览器会创建页面的文档对象模型（DOM），我们可以通过DOM，访问所有的HTML元素，连同它们所包含的文本和属性
-可改变页面中的所有HTML元素(createElement/removeElement)
-可改变页面中的所有HTML属性（.属性名 =）
-可改变页面中的所有CSS样式(.style.样式名 =)
-能够对页面中的所有事件作出反应
可以通过以下几点查找元素的
1，通过标签名document.getElementsByTagName(‘标签名‘)
-返回HTMLCollection集合
2，通过IDdocument.getElementById(‘ID名‘)
-返回第一个id元素，不是集合
3，通过classdocument.getElementsByClassName(‘类名‘)
-返回HTMLCollection集合
4，通过CSS控制器document.querySelector()
-返回第一个CSS控制器的第一个元素document.querySelectorAll()
返回CSS控制器的所有元素的nodeList集合
以下是实操代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DOM与事件的原理与运用</title></head><body><div class="container"> <p id="item">DOM与事件的学习</p> <ul class="uls"> <li class="list">努力</li> <li>认真</li> <li>坚持</li> </ul></div><script> // 通过标签获取元素 var p = document.getElementsByTagName(‘p‘); // console.log(typeof p); // console.log(p); // console.log(p.item(0).firstChild.nodeValue); var div = document.getElementsByTagName(‘div‘); // console.log(div[0].children.item(0)) // 通过ID获取元素 var item = document.getElementById(‘item‘); // console.log(item); // console.log(typeof item.firstChild); // 通过class获取元素 var li = document.getElementsByClassName(‘list‘); // console.log(li); // console.log(li.item(0)); var uls = document.getElementsByClassName(‘uls‘); // console.log(uls); // console.log(uls.item(0).firstElementChild); // 通过API var api = document.querySelector(‘li‘); // console.log(api.firstElementChild); // console.log(typeof api); var apis = document.querySelectorAll(‘li‘); // console.log(apis);</script></body></html>其中元素节点有三大重要属性：
-nodeName:节点名称
-nodeType:节点类型
-ndeValue:节点值(此属性必须是文本节点才有的)
-firstChild:获取第一个节点
-firstElementChild:获取第一个元素节点
-children:获取所有元素节点
-parentElement:获取该元素的父元素
1，创建新元素
-document.createElment
2，给新元素添加HTML内容
-element.innerHTML/innerText
3，获取需要新增元素的父级元素
4，将新元素新增到HTML页面中
-parentelement.appendChild
注：
如果需要新增多个元素，最好创建一个片段，然后将新增元素添加在片段中，最后将片段新增到父元素下，来提升页面的加载效率
-document.createDocumentFragment:创建元素片段
元素的删除和新增流程大致一样，删除代码是：
-document.removeElement:移除元素
以下是实操代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>元素的新增和删除</title></head><body><div class="container"> <p id="item">DOM与事件的学习</p> <ul class="uls"> <li class="list">努力</li> <li>认真</li> <li>坚持</li> </ul></div><script> // 元素的单个新增 // 创建新增元素 var p = document.createElement(‘p‘); // 为新元素增加HTML内容 p.innerText= ‘我在PHP中文网学习‘; // console.log(typeof p.innerText); // 将新增元素附加到现在元素中，例如：添加在div里面 var div = document.querySelector(‘div‘); // console.log(div); div.appendChild(p); // 添加在BODY中 // document.body.appendChild(p); // 添加多个元素，运用片段 var frag = document.createDocumentFragment(); // 创建元素 // for (var i = 0; i<20;i++){ // var li = document.createElement(‘li‘); // li.innerText = ‘第：‘ + (i+1) +‘个‘; // frag.appendChild(li); // var ul = document.querySelector(‘ul‘); // } // ul.appendChild(frag); // 删除元素 var ul = document.querySelector(‘ul‘); var li = ul.children.item(0); console.log(li); ul.removeChild(li);</script></body></html>DOM时间允许JS在HTML文档元素中注册不同的时间处理程序，
时间通常与函数结合使用，函数不会在发生前被执行
HTML时间的例子：
-当用户点击鼠标时
-当网页加载时
-当图像加载时
-当鼠标移动到元素上时
-当输入字段被改变时
-当提交HTML表单时
-当用户出发按键时
on事件名称用来在HTML文档属性里面添加
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件</title></head><body> <div class="contaier"> <p>点击这个按钮，看它会发生什么</p> <button onclick="alert(‘欢迎你‘)">点我</button> </div></body></html>-addEventListener（）方法用于向指定元素添加事件句柄
-事件监听器的可添加多次，且不会覆盖已存在的时间句柄
-可以向任何DOM对象添加事件监听器，不仅仅是HTML
addEventListener(‘事件类型，例click’，函数，false冒泡/true捕获)
事件类型里面不用加on
<div class="container"> <p>点击这个按钮，看它会发生什么</p> <button onclick="alert(‘欢迎你‘)">点我</button> <p id="study"></p> </div><script> // 获取需要监听的元素 var button = document.querySelector(‘button‘); // console.log(button); // 设置监听事件 button.addEventListener(‘mouseenter‘, function (ev) { // ev.preventDefault() document.querySelector(‘#study‘).innerHTML = ‘PHP中文网‘; },false)</script>事件方法就是匿名函数，可以用在给HTML元素添加事件属性
// 函数表达式/匿名函数 button.onclick = function (ev) { alert(‘欢迎你‘); }<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ToDoList</title></head><body><form action=""> <label for="container">请输入留言内容</label> <input type="text" id="container"> <button>提交</button></form><div style="border: 1px solid black; width: 400px; height: 400px;margin-top: 20px"> <p>留言区</p> <ul> </ul></div><script> // 获取表单 var form = document.forms.item(0); // 监听提交事件submit // 获取提交元素 var button = document.querySelector(‘button‘); // 监听提交事件 form.addEventListener(‘submit‘, function (ev) { // 1,禁止提交按钮跳转 ev.preventDefault(); // 2,获取留言框 var ul = document.querySelector(‘ul‘); // 3,创建留言新增元素 var li = document.createElement(‘li‘); // 4,获取留言内容 // var value = document.querySelector(‘input‘).value; var value = form.container.value; // 判断留言内容是否为空 if (value.trim().length === 0) { alert(‘留言内容不能为空‘); form.container.focus(); return false; } else { // 5,为留言元素增长HTML文档 li.innerHTML = value; } // 改变留言顺序 if (ul.childElementCount === 0){ // 6,将留言新增元素添加到留言框 ul.appendChild(li); }else { ul.insertBefore(li, ul.firstElementChild); } // 7,清空留言输入框 form.container.value = ‘ ‘; form.container.focus(); },false);</script></body></html>原文：https://www.cnblogs.com/benbenhan/p/12518211.html