js获取dom(使用JS获取DOM元素)

什么是DOM？

DOM是文档对象模型（Document Object Model）的缩写，表示将HTML文档当作一个对象树，通过这个对象树，可以查找和修改HTML元素的属性和内容。在Web开发中，DOM是非常关键的技术，而JavaScript则是用来控制DOM的重要工具。

如何使用JavaScript获取DOM元素？

在JavaScript中，想要通过代码获取DOM元素，需要使用控制器里面的document对象。在document对象下，还有多个方法可以实现获取DOM元素的目的，在这里我们介绍几个常见的方法，包括getElementById、getElementsByClassName、getElementsByTagName、querySelector和querySelectorAll。

1. getElementById

getElementById方法接受一个参数，就是需要获取的元素的id值。它可以返回一个元素对象或者null。

var element = document.getElementById("demo");

通过上述代码，我们可以获取id为demo的元素对象并存放在element变量中。

2. getElementsByClassName

getElementsByClassName方法接受一个参数，就是需要获取的元素的class值。它可以返回一个包含所有符合条件的元素的集合。

var elements = document.getElementsByClassName("demo");

通过上述代码，我们可以获取所有class为demo的元素对象并存放在elements变量中。

3. getElementsByTagName

getElementsByTagName方法接受一个参数，就是需要获取的元素的标签名。它可以返回一个包含所有符合条件的元素的集合。

var elements = document.getElementsByTagName("p");

通过上述代码，我们可以获取所有p标签的元素对象并存放在elements变量中。

4. querySelector和querySelectorAll

querySelector和querySelectorAll方法可以使用CSS选择器语法获取DOM元素。其中querySelector只会返回符合条件的第一个元素对象，而querySelectorAll会返回所有符合条件的元素对象集合。

var element = document.querySelector("#demo");

var elements = document.querySelectorAll(".demo");

通过上述代码，我们可以分别获取id为demo的元素对象和所有class为demo的元素对象并存放在element和elements变量中。

其他方法

除了上述介绍的方法，document还有其他一些方法可以使用。例如，element.childNodes可以返回一个元素的子元素的集合，element.parentNode可以返回一个元素的父元素。

总结

通过JavaScript获取DOM元素是Web开发中非常常见的需求。本文介绍了五种常用的获取DOM元素的方法，分别是getElementById、getElementsByClassName、getElementsByTagName、querySelector和querySelectorAll。这些方法可以大大方便我们在JavaScript中处理DOM元素。