第三章:JavaScript操作DOM对象
**DOM:**Document Object Model(文档对象模型),它主要分为三个部分:DOM Core,HTML-DOM,CSS-DOM。
节点关系
我们要操作DOM也就是节点,那我们要知道节点的关系,节点关系其实和二叉树是一样的,有父节点,兄弟节点,子节点。
HTML的结构就是这样的document是整个HTML文件的内容,里面包含html节点。如下图一致。
一,访问节点
直接访问
我们在BOM的时候学到了几个访问Document的方法:
- getElementById()
- getElementByName()
- getElementByTagName()
这是直接定位到指定的节点,那么还有一种方法是根据层级,一层一层的遍历到我们想要的节点。
根据层次关系访问节点
想遍历节点层级,我们就要学习一些新的方法帮助我们去遍历。
属性名称 | 描述 |
---|---|
parentNode | 返回节点的父节点 |
childNodes | 返回子节点集合,childNodes[i] |
firstChild | 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点 |
lastChild | 返回节点的最后一个子节点 |
nextSibling | 下一个节点 |
previousSibling | 上一个节点 |
用上面的方式可能获得的并不是我们所想要的元素,因为每个浏览器的规则不同,所以我们也有不同的方式。
属性名称 | 描述 |
---|---|
firstElementChild | 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点 |
lastElementChild | 返回节点的最后一个子节点 |
nextElementSibling | 下一个节点 |
previousElementSibling | 上一个节点 |
通用方式写法
- oNext = oParent.nextElementSibling || oParent.nextSibling
- oPre = oParent.previousElementSibling || oParent.previousSibling
- oFirst = oParent. firstElementChild || oParent.firstChild
- oLast = oParent.lastElementChild || oParent.lastChild
使用通用方式就可以不用在考虑拿到的是不是我们想要的节点了。
二,节点信息
我获得了节点,那么怎么访问节点信息呢?我们先认识几个名词
- nodeName:节点名称
- nodeValue:节点值
- nodeType:节点类型
nodeType返回值对照表:
节点类型 | NodeType值 |
---|---|
元素element | 1 |
属性attr | 2 |
文本text | 3 |
注释comments | 8 |
文档document | 9 |
三,操作节点(重点)
我们可以操作节点的很多东西,如下:
- 操作节点的属性
- 创建和插入节点
- 删除和替换节点
- 操作节点样式
- 获取元素的样式
1.操作节点的属性
主要方法:
- getAttribute(“属性名”)
- setAttribute(“属性名”,“属性值”)
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置属性值