js如何获取dom元素?本篇文章就给大家介绍js通过dom查找并获取元素对象的方法,让大家了解js中的dom是什么、如何通过dom来查找并获取元素的。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
首先我们来简单了解一下js中dom是什么?
dom:HTML DOM ,文档对象模型(Document Object Model)的简称,当网页被加载时,浏览器就会创建页面的文档对象模型。
通常,通过 JavaScript,我们需要操作 HTML元素。为了做到这件事情,就必须首先查找并获取到该元素。下面我们来介绍一下在JavaScript中中通过dom查找并获取元素对象的三种常见方法:
1、通过 id 查找并获取到元素:getElementById()
getElementById() 方法:通过ID获得节点元素,如果页面上含有多个相同id的节点对象,那么只返回第一个节点对象。
语法:
document.getElementById("元素的id");
代码示例:点击id="box"盒子就会出现弹窗,显示id="box"盒子里的内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div id="box" onclick="getValue()">我是测试代码</div> <script> function getValue(){ var x=document.getElementById("box") alert(x.innerHTML) } </script> </body> </html>
效果图:
注意:getElementById()括号中的不需要在前面加“#”,因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。
2、通过标签名查找并获取到元素:getElementsByTagName()
getElementsByTagName()方法:是通过元素的标签名来查找并获取一组元素对象(有多少就获取多少),其返回的是带有指定标签名的对象集合。
语法:
document.getElementsByClassName("元素的标签名");
代码示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p>Hello World!</p> <div id="main"> <p>The DOM is very useful.</p> <p>本例演示 <b>getElementsByTagName</b> 方法。</p> </div> <script> var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); document.write('id 为 "main" 的 div 中的第一段文本是:' + y[0].innerHTML); </script> </body> </html>
效果图:
3、通过class(类)查找并获取到元素:getElementsByClassName()
getElementsByClassName()方法:是通过指定的class(类)属性值来查找并获取元素的,其返回的是带有指定类名的元素集合,可以说它是一个对象的集合。
语法:
document.getElementsByClassName("元素的class");
代码示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div id="main"> <p class="a">我是测试代码1</p> <p class="a">我是测试代码2</p> </div> <script> var x = document.getElementById("main"); var y = x.getElementsByClassName("a"); document.write('id 为 "main" 的 div 中的第一段文本是:' + y[0].innerHTML); </script> </body> </html>
效果图:
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程!
相关推荐:
以上是js如何获取dom元素?js通过dom查找和获取元素对象的方法(代码示例)的详细内容。更多信息请关注PHP中文网其他相关文章!