文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
一、查找元素
1、直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <html> <div id="i1"></div> <div name="n1"></div> <div class="c1"></div> </html> <script> d1 = document.getElementById("i1") //返回单个元素，因为id不能重复 d2 = document.getElementsByName('n1') //返回数组 d3 = document.getElementsByClassName('c1') //返回数组 d4 = document.getElementsByTagName('div') //返回数组 </script> </body> </html>
2、间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
二、操作
1、直接查找
|
1
2
3
4
|
document.getElementById 根据
ID
获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据
class
属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
|
2、间接查找
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
parentNode
/
/
父节点
childNodes
/
/
所有子节点
firstChild
/
/
第一个子节点
lastChild
/
/
最后一个子节点
nextSibling
/
/
下一个兄弟节点
previousSibling
/
/
上一个兄弟节点
parentElement
/
/
父节点标签元素
children
/
/
所有子标签
firstElementChild
/
/
第一个子标签元素
lastElementChild
/
/
最后一个子标签元素
nextElementtSibling
/
/
下一个兄弟标签元素
previousElementSibling
/
/
上一个兄弟标签元素
|