什么是 DOM？
DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：
"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
W3C DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
什么是 XML DOM？ －－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
整个文档是一个文档节点(document对象) 整个HTML文档
每个 HTML 元素是元素节点(element 对象) 如 <p></p> <div></div>等标签
HTML 元素内的文本是文本节点(text对象)
每个 HTML 属性是属性节点(attribute对象) class="head"
注释是注释节点(comment对象)
注意：卡可以通过element对象找到text对象和attribute对象
节点(自身)属性:
attributes - 节点（元素）的属性节点
nodeType – 节点类型
nodeValue – 节点值
nodeName – 节点名称
innerHTML - 节点（元素）的文本值
导航属性:
parentNode - 节点（元素）的父节点 (推荐，重要)
firstChild – 节点下第一个子元素
lastChild – 节点下最后一个子元素
childNodes - 节点（元素）的子节点
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> </head> <body> <div class="div1"> <p class="p1">hello p</p> <div class="div2">hello div</div><br> </div> </body> <script> var ele=document.getElementsByClassName("p1"); document.write(ele,"<br>"); document.write("节点（元素）的属性节点: ",ele[0].attributes ,"<br>"); document.write("节点类型: ",ele[0].nodeType,"<br>"); document.write("节点名称: ",ele[0].nodeName,"<br>"); document.write("节点值: ",ele[0].nodeValue,"<br>"); document.write("节点文本值: ",ele[0].innerHTML); ele[0].innerHTML="p标签修改后文本的hello world"; var ele_p = ele[0].parentNode; document.write("<br>","p标签的父节点: ",ele_p.nodeName,"<br>"); var b_ele = ele[0].nextSibling; document.write("p标签的兄弟节点(nextSibling): ",b_ele.innerHTML,"<br>") var b_ele1 = ele[0].nextElementSibling; document.write("p标签的兄弟节点(nextElementSibling): ",b_ele1.innerHTML,"<br>") </script> </html>
推荐使用导航属性：
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分，以及节点之间的关系：
访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：
通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法 （数组结构）
通过使用 getElementsByClassName() 方法 （数组结构）
通过使用 getElementsByName() 方法 （数组结构）
局部查找方法：
getElementsByTagName
getElementsByClassName
<div id="div1"> <div class="div2">i am div2</div> <div name="yuan">i am div2</div> <div id="div3">i am div2</div> <p>hello p</p> </div> <script> 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) </script>
HTML DOM Event(事件)
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
onfocus 元素获得焦点。 //练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouSEOut 鼠标从某元素移开。
onmouSEOver 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
鼠标点击输入框之后，清楚输入框信息，离开后恢复输入框原本信息：
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> </head> <body> <input id="search" type="text" value="请输入用户名" onfocus="f1()" onblur="f2()"> <script> var ele=document.getElementById("search"); function f1() { if(ele.value=="请输入用户名"){ ele.value=""; } } function f2() { if(!ele.value.trim()) ele.value="请输入用户名"; } </script> </body> </html>
事件绑定两种方式：
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="a1"> <p class="a2" onclick="f1()">11111</p> <p class="a3">22222</p> <p class="a3">33333</p> <p class="a3">44444</p> </div> </body> <script> ele = document.getElementsByClassName("a2")[0]; function f1(){ alert('1111') } eles = document.getElementsByClassName("a3"); for (var i=0;i<eles.length;i++){ eles[i].onclick=function f2(){ alert("223344") } } </script> </html>
onload 属性在开发中用在body元素中
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Title</title> <script> function f1(){ var ele = document.getElementsByClassName("div1"); console.log(ele[0].innerText) } </script> </head> <body onload="f1()"> <div class="div1">hello div</div> </body> </html>