JavaScript-元素选择

1 需求

元素选择

• document.getElementById()
• document.getElementsByClassName()
• document.getElementsByTagName()
• document.getElementsByName()
• document.querySelector()
•  document.querySelectorAll()

---

2 接口

在JavaScript中，元素选择（或DOM元素选择）有多种方法。这些方法通常用于从文档对象模型（DOM）中获取特定的元素或元素集合。以下是一些常用的JavaScript元素选择方法：

1. 通过ID选择：

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

1. 通过类名选择：

   • getElementsByClassName (返回类名匹配的元素集合，HTMLCollection类型)：

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

   • querySelectorAll (返回匹配的元素集合，NodeList类型，支持CSS选择器)：

   var elements = document.querySelectorAll('.className');

2. 通过标签名选择：

   • getElementsByTagName (返回标签名匹配的元素集合，HTMLCollection类型)：

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

   • querySelectorAll (同上，但更通用)：

   var elements = document.querySelectorAll('tagName');

3. 通过CSS选择器选择：

   • querySelector (返回匹配的第一个元素)：

   var element = document.querySelector('.className, #elementId, tagName');

   • querySelectorAll (返回匹配的所有元素)：

   var elements = document.querySelectorAll('.className, #elementId, tagName');

4. 通过属性选择：

   • 使用querySelectorAll和属性选择器（例如[attr=value]）：

   var elements = document.querySelectorAll('[attributeName="attributeValue"]');

5. 通过父子/兄弟关系选择：

   • parentNode / parentElement (获取父元素)：

   var parent = element.parentNode; // 或 element.parentElement;

   • children (获取所有子元素，HTMLCollection类型)：

   var children = element.children;

   • firstElementChild / lastElementChild (获取第一个/最后一个子元素)：

   var firstChild = element.firstElementChild;
   var lastChild = element.lastElementChild;

   • nextElementSibling / previousElementSibling (获取下一个/上一个兄弟元素)：

   var nextSibling = element.nextElementSibling;
   var prevSibling = element.previousElementSibling;

6. 通过表单元素选择（如forms, inputs, select, textarea等）：

   • document.forms (获取所有<form>元素)：

   var forms = document.forms;

   • form.elements (从表单中获取所有元素)：

   var form = document.forms[0];
   var elements = form.elements;

7. 使用matches方法检查元素是否匹配CSS选择器：

   • element.matches(selector) (返回布尔值)：

   if (element.matches('.className')) {
   // ...
   }

这些方法是JavaScript中常用的元素选择方法，但请注意，它们之间的兼容性和性能可能有所不同，因此在使用时需要考虑这些因素。

---

3 示例

---

4 参考资料