前言
HTML DOM(文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
HTML DOM被结构化为对象树:
对象的 HTML DOM树
一、什么是DOM
DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问、更新文档的内容、结构和样式。
DOM可被JavaScript用来读取,改变HTML、XHTML以及XML文档,因此DOM由3部分组成,分别是Core DOM、XML DOM和HTML DOM。
- Core DOM(核心DOM):适用于任何结构化文档的标准模型。
- XML DOM(Java OOP学过):专用于XML文档的标准模型。
- 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(新节点,已有节点) // 在已有的子节点前插入一个新的子节点