JavaScript DOM 获取元素的各种方法

在JavaScript中，DOM（文档对象模型）提供了许多方法来获取元素。这些方法可以通过元素的标签名、类名、ID和选择器等来获取元素。下面是一些常用的获取元素的方法和相应的代码示例。

1. 通过标签名获取元素

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

上面的代码将返回文档中所有的<p>元素的集合。你可以通过索引来访问集合中的元素。

1. 通过类名获取元素

var elements = document.getElementsByClassName('class-name');

上面的代码将返回所有具有指定类名的元素的集合。你可以通过索引来访问集合中的元素。

1. 通过ID获取元素

var element = document.getElementById('element-id');

上面的代码将返回具有指定ID的元素。请注意，由于ID在文档中应该是唯一的，所以这个方法只会返回一个元素。

1. 通过选择器获取元素

var element = document.querySelector('selector');
var elements = document.querySelectorAll('selector');

querySelector方法将返回第一个匹配指定选择器的元素，而querySelectorAll方法将返回所有匹配指定选择器的元素的集合。你可以使用任何CSS选择器来指定元素。

1. 通过父元素获取子元素

var parent = document.getElementById('parent-id');
var child = parent.querySelector('selector');

上面的代码首先获取具有指定ID的父元素，然后使用querySelector方法获取子元素。

请注意，上述方法中返回的元素是动态的，这意味着当文档结构发生改变时，返回的元素集合也会相应地更新。此外，如果没有匹配的元素，上述方法将返回null。

通过上述方法，你可以方便地获取页面上的元素，并对其进行操作和处理。