HTML DOM 方法

在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()方法将该元素输出到控制台。


上一篇:HTML DOM 节点
下一篇:HTML DOM 属性