在web前端开发中，HTML DOM（文档对象模型）是用来操作HTML文档的一种标准方法。通过使用HTML DOM方法，开发者可以轻松地访问、修改、添加和删除HTML元素。
getElementById()
getElementById() 方法用于根据元素的 id 属性获取指定的元素。例如，如果我们有一个id为“myElement”的元素，我们可以使用以下代码获取该元素：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------------------------- ------- ------ ---- ----------------------------- -------- --- ------- - ------------------------------------- --------------------- --------- ------- -------展开代码
在上面的示例中，我们首先在HTML中定义了一个id为“myElement”的div元素，然后使用getElementById()方法获取该元素并将其存储在变量element中。最后，我们通过console.log()方法将该元素输出到控制台。
getElementsByTagName()
getElementsByTagName() 方法用于根据元素的标签名获取一组元素。例如，如果我们想获取所有的<p>元素，可以使用以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------------------------------- ------- ------ ------------ ------------ ------------ -------- --- ---------- - ----------------------------------- ------------------------ --------- ------- -------展开代码
在上面的示例中，我们使用getElementsByTagName()方法获取所有的<p>元素，并将它们存储在变量paragraphs中。最后，我们通过console.log()方法将这些元素输出到控制台。
querySelector()
querySelector() 方法用于根据CSS选择器获取匹配的第一个元素。例如，如果我们想获取id为“myElement”的元素，可以使用以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------------------------- ------- ------ ---- ----------------------------- -------- --- ------- - ------------------------------------- --------------------- --------- ------- -------展开代码
在上面的示例中，我们使用querySelector()方法根据CSS选择器#myElement获取id为“myElement”的元素，并将其存储在变量element中。最后，我们通过console.log()方法将该元素输出到控制台。
