一、什么是HTML DOM
- HTML Document Object Model（文档对象模型）
- HTML DOM 定义了访问和操作HTML文档的标准方法
- HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)
二、DOM树
画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。
三、DOM节点
1.节点类型
HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的： 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点
其中，document与element节点是重点。
2.节点关系
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
-
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的孩子
- 同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分，以及节点之间的关系：
3.节点查找
有两种方式：
方式一：直接查找节点（这是一个查找方法）
// 节点查找(节点也就是一个个的标签) document.getElementById('idname');//按照id查找，拿到的是一个标签对象 document.getElementsByClassName('classname');//按照class标签去找，得到的是一个数组里存放的标签 document.getElementsByTagName('tagname');//通过标签名去找，拿到的也是一个数组 var a = document.getElementsByName('yuan'); //按照name属性去找,拿到的也是一个数组 console.log(a); 
// / ==2.======================== var ele = document.getElementById('div1'); console.log(ele.length);//返回undified var ele2 = document.getElementById('div3'); console.log(ele2.length);//返回undified var ele3 = document.getElementsByClassName('div2'); console.log(ele3.length); //返回1 var ele4 = document.getElementsByTagName('p'); console.log(ele4.length) ;//返回1 var ele5 = document.getElementsByName('haiyan'); console.log(ele5.length); //返回1//====3.=============================id和name的不支持 var div1=document.getElementById("div1");支持; var ele= div1.getElementsByTagName("p"); alert(ele.length);支持 var ele2=div1.getElementsByClassName("div2"); alert(ele2.length);不支持 var ele3=div1.getElementById("div3"); alert(ele3.length);不支持 var ele4=div1.getElementsByName("yuan"); alert(ele4.length) 上述的length：返回的是标签的个数，，一个是在局部下的，，，一个是在全局下的（document.~~~）
方式二：导航查找节点：通过某一个标签的位置去查找另一个标签（这是一个导航属性）
'''parentElement // 父节点标签元素children // 所有子标签firstElementChild // 第一个子标签元素lastElementChild // 最后一个子标签元素nextElementtSibling // 下一个兄弟标签元素previousElementSibling // 上一个兄弟标签元素'''
// 方式二：导航查找//////注意：1.如果是数组的话后面切记getElementsByClassName('div2')[0]// 2.查找元素的那些方法Elements加了s的打印的就是数组// 1，================== var ele = document.getElementsByClassName('div2')[0]; var ele1= ele.parentElement; console.log(ele1) ;//找div2标签的父亲// 2.=============== var ele = document.getElementById('div1'); var ele1 = ele.children; console.log(ele1) ; //找到div1下的所有的子标签// 3.=================== var ele = document.getElementById('div1'); var ele1 = ele.firstElementChild; console.log(ele1); //找到div1下的第一个子标签的元素// 4.================== var ele = document.getElementById('div1'); var ele1 = ele.lastElementChild; console.log(ele1); //找到div1下的最后一个子标签的元素// 5.=============== var ele = document.getElementsByName('haiyan')[0]; var ele1 = ele.nextElementSibling; console.log(ele1) ; //下一个兄弟标签元素// 6.=============== var ele = document.getElementsByName('haiyan')[0]; var ele1 = ele.previousElementSibling; console.log(ele1) //上一个兄弟标签元素lallala//lkkaakkka//aaaaaaaaaaaaaa//hrllo
//
4.节点操作
1.创建节点
createElement(标签名) ：创建一个指定名称的元素。
例：var tag=document.createElement(“input") tag.setAttribute('type','text'); 2.添加节点
追加一个子节点（作为最后的子节点）somenode.appendChild(newnode) 把增加的节点放到某个节点的前边somenode.insertBefore(newnode,某个节点);
3.删除节点
removeChild()：获得要删除的元素，通过父元素调用删除
4.替换节点
somenode.replaceChild(newnode, 某个节点);
5.节点属性操作
1.获取文本节点的值：innerText innerHTML
innerText:不管你是赋值还是取值，只能识别纯文本
innerHtml:既可以识别纯文本，也可以识别标签
// 文本属性// 1.innerText:不管你是赋值还是取值，只能识别纯文本 var a1 = document.getElementsByClassName('c2')[0];// console.log(a1); //取值操作 console.log(a1.innerText); //你好吗/ console.log(a1.innerHTML); //你好吗/ //赋值操作 a1.innerText='Egon'; a1.innerHTML='hello';// 2.innerHtml:既可以识别纯文本，也可以识别标签 var b1 = document.getElementsByClassName('c2')[1];// console.log(b1); //取值操作 console.log(b1.innerText); console.log(b1.innerHTML); //赋值操作 b1.innerText = 'lala'; b1.innerHTML = ''; 2.属性（attribute）操作：
elementNode.setAttribute(name,value) elementNode.getAttribute(属性名) <-------------->elementNode.属性名(DHTML) elementNode.removeAttribute(“属性名”);
泛指所有的属性 getAttribute 可以操作其他的，，但是不可以操作class
DIV
3.value获取当前选中的value值
1.input
2.select （selectedIndex） 3.textarea4.关于class的操作：
// class属性============= var ele = document.getElementsByClassName('c1')[0]; console.log(ele.className); //打印类的名字 ele.classList.add('hide'); console.log(ele); // 5.改变css样式：
Hello world!
document.getElementById("p2").style.color="blue"; .style.fontSize=48px
四、DOM Event(事件)
1.事件类型
onclick 当用户点击某个对象时调用的事件句柄。ondblclick 当用户双击某个对象时调用的事件句柄。onfocus 元素获得焦点。 练习：输入框onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.onkeypress 某个键盘按键被按下并松开。onkeyup 某个键盘按键被松开。onload 一张页面或一幅图像完成加载。onmousedown 鼠标按钮被按下。onmousemove 鼠标被移动。onmouseout 鼠标从某元素移开。onmouseover 鼠标移到某元素之上。onmouseleave 鼠标从元素离开onselect 文本被选中。onsubmit 确认按钮被点击
2.绑定事件方式
方式一
divdiv2
方式二
//方式二// 事件的绑定方式2：标签对象.on事件 = function (){} var ele=document.getElementsByClassName("c1")[0]; ele.οnclick=function () { console.log(this); // this 代指： 当前触发时间的标签对象； this.style.fontSize="30px" }; 3.事件介绍
4.事件传播
实例练习
1.左侧菜单
2.搜索框
3.模态对话框
4.表格案例
5.select移动
6.二级联动
7.跑马灯与tab切换