JavaScript——DOM编程

---

前言

HTML DOM（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
HTML DOM被结构化为对象树：
对象的 HTML DOM树

---

一、什么是DOM

DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。
DOM可被JavaScript用来读取，改变HTML、XHTML以及XML文档，因此DOM由3部分组成，分别是Core DOM、XML DOM和HTML DOM。

1. Core DOM(核心DOM)：适用于任何结构化文档的标准模型。
2. XML DOM（Java OOP学过）：专用于XML文档的标准模型。
3. HTML DOM：专用于HTML文档的标准模型。

二、Node节点

HTML中的所有内容都可以用节点（Node）来描述：节点共有12种类型，常见的节点类型有：
元素节点：elementNode
属性节点：attributeNode
文本节点：textNode
通过操作DOM树，JS可以实现：

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

1.访问Node节点

使用getElement系列方法可以访问指定元素

方法	说明	返回值
getElementById()	根据ID查找对应元素	单个值
getElementsByClassName()	根据Class名查找对应元素	数组
getElementsByTagName()	根据标签名查找对应元素	数组
getElementsByName()	根据表单元素name值查找对应元素	数组

querySelector()通过CSS选择器的方式查找指定元素，返回满足条件的第一个元素。
querySelectorAll()通过CSS选择器的方式查找指定元素，返回满足条件的所有元素。
*querySelector提供的选择功能更强大，但性能及稳定性相对较低。

通过层级关系访问节点

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

注意：使用以上方法时要注意换行符、空白符等也是一个节点。

通过层级关于访问元素

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

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

2.访问元素属性

通过element.属性名访问或通过element[属性名]访问（可使用变量）

<a id="app" class="text black large" href="1.html">

document.getElementsByTagName('a')[0].id //app
document.getElementsByTagName('a')[0].href //完整路径
document.getElementsByTagName('a')[0].className //'text black large'
document.getElementsByTagName('a')[0].classList //['text','black','large']

三、DOM元素特性

//返回元素的所有特性
element.attributes

//设置元素的指定特性
element.setAttribute(name,value)

//获取元素的指定特性
element.getAttribute(name)

//删除元素的指定特性
element.removeAttribute(name)

特性和属性的区别
理论上，特性(attribute)与属性(property)是两个不同的概念，特性是DOM元素的子节点，属性是DOM元素的特性映射到JS后对应对象的属性。实际使用中，可以忽略两者的区别。

1.table对象

table为DOM元素中的一个特别的对象，拥有一系列独有的属性和方法
table对象的属性和方法：

属性/方法	说明
rows	返回table对象中所有行的集合，集合中每一个元素为tableRow对象
insertRow(index)	在表格中插入一行并返回该行 参数为索引值，如不输出，则在末尾添加
deleteRow(index)	在表格中删除一行 参数为索引值，必选

tableRow对象的属性和方法：

属性/方法	说明
cells	返回tableRow对象中所有行的集合，集合中每一个元素为tableCell对象
rowIndex	返回该行在表格中的索引位置
insertCell(index)	在行中插入一列并返回该列 参数为索引值，如不输出，则在末尾添加
deleteCell(index)	在行中删除一列 参数为索引值，必选

tableCell对象的属性和方法：

属性/方法	说明
cellIndex	返回该单元格在行中的索引位置

2.创建DOM对象

document.createElement(TagName) //创建一个元素节点
document.createTextNode(文本内容) //创建一个文本节点
element.appendChild(子节点) //向父元素末尾添加子节点

例：

var ul=document.createElement('ul')
var li=document.createElement('li')
var text=document.createTextNode('苹果')
ul.appendChild(li)
li.appendChild(text)
document.body.appendChild(ul)

3.修改DOM对象

element.removeChild(子节点) //删除一个子节点
element.replaceChild(新节点，旧节点) //替换一个子节点
element.insertBefore(新节点，已有节点) // 在已有的子节点前插入一个新的子节点