脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript获取元素的方式总结，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 JavaScript有三种获取DOM元素的方式：id名、类名和标签名。

1. getElementById

?通过id属性来获取对应节点对象，只有一个输入参数(id名)，返回一个对象。

document.getElementById("container");

alert(tyPEof document.getElementById("container"));//typeof获取返回值类型

2. getelementsbytagname

?通过标签名获取对应节点对象，同样只有一个输入参数(标签名)，但返回一个对象数组。

VAR o = document.getElementByTagName("li");

console.LOG(o.length);

?getElementByTagName支持通配符(”*”)作为函数的输入。使用通配符可以统计htML文档中元素的个数：

var objs = document.getElementsByTagName("*");

console.log("html文档中元素的个数为;"+objs.length);

//在浏览器控制台可以看到上述html文档加载到浏览器中会生成15个元素:

//测试结果为：

?

 

? getElementById和getElementByTagName结合使用。

var obj = document.getElementsById("container");

var objs = obj.getElementsByTagName("*");

console.log("id为/"container/"的p中节点的个数为："+objs.length);

//测试结果为：

?

 

3. getElementsByClassName

?HTML5 DOM新增的方法，通过类名获取节点对象，返回值是数组。

var objs = document.getElementsByclassname("header");

console.log("类名为header的元素的个数为："+objs.length);

//测试结果为：

?

 

?查找有多个类名的节点

//查找同时带有类名“tag”和“header”的节点，将类名用空格隔开，与顺序无关

var objs = document.getElementsByClassName("tag header");

console.log("类名为header的元素的个数为："+objs.length);

//测试结果为：

?

 

?组合使用getElementById和getElementsByClassName

var obj = document.getElementById("container");

var objs = obj.getElementsByClassName("header");

console.log("id为container的p中类名为header的节点的个数为："+objs.length);

//测试结果为：

?

 

用于以上测试的html代码，用来演示JavaScript获取元素的方法，html代码如下所示：

css 获取元素的方式：id

css 获取元素的方式：class name

css 获取元素的方式：tag name

getElementById

getElementByClassName

getElementByTagName

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript获取元素的方式总结全部内容，希望文章能够帮你解决javascript代码实例教程-JavaScript获取元素的方式总结所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。