通常,使用JavaScript,想操作HTML元素。要做到这一点,必须先找到元素。有几种方法可以做到这一点。
找到DOM中的HTML元素的最简单的方法,是利用元素的id。
使用id="intro"找到元素 :
var myElement = document.getElementById("intro");
如果找到元素,则该方法将返回元素作为对象 (赋值给myElement)。
元素没有被发现,myElement将是空的。
二、通过标签名称找到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元素
如果想找到所有的HTML元素,匹配指定的CSS选择器 (id, 类名, 类型, 属性, 属性值, 等等), 使用querySelectorAll() 方法。
此示例返回所有class="intro"的
元素列表。
var x = document.querySelectorAll("p.intro");
querySelectorAll() 方法在Internet Explorer 8和早期版本中不起作用。
五、通过HTML对象集合找到HTML元素
此示例查找id="frm1"的表单元素,在表单集合里,并显示所有的颜色值。
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;
下面的HTML对象(或对象的集合)也可访问:
1. document.anchors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>项目</title>
</head>
<body style="background-color: aqua;">
<a name="html">HTML Tutorial</a><br>
<a name="css">CSS Tutorial</a><br>
<a name="xml">XML Tutorial</a><br>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Number of anchors are: " + document.anchors.length;
</script>