JavaScript 获取元素和节点的常见方式包括使用 document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName()、document.querySelector() 和 document.querySelectorAll()。每种方法针对不同的场景和需求，提供了便捷的 DOM 元素或节点选择功能。
详细来说，document.getElementById() 方法用于获取带有特定 id 属性的HTMLElement；document.getElementsByTagName() 方法用于获取具有相同标签名的一个HTMLCollection；document.getElementsByClassName() 方法用于获取所有具有相同类名的元素列表；而 document.querySelector() 和 document.querySelectorAll() 使用CSS选择器来选取单个或多个节点。
document.getElementById() 是一个非常直接且高效的方法，通常用于快速访问具有唯一ID标识符的元素。例如：
var element = document.getElementById('myElement');
接下来，我们将对这些方法进行详细描述，并通过例子阐述它们的使用场景。
一、DOCUMENT.GETELEMENTBYID
document.getElementById() 方法时JavaScript中最常用的元素选择方法之一，它能够根据元素的id属性快速定位DOM元素。由于id在一个HTML文档中是唯一的，这个方法总是返回单个元素。
例子：
var uniqueElement = document.getElementById('uniqueID');
使用场景：
当你知道目标元素的ID时，这个方法非常有用。例如，你可能会在表单提交时获取一个特定的输入字段，或者更改一个特定区块的内容。
二、DOCUMENT.GETELEMENTSBYTAGNAME
document.getElementsByTagName() 方法返回一个包含所有给定标签名称的元素的HTMLCollection。这个集合是动态的，反映了文档当前状态的实时更改。
例子：
var paragraphs = document.getElementsByTagName('p');
for (var i = 0; i < paragraphs.length; i++) {
// 对每个段落执行操作
}
使用场景：
当需要操作一组相同标签的元素时，这个方法很有用。比如，更改文档中所有段落的字体大小。
三、DOCUMENT.GETELEMENTSBYCLASSNAME
document.getElementsByClassName() 方法返回一个动态的HTMLCollection，其中包含了所有拥有指定类名的元素。
例子：
var elementsWithClass = document.getElementsByClassName('someClassName');
for (var i = 0; i < elementsWithClass.length; i++) {
// 对具有某个类的每个元素执行操作
}
使用场景：
这个方法适合在处理具有共同CSS类的一组元素时使用，如对页面上所有警告盒子应用相同的逻辑处理。
四、DOCUMENT.QUERYSELECTOR
document.querySelector() 方法返回文档中与指定选择器或者选择器组匹配的第一个Element。如果没有找到匹配项，则返回null。
例子：
var firstButton = document.querySelector('button');
使用场景：
这个方法用于快速定位页面上的元素，尤其是当元素没有ID或类名，或者需要更复杂的CSS选择器来定位时。例如，选择表单中的第一个输入框。
五、DOCUMENT.QUERYSELECTORALL
document.querySelectorAll() 方法返回一个包含文档中所有与指定选择器或选择器组相匹配的元素的静态NodeList集合。
例子：
var allButtons = document.querySelectorAll('.contAIner > button');
使用场景：
当需要处理匹配特定CSS选择器的所有元素时，这个方法很有用。例如，选择某个容器内的所有按钮并添加事件监听。
了解这些JavaScript获取元素和节点的方法，并合理地应用它们能够帮助你高效地操作DOM，进而开发出用户友好的Web界面。
相关问答FAQs：
1. 如何用JavaScript获取元素？
在JavaScript中，可以使用document.getElementById()方法通过元素的ID获取元素。例如，如果元素的ID是"myElement"，那么可以使用以下代码获取该元素：
var element = document.getElementById("myElement");
除了使用ID，还可以使用其他属性、标签名或class名来获取元素。例如，可以使用document.querySelector()方法通过选择器获取元素。例如，要获取class名为"myClass"的元素：
var element = document.querySelector(".myClass");
2. 如何用JavaScript获取节点？
节点是DOM树中的一个元素，可以是元素节点、文本节点等。通过JavaScript，可以使用多种方法来获取节点：
- 使用
document.getElementsByTagName()方法通过标签名获取一组节点。例如，要获取所有<p>元素的节点列表：
var nodes = document.getElementsByTagName("p");
- 使用
document.getElementsByClassName()方法通过class名获取一组节点。例如，要获取所有class名为"myClass"的节点：
var nodes = document.getElementsByClassName("myClass");
- 使用
document.querySelector()方法通过选择器获取第一个匹配的节点。例如，要获取class名为"myClass"的第一个节点：
var node = document.querySelector(".myClass");
- 使用
document.querySelectorAll()方法通过选择器获取所有匹配的节点。例如，要获取所有class名为"myClass"的节点：
var nodes = document.querySelectorAll(".myClass");
3. JavaScript如何通过父元素获取子元素或子节点？
在JavaScript中，可以使用以下方法通过父元素获取子元素或子节点：
- 使用
parentNode属性获取当前节点的父节点。例如，要获取某个元素的父元素：
var parentElement = element.parentNode;
- 使用
children属性获取当前元素的子元素。例如，要获取某个元素的所有子元素：
var childElements = element.children;
- 使用
firstElementChild属性获取当前元素的第一个子元素。例如，要获取某个元素的第一个子元素：
var firstChild = element.firstElementChild;
- 使用
lastElementChild属性获取当前元素的最后一个子元素。例如，要获取某个元素的最后一个子元素：
var lastChild = element.lastElementChild;
除了上述方法，还可以使用childNodes属性获取当前节点的所有子节点（包括元素节点、文本节点等）。例如，要获取某个元素的所有子节点：
var childNodes = element.childNodes;
