这篇文章给大家分享的是有关如使用JS获取HTML DOM元素的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
1,能够嵌入动态文本于HTML页面。2,对浏览器事件做出响应。3,读写HTML元素。4、在数据被提交到服务器之前验证数据。5,检测访客的浏览器信息。6,控制饼干,包括创建和修改等7,基于节点。js技术进行服务器端编程。
<强>什么是HTML DOM
文档对象模型(文档对象模型)是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM是关于如何获取,修改,添加或删除HTML元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。
这篇文章不做深入研究,只把各种用法和坑做一个总结。
<强> js获取DOM元素的方法(8种)
通过ID获取(getElementById)
<李>通过名字属性(getElementsByName)
<李>通过标签名(getElementsByTagName)
<李>通过类名(getElementsByClassName)
<李>获取HTML的方法(document.documentElement)
<李>获取身体的方法(document.body)
<李>通过选择器获取一个元素(querySelector)
<李>通过选择器获取一组元素(querySelectorAll)
我们开始逐一讲解。
<强> 1。通过ID获取(getElementById)
用法:
1。上下文必须是文档。
2。必须传参数,参数是字符串类型,是获取元素的ID。
3。返回值只获取到一个元素,没有找到返回零。
坑~ ~坑坑~坑坑~坑坑~:
1。如果有多个ID存在只获取第一个,也就是最先出现的哪一个。一般情况也不会出现同一个ID在页面上出现两次。
2。在IE6, 7中会把表单元素的名字当做ID值获取到,所以大家在定义这些的时候一定要注意。
3。在IE6, 7中不区分大小写。
4。可以直接用元素的ID代表这个元素。(项目中不推荐)
5。通过ID获取元素的上下文只能是文档。为什么上下文必须是文档呢,因为getElementById这个方法在文档类的原型上,也许你没有听的懂,那就继续往下看。
<强> 2。通过名字属性(getElementsByName)
用法:
1。上下文必须是文档。
2。必须传参数,参数是是获取元素的名称属性。
3。返回值是一个类数组,没有找到返回空数组。
坑~ ~坑坑~坑坑~坑坑~:
1。获取的结果是一个类数组,不是数组。
2。在IE浏览器中只能获取到表单元素,当然我们一般也只用它获取表单元素,从ie10开始可以不只是表单元素。
3。上下文只能是文档,原因同getElementById。
<强> 3。通过标签名(getElementsByTagName)
用法:
1。上下文可以是文档,也可以是一个元素,注意这个元素一定要存在。
2。参数是是获取元素的标签名属性,不区分大小写。
3。返回值是一个类数组,没有找到返回空数组。
坑~ ~坑坑~坑坑~坑坑~:
1。获取的结果是一个类数组。
2。上下文不必须是文档了,因为getElementsByTagName方法在不仅在文档类的原型上也在元素类的原型上,所以文档和元素都可以使用这个方法。如果还不懂我在文章最后会再解释一下。
<强> 4。通过类名(getElementsByClassName)
用法(和getElementsByTagName类似):
1。上下文可以是文档,也可以是一个元素。
2。参数是元素的类名。
3。返回值是一个类数组,没有找到返回空数组。
坑~ ~坑坑~坑坑~坑坑~:
1。获取的结果是一个类数组。
2. ie8以及以前版本不兼容。真可惜这么好用的方法不兼容。
<强> 5。获取html的方法(document.documentElement)
document.documentElement是专门获取html这个标签的。
<强> 6。获取身体的方法(document.body)
document.body是专门获取身体这个标签的。
