Js 获取HTML DOM节点元素的方法小结

那么首先介绍一下什么是DOM。

DOM简介

DOM，即文档对象模型（Document Object Model），是一种针对XML但经过扩展用于HTML的应用程序编程接口（API）。它为访问和操作HTML或XML文件提供了一种特定的结构化方式，使得开发者可以对文档的内容和结构进行添加、修改、删除或查找等操作。

Js 获取HTML DOM节点元素的方法小结

在JavaScript中，我们可以通过多种方式获取HTML DOM节点元素，其中一些方式如下：

通过id获取元素

我们可以通过元素的id属性获取元素，示例代码如下：

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

通过标签名获取元素

我们可以通过标签名获取元素，示例代码如下：

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

通过类名获取元素

我们可以通过类名获取元素，示例代码如下：

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

通过CSS选择器获取元素

我们可以通过CSS选择器获取元素，示例代码如下：

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

示例说明

示例一：通过id获取元素

假设我们有一个页面上有一个元素的id为“myDiv”，我们可以通过下面的代码获取这个元素：

<div id="myDiv">这是一个div元素。</div>

var myDiv = document.getElementById("myDiv");

示例二：通过标签名获取元素

假设我们有一个页面上有多个p标签，并且我们想获取所有的p标签，我们可以通过下面的代码获取这些p标签：

<p>第一行文本</p>
<p>第二行文本</p>

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

以上就是Js获取HTML DOM节点元素的方法的小结，希望对大家有所帮助。