关于DOM
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);// 通过APIvar 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()
-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('欢迎你');}
ToDoList实战
<!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>