Javascript的DOM常用功能
一、DOM的简单介绍
DOM(Document Object Model)文档对象模型。主要是针对html标签操作的,以下的四个功能相当于选择器功能。需要注意的是除了第一个,后面的三个方法返回的都是一个数组对象。
功能 | 描述 |
---|---|
getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
getElementsByName() | 返回带有指定名称的对象集合。 |
getElementsByTagName() | 返回带有指定标签名的对象集合。 |
getElementsByClassName() | 返回带有指定类名的对象集合。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript</title>
<script>
window.onload = function () {
//通过ID值获取对象
var div2 = document.getElementById("div2");
alert(div2);
//通过类值获取对象
var div4 = document.getElementsByClassName("div4");
alert(div4[0]);
//通过name值获取对象
var div3 = document.getElementsByName("div3");
alert(div3[0]);
//通过标签名获取对象
var div1 = document.getElementsByTagName("div");
alert(div1[0]);
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3" name="div3"></div>
<div id="div4" class="div4"></div>
</body>
</html>