1.DOM节点介绍
1.什么是节点：在HTML文档中，一切皆节点（HTML文档本身、标签、属性、注释内容、文本）
2.什么是元素：元素在HTML中叫做标签，在JS的dom对象中称为元素（可以理解为标签的面向对象的叫法）
3.HTML标签属于节点的一种，叫做元素节点
4.节点三要素：
节点类型：标签、属性、注释、文本，nodeType
节点名称：p、div、class（属性名），nodeName
节点的值：one（属性的值），nodeValue
在JavaScript中，document这个对象大家一定很熟悉，哪怕是刚刚开始学习的新人，也会很快接触到这个对象。而document对象不仅仅是一个普通的JavaScript内置对象，它还是一个巨大API的核心对象，这个巨大的API就是DOM（Document Object Model），它将文档的内容呈现在JS面前，并赋予了JS操作文档的能力。
DOM树体现着HTML页面的层级结构，学习中经常提到的父元素子元素的说法也是建立在树这种数据结构的基础之上的,而DOM文档树则包含文档中所有内容。
HTML页面中的所有内容都会体现在DOM文档树中，要理解这种结构，对构成它的每个节点就要先有了解。下面是DOM节点的基本类别，以及各自类别基本属性的值及简单介绍：
2.元素节点与属性节点
1.元素节点
类型 nodeTypoe:1
名称 nodeName：标签名大写
值 nodeValue ： null
2.属性节点
类型 nodeTypoe:2
名称 nodeName：属性名
值 nodeValue ： 属性值
3.文本节点与注释节点与文档节点
1.文本节点
类型 nodeTypoe:3
名称 nodeName：#text
值 nodeValue ： 文本内容
2.注释节点
类型 nodeTypoe:8
名称 nodeName：#comment
值 nodeValue ： 注释内容
3.文档节点
类型 nodeTypoe:9
名称 nodeName：#document
值 nodeValue ： null
4.获取子节点与子元素
childNodes：获取子节点：（文本节点，注释节点，子元素节点）
细节：属性节点通过attribute来获取，一般用的不多
浏览器兼容问题：IE8及之前不包含非空文本
children：获取子元素：（元素节点）
浏览器兼容问题: IE8及之前包含注释节点
5.兄弟节点与兄弟元素
nextSibling：获取下一个节点 previousSibling：获取上一个节点
IE8及之前：文本（不包含非空）、注释、元素
其他浏览器：文本（包含非空）、注释、元素
6.第一个子节点与第一个子元素
1.firstChild : 第一个子节点
2.firstElementChild：第一个子元素节点
他们两者的浏览器兼容问题与兄弟节点一致
7.最后一个节点与最后一个元素
1.lastChild : 最后一个子节点
2.lastElementChild：最后一个子元素节点
他们两者的浏览器兼容问题与兄弟节点一致
8.获取父节点
parentNode:获取元素的父元素节点
细节：一个元素的父节点一定是一个元素，而不是（文本、注释、属性），只有元素才有子节点
9.小案例（点击关闭二维码 ）
需求：点击二维码图片右上角的小叉叉，关闭二维码
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { border: 1px solid #D9D9D9; margin: 100px auto; position: relative; width: 107px; } #x { border: 1px solid #D9D9D9; width: 14px; height: 14px; line-height: 12px; text-align: center; color: #D6D6D6; cursor: pointer; position: absolute; top: -1px; left: -16px; } </style> </head> <body> <div class="box"> <img src="./taobao.jpg" alt="" /> <span id="x">×</span> </div> <script> // 需求：点击x关闭二维码 // 分析：点击x关闭父元素：div.box /* 思路分析：有事件 1. 事件源：span#x 2. 事件类型：点击 onclick 3. 事件处理：让父元素隐藏 */ // 思路分析：有事件 // 1. 事件源：span#x // 2. 事件类型：点击 onclick document.querySelector('#x').onclick = function () { // 3. 事件处理：让父元素隐藏 // console.log(this); this.parentElement.style.display = 'none'; }; </script> </body> </html>
