js如何获取dom元素？js通过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查找和获取元素对象的方法（代码示例）的详细内容，更多请关注其它相关文章！
下一篇： python元组怎么排序
推荐阅读
-
闭包的原理与经典应用场景，访问器属性，类与对象的创建与成员引用，数组与对象的解构过程与经典案例，JS引入到浏览器中的的方法及获取DOM元素的两个API
-
优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发
-
闭包的原理与经典应用场景，访问器属性，类与对象的创建与成员引用，数组与对象的解构过程与经典案例，JS引入到浏览器中的的方法及获取DOM元素的两个API
-
优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发
-
通过js获取元素表单以及遍历dom树和对元素的增删改查js操作内容演练实战了留言板的操作并对自定义属性: dataset对象初步的了解以及对js操作class和classList属性对象事件的添加与删除练习与了解
-
表单元素获取,dom树的遍历与常用属性,dom元素的增删改, js操作元素内容,留言板实例,dataset对象，获取元素计算样式，classList 对象常用方法 ，事件的添加与派发
-
js如何获取dom元素？js通过dom查找和获取元素对象的方法（代码示例）
-
通过js获取元素表单以及遍历dom树和对元素的增删改查js操作内容演练实战了留言板的操作并对自定义属性: dataset对象初步的了解以及对js操作class和classList属性对象事件的添加与删除练习与了解
-
表单元素获取,dom树的遍历与常用属性,dom元素的增删改, js操作元素内容,留言板实例,dataset对象，获取元素计算样式，classList 对象常用方法 ，事件的添加与派发
-
js如何获取dom元素？js通过dom查找和获取元素对象的方法（代码示例）