松软科技web教程:JavaScript HTML DOM 元素

查找 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[i].value + "<br>";
}
document.getelementbyid("demo").innerhtml = text;

---------------------------------------------------------------------------------------------------------------------------------------------------------

文章来源:www.sysoft.net.cn,加v:15844800162深度交流