这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本篇文章主要介绍了详解 JS 获取 html DOM 元素的 8 种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
什么是 HTML DOM
文档对象模型(Document Object Model),是 W3C 组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是 HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用 JavaScript 对网页进行的所有操作都是通过 DOM 进行的。
这篇文章不做深入研究,只把各种用法和坑做一个总结。
JS 获取 DOM 元素的方法(8 种)
我们开始逐一讲解。
1. 通过 ID 获取(getElementById)
- document.getElementById('id')
用法:
1. 上下文必须是 document。
2. 必须传参数,参数是 string 类型,是获取元素的 id。
3. 返回值只获取到一个元素,没有找到返回 null。
坑~~ 坑坑~ 坑坑~ 坑坑~:
1. 如果有多个 id 存在只获取第一个,也就是最先出现的哪一个。一般情况也不会出现同一个 ID 在页面上出现两次。
2. 在 IE6、7 中会把表单元素的 name 当做 ID 值获取到。所以大家在定义这些的时候一定要注意。
3. 在 IE6、7 中不区分大小写。
4. 可以直接用元素的 ID 代表这个元素。(项目中不推荐)
5. 通过 ID 获取元素的上下文只能是 document。为什么上下文必须是 document 呢,因为 getElementById 这个方法在 Document 类的原型上,也许你没有听懂,那就继续往下看。
2. 通过 name 属性(getElementsByName)
- document.getElementsByName('name')
用法:
1. 上下文必须是 document。
2. 必须传参数,参数是是获取元素的 name 属性。
3. 返回值是一个类数组,没有找到返回空数组。
坑~~ 坑坑~ 坑坑~ 坑坑~:
1. 获取的结果是一个类数组,不是数组。
2. 在 IE 浏览器中只能获取到表单元素,当然我们一般也只用它获取表单元素,从 ie10 开始可以不只是表单元素。
3. 上下文只能是 document,原因同 getElementById。
3. 通过标签名(getElementsByTagName)
- document.getElementsByTagName('p');
- var oDiv = document.getElementById('divId');
- oDiv.getElementsByTagName('p');
用法:
1. 上下文可以是 document,也可以是一个元素,注意这个元素一定要存在。
2. 参数是是获取元素的标签名属性,不区分大小写。
3. 返回值是一个类数组,没有找到返回空数组。
坑~~ 坑坑~ 坑坑~ 坑坑~:
1. 获取的结果是一个类数组。
2. 上下文不必须是 document 了,因为 getElementsByTagName 方法在不仅在 Document 类的原型上也在 Element 类的原型上,所以 document 和元素都可以使用这个方法。如果还不懂我在文章最后会再解释一下。
4. 通过类名(getElementsByClassName)
用法(和 getElementsByTagName 类似):
1. 上下文可以是 document,也可以是一个元素。
2. 参数是元素的类名。
3. 返回值是一个类数组,没有找到返回空数组。
坑~~ 坑坑~ 坑坑~ 坑坑~:
1. 获取的结果是一个类数组。
2.IE8 以及以前版本不兼容。真可惜这么好用的方法不兼容。
5. 获取 html 的方法(document.documentElement)
document.documentElement 是专门获取 html 这个标签的。
6. 获取 body 的方法(document.body)
document.body 是专门获取 body 这个标签的。
7. 通过选择器获取一个元素(querySelector)
用法:
1. 上下文可以是 document,也可以是一个元素。
2. 参数是选择器,如:"div .className"。
3. 返回值只获取到一个元素。
坑~~ 坑坑~ 坑坑~ 坑坑~:
这个方法不兼容 IE7 以及以前版本,现在似乎也没有考虑 IE7 兼容的公司了。
8. 通过选择器获取一组元素(querySelectorAll)
用法同 querySelector 类似:
1. 上下文可以是 document,也可以是一个元素。
2. 参数是选择器,如:"div .className"。
3. 返回值是一个类数组。
坑~~ 坑坑~ 坑坑~ 坑坑~:
同 querySelector,不兼容 IE7。
使用原生 JS 获取 DOM 元素的 8 个方法讲完了,接下来在讲一下为什么有的方法只能在 document 上使用。
拿 div 举栗子,div 是 HTMLDivElement 类的一个实例,document 是 HTMLDocument 的实例。
他们的继承关系:
HTMLDivElement > HTMLElement > Element > Node > EventTarget
HTMLDocument > Document > Node > EventTarget
我们都知道子类继承父类,子类就可以使用父类的属性和方法。
他们相同的继承关系是 Node 和 EventTarget,也就是说他们都可以使用 Node 和 EventTarget 上的方法。
如 Node 上的 nodeName、parentNode 等,和 EventTarget 上的 addEventListener 等。
getElementById 只在 Document 类的原型上,HTMLDivElement 没有继承 Document 类,所以 div 不能使用 getElementById 方法。
getElementsByTagName 即在 Document 类的原型上也在 Element 类的原型上,所以 div 和 document 都可以使用 getElementsByTagName 方法。
其它同理。
来源: http://www.phperz.com/article/17/0812/338591.html