js获取html的元素方法有哪些

JavaScript 是一种常用的编程语言，它提供了多种方法来获取 HTML 元素，以下是一些常用的方法：

1、通过元素的 ID 获取元素

使用 document.getElementById() 方法可以通过元素的 ID 获取对应的元素，该方法接受一个参数，即元素的 ID，并返回对应的元素对象。

示例代码：

“`javascript

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

“`

2、通过元素的类名获取元素

使用 document.getElementsByClassName() 方法可以通过元素的类名获取一组对应的元素，该方法接受一个参数，即元素的类名，并返回一个包含所有匹配的元素的数组。

示例代码：

“`javascript

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

“`

3、通过元素的标签名获取元素

使用 document.getElementsByTagName() 方法可以通过元素的标签名获取一组对应的元素，该方法接受一个参数，即元素的标签名，并返回一个包含所有匹配的元素的数组。

示例代码：

“`javascript

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

“`

4、通过元素的名称空间获取元素

使用 document.querySelector() 方法可以通过元素的选择器表达式获取第一个匹配的元素，该方法接受一个参数，即元素的选择器表达式，并返回对应的元素对象。

示例代码：

“`javascript

var element = document.querySelector("myElement");

“`

5、通过元素的索引获取元素

使用 document.elementFromPoint() 方法可以通过鼠标点击的位置获取对应的元素，该方法接受两个参数，即鼠标点击的横坐标和纵坐标，并返回对应的元素对象。

示例代码：

“`javascript

var element = document.elementFromPoint(x, y);

“`

6、通过 CSS 选择器获取元素

使用 document.querySelectorAll() 方法可以通过 CSS 选择器表达式获取一组匹配的元素，该方法接受一个参数，即元素的选择器表达式，并返回一个包含所有匹配的元素的数组。

示例代码：

“`javascript

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

“`

7、通过事件监听器获取触发事件的元素

在 JavaScript 中，可以使用事件监听器来捕获用户的操作事件，并通过事件对象的属性获取触发事件的元素，可以使用 event.target 属性获取触发事件的元素对象。

示例代码：

“`javascript

document.addEventListener("click", function(event) {

var targetElement = event.target; // 获取触发事件的元素对象

// 进一步处理目标元素…

});

“`

8、通过父元素获取子元素

如果已知某个元素的父元素，可以使用 parentNode 属性来获取该元素的父元素对象，可以使用父元素对象的子节点列表来访问子元素。

示例代码：

“`javascript

var parentElement = document.getElementById("parent"); // 获取父元素对象

var childElement = parentElement.childNodes[0]; // 获取第一个子元素对象

“`

9、通过子元素获取父元素

如果已知某个元素的子元素，可以使用 parentNode 属性来获取该元素的父元素对象，可以使用父元素对象的子节点列表来访问父元素。

示例代码：

“`javascript

var childElement = document.getElementById("child"); // 获取子元素对象

var parentElement = childElement.parentNode; // 获取父元素对象

“`