JavaScript DOM 元素

本章向您讲解如何查找和访问 HTML 页面中的 HTML 元素。

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了达成此目的，您需要首先找到这些元素。有好几种完成此任务的方法:

• 通过 id 查找 HTML 元素
• 通过标签名查找 HTML 元素
• 通过类名查找 HTML 元素
• 通过 CSS 选择器查找 HTML 元素
• 通过 HTML 对象集合查找 HTML 元素

通过 id 查找 HTML 元素

DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。

本例查找 id="intro" 的元素:

如果元素被找到，此方法会以对象返回该元素(在 myElement 中)。

如果未找到元素，myElement 将包含 null。

通过标签名查找 HTML 元素

本例查找所有 <p> 元素:

本例查找 id="main" 的元素，然后查找 "main" 中所有 <p> 元素:

通过类名查找 HTML 元素

如果您需要找到拥有相同类名的所有 HTML 元素，请使用 getElementsByClassName()。

本例返回包含 class="intro" 的所有元素的列表:

通过 CSS 选择器查找 HTML 元素

如果您需要查找匹配指定 CSS 选择器(id、类名、类型、属性、属性值等等)的所有 HTML 元素，请使用 querySelectorAll() 方法。

本例返回 class="intro" 的所有 <p> 元素列表:

通过 HTML 对象选择器查找 HTML 对象

本例查找 id="frm1" 的 form 元素，在 forms 集合中，然后显示所有元素值:

以下 HTML 对象(和对象集合)也是可访问的:

• document.anchors
• document.body
• document.documentElement
• document.embeds
• document.forms
• document.head
• document.images
• document.links
• document.scripts
• document.title