-
什么是HTML DOM
文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。
-
JS获取DOM元素的方法(8种)
- 通过id获取(getElementById)
- 通过name属性(getElementsByName)
- 通过标签名(getElementsByTagName)
- 通过类名(getElementsByClassName)
- 获取html的方法(document.documentElement)
- 获取body的方法(document.body)
- 通过选择器获取一个元素(querySelector)
- 通过选择器获取一组元素(querySelectorAll)
1.通过ID获取(getElementById)
用法(例如):
1 | <div id = "box"></div> |
2 | document.getElementById("box") |
用法:
1.上下文必须是document。
2.必须传参数,参数是string类型,是获取元素的id。
3.返回值只获取到一个元素,没有找到返回null。
2.通过name属性(getElementsByName)
例子1 | <div name="title"></div> |
2 | |
用法:
1.上下文必须是document。
2.必须传参数,参数是获取元素的name属性。
3.返回值是一个类数组,没有找到返回空数组。
3.通过标签名(getElementsByTagName)
123 | |
用法:
1.上下文可以是document,也可以是一个元素,注意这个元素一定要存在。
2.参数是是获取元素的标签名属性,不区分大小写。
3.返回值是一个类数组,没有找到返回空数组。
4.通过类名(getElementsByClassName)
用法(和getElementsByTagName类似):
1.上下文可以是document,也可以是一个元素。
2.参数是元素的类名。
3.返回值是一个类数组,没有找到返回空数组。
1.获取的结果是一个类数组。
5.获取html的方法(document.documentElement)
document.documentElement是专门获取html这个标签的。
6.获取body的方法(document.body)
document.body是专门获取body这个标签的。
7.通过选择器获取一个元素(querySelector)
用法:
1.上下文可以是document,也可以是一个元素。
2.参数是选择器,如:"div .className"。
3.返回值只获取到一个元素。
8.通过选择器获取一组元素(querySelectorAll)
用法同querySelector类似:
1.上下文可以是document,也可以是一个元素。
2.参数是选择器,如:"div .className"。
3.返回值是一个类数组。