墨裔 发表于 2020-6-26 20:24:22

JavaScript HTML DOM 元素

本章向您讲解如何查找和访问 HTML 页面中的 HTML 元素。
查找 HTML 元素通常,通过 JavaScript,您需要操作 HTML 元素。为了达成此目的,您需要首先找到这些元素。有好几种完成此任务的方法:
[*]通过 id 查找 HTML 元素
[*]通过标签名查找 HTML 元素
[*]通过类名查找 HTML 元素
[*]通过 CSS 选择器查找 HTML 元素
[*]通过 HTML 对象集合查找 HTML 元素

通过 id 查找 HTML 元素DOM 中查找 HTML 元素最简单的方法是,使用元素的 id。本例查找 id="intro" 的元素:
实例var myElement = document.getElementById("intro");亲自试一试如果元素被找到,此方法会以对象返回该元素(在 myElement 中)。如果未找到元素,myElement 将包含 null。
通过标签名查找 HTML 元素本例查找所有 <p> 元素:
实例var x = document.getElementsByTagName("p");亲自试一试本例查找 id="main" 的元素,然后查找 "main" 中所有 <p> 元素:
实例var x = document.getElementById("main");var y = x.getElementsByTagName("p"); 亲自试一试
通过类名查找 HTML 元素如果您需要找到拥有相同类名的所有 HTML 元素,请使用 getElementsByClassName()。本例返回包含 class="intro" 的所有元素的列表:
实例var x = document.getElementsByClassName("intro");亲自试一试通过类名查找元素不适用于 Internet Explorer 8 及其更早版本。
通过 CSS 选择器查找 HTML 元素如果您需要查找匹配指定 CSS 选择器(id、类名、类型、属性、属性值等等)的所有 HTML 元素,请使用 querySelectorAll() 方法。本例返回 class="intro" 的所有 <p> 元素列表:
实例var x = document.querySelectorAll("p.intro");亲自试一试querySelectorAll() 不适用于 Internet Explorer 8 及其更早版本。
通过 HTML 对象选择器查找 HTML 对象本例查找 id="frm1" 的 form 元素,在 forms 集合中,然后显示所有元素值:
实例var x = document.forms["frm1"];var text = ""; var i;for (i = 0; i < x.length; i++) {    text += x.elements.value + "<br>";}document.getElementById("demo").innerHTML = text;亲自试一试以下 HTML 对象(和对象集合)也是可访问的:
[*]document.anchors
[*]document.body
[*]document.documentElement
[*]document.embeds
[*]document.forms
[*]document.head
[*]document.images
[*]document.links
[*]document.scripts
[*]document.title


页: [1]
查看完整版本: JavaScript HTML DOM 元素