JS学习笔记第十二期--（DOM编程）

什么是DOM

DOM是文档对象模型（Document Object Model）的缩写，HTML DOM 定义了访问和操作 HTML 文档的标准方法。它将HTML文件转化为了一种树形的结构。

Node节点

HTML中所有的内容都可以用节点（Node）来描述
节点共有12中类型，常见的节点类型有：

• 元素节点 elementNode
• 属性节点 attributeNode
• 文本节点 textNode

通过操作DOM树，JS可以实现以下功能：

• 改变页面中任意的HTML元素
• 改变页面中任意的HTML树形
• 改变页面中任意的CSS样式
• 删除页面中任意的HTML元素和属性
• 添加任意的HTML元素和属性到页面中
• 对页面中任意的事件做出相应
• 对页面中的任意元素添加事件

Node节点和元素的访问方法

其实在之前我们就一直通过的Node节点访问HTML中的元素。

使用getElement系列方法访问指定元素就是我们最常用的访问指定元素的方法。

通过getElement系列方法访问指定元素

方法	说明	返回值
getElementById()	根据ID查找对应元素	单个值
getElementsByClassName ()	根据class名查找对应元素	数组
getElementsByTagName ()	根据标签名查找对应元素	数组
getElementsByName ()	根据表单元素name值查找对应元素	数组
querySelector()	通过CSS选择器的方式查找指定元素	返回满足条件的第一个元素
querySelectorAll()	通过CSS选择器的方式查找指定元素	返回满足条件的所有元素

除此之外我们如果要访问子页面或父页面的节点和节点元素的话，我们需要通过层级关系访问
通过层级关系访问Node节点

方法	说明	返回值
node.parentNode	访问父节点	单个值
node.childNodes	子节点集合	数组
node.firstChild	第一个子节点	单个值
node.lastChild	最后一个子节点	单个值
node.previousSibling	前一个兄弟节点	单个值
node.nextSibling	后一个兄弟节点	单个值

使用这种方法需要注意换行符，空白符也是一个节点

通过层级关系访问元素

方法	说明	返回值
element.parentElement	访问父元素	单个值
element.children	子元素集合	数组
element.firtElementChild	第一个子元素	单个值
element.lastElementChild	最后一个子元素	单个值
element.previousElementSibling	前一个兄弟元素	单个值
element.nextElementSibling	后一个兄弟元素	单个值

访问Node节点

每个Node节点包括如下属性
节点类型：NodeType
节点名：NodeName
节点值：NodeValue

访问节点文本内容的方法有：
innerHTML（会返回所有的内部内容，包括子元素的标签）
innerText
textContent