JavaScript获取DOM元素的11种方法总结

首先是“JavaScript获取DOM元素的11种方法总结”的完整攻略。

一、概述

在JavaScript中，操作DOM元素非常重要。而获取DOM元素是最基本的操作之一，因此我们需要清楚掌握获取DOM元素的方法。本文总结了JavaScript中获取DOM元素的11种方法，分别是：

1. 通过ID获取元素
2. 通过标签名获取元素
3. 通过类名获取元素
4. 通过name属性获取元素
5. 通过选择器获取元素
6. 通过链接文本获取元素
7. 通过XPath获取元素
8. 通过CSS选择器获取元素
9. 通过DOM元素的关系获取元素
10. 通过遍历获取元素
11. 通过事件对象获取元素

下面将逐一介绍这些方法的具体使用。

二、获取DOM元素的11种方法

1. 通过ID获取元素

使用getElementById方法可以按照指定的id属性获取DOM元素。例如：

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

2. 通过标签名获取元素

使用getElementsByTagName方法可以按照指定的标签名获取DOM元素，该方法返回的是一个数组。例如：

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

3. 通过类名获取元素

使用getElementsByClassName方法可以按照指定的类名获取DOM元素，该方法返回的是一个数组。例如：

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

4. 通过name属性获取元素

使用getElementsByName方法可以按照指定的name属性获取DOM元素，该方法返回的是一个数组。例如：

var elements = document.getElementsByName("myName");

5. 通过选择器获取元素

使用querySelector方法可以按照指定的选择器获取DOM元素，该方法返回的是一个数组。例如：

var elements = document.querySelector("div.myClass");

6. 通过链接文本获取元素

使用getElementsByLinkText方法可以按照指定的链接文本获取DOM元素，该方法返回的是一个数组。例如：

var elements = document.getElementsByLinkText("myLinkText");

7. 通过XPath获取元素

使用evaluate方法可以按照指定的XPath获取DOM元素，该方法返回的是一个数组。例如：

var elements = document.evaluate("//div", document, null, XPathResult.ANY_TYPE, null);

8. 通过CSS选择器获取元素

使用querySelectorAll方法可以按照指定的CSS选择器获取DOM元素，该方法返回的是一个数组。例如：

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

9. 通过DOM元素的关系获取元素

使用parentNode、nextSibling、previousSibling、firstChild、lastChild等方法可以按照DOM元素的关系获取DOM元素。例如：

var parent = element.parentNode;
var nextSibling = element.nextSibling;
var previousSibling = element.previousSibling;
var firstChild = element.firstChild;
var lastChild = element.lastChild;

10. 通过遍历获取元素

使用while循环遍历所有的DOM元素，并判断当前元素是否符合条件。例如：

var elements = document.getElementsByTagName("div");
var i = 0;
while (i < elements.length) {
  if (elements[i].className.indexOf("myClass") != -1) {
    // 符合条件
  }
  i++;
}

11. 通过事件对象获取元素

使用事件对象的target属性可以获取被点击的DOM元素。例如：

document.addEventListener("click", function(e) {
  var target = e.target;
  // ...
});

三、结语

以上就是JavaScript获取DOM元素的11种方法总结，读者可以根据实际需要选择合适的方法。希望这篇文章可以对读者有所帮助。

下面是两条示例说明：

示例1

在HTML页面中有一个id为 myNumber 的 input 元素，需要使用JS获取该元素并将其 value 属性输出到控制台。

var myInput = document.getElementById("myNumber");
console.log(myInput.value);

示例2

在HTML页面中有一个class为 myList 的 ul 元素，需要使用JS获取该元素，并依次输出其中所有的 li 元素的 text 内容。

var myList = document.getElementsByClassName("myList")[0];
var myLis = myList.getElementsByTagName("li");
for (var i = 0; i < myLis.length; i++) {
  console.log(myLis[i].textContent);
}