原生JS获取DOM元素的方法（很多种方法）
在原生JavaScript中，有多种方法可以获取DOM元素。以下是其中一些常用的方法，以及它们的用法和注意事项。
1.通过ID获取元素：
- 使用`ElementById(`方法可以通过元素的ID获取该元素的引用。
- 示例：`let element = ElementById("myElement");`
-注意：ID在整个文档中应该是唯一的。
2.通过类名获取元素：
- 使用`ElementsByClassName(`方法可以根据类名获取元素的引用。注意，该方法返回一个类数组对象。
- 示例：`let elements = ElementsByClassName("myClass");`
-
注意：如果多个元素使用相同的类名，则返回的是一个包含这些元素的集合。
- 示例：`let elements = ElementsByTagName("div");`
4.通过选择器获取元素：
- 使用`document.querySelector(`方法可以使用CSS选择器获取元素的引用。该方法返回匹配选择器的第一个元素。
- 示例：`let element = document.querySelector("#myElement");`js获取子元素
5.通过多个选择器获取元素：
- 使用`document.querySelectorAll(`方法可以使用CSS选择器获取元素的引用。该方法返回所有匹配选择器的元素。
- 示例：`let elements = document.querySelectorAll(".myClass");`
6.通过父元素获取子元素：
-
使用`parentElement.querySelector(`方法可以使用CSS选择器在指定的父元素中获取元素的引用。
- 示例：`let element = parentElement.querySelector(".myClass");`
7.通过索引获取元素：
- 使用`ElementsByTagName(`方法获取元素的类数组对象，可以通过索引获取其中一个元素的引用。
- 示例：`let element = elements[0];`
8.通过属性获取元素：
- 使用`document.querySelector(`方法可以通过元素的属性获取元素的引用。
- 示例：`let element = document.querySelector('[data-id="123"]');`
9.通过表单获取元素：
-
使用`document.forms`属性可以获取文档中的所有表单元素。
- 示例：`let form = document.forms[0];`
10.通过事件目标获取元素：
- 在事件处理函数中，可以通过`event.target`属性获取触发事件的元素。
- 示例：`function handleClick(event) { let element = event.target; }`
需要注意的是，获取到的元素是一个引用，可以通过操作这个引用来改变元素的内容、样式或其它属性。此外，使用这些方法获取的元素是一个实时的引用，即使在获取元素之后，如果DOM结构发生了变化，这个引用也会自动更新。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。