DOM--Document Object Model[文档对象模型]
当网页被加载时,浏览器会创建页面的文档对象模型。
html文件
<html>
<head>
<title>My title</title>
</head>
<body>
<a href=””>My link</a>
<h1>My header</h1>
</body>
</html>
HTML DOM 模型被构造为对象的树
1.DOM可以完成的功能
1.JavaScript 能够改变页面中的所有 HTML 元素
2.JavaScript 能够改变页面中的所有 HTML 属性
3.JavaScript 能够改变页面中的所有 CSS 样式
4.JavaScript 能够对页面中的所有事件做出反应
2. 查找 HTML 元素
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
(1).getElementById(id属性值);通过 id 查找 HTML 元素
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//getElementById(id属性值);通过 id 查找 HTML 元素
function testByID(){
var p1=document.getElementById("p1");
//p1--[object HTMLParagraphElement]; DOM对象
p1.style.fontSize="50px";
var p2=document.getElementById("p2");
//p2--[object HTMLParagraphElement] DOM对象
p2.style.color="red";
//当id属性值相同时,只能得到第一个元素
var p3=document.getElementById("p3");
//p3---[object HTMLParagraphElement] DOM对象
p3.style.fontSize="50px";
p3.style.color="red";
}
</script>
</head>
<body>
<p id="p1">p元素测试getElementById(id属性值)</p>
<p id="p2">p元素测试getElementById(id属性值)</p>
<p id="p3">p元素测试getElementById(id属性值)</p>
<p id="p3">p元素测试getElementById(id属性值)</p>
<input type="button" value="测试getElementById(id属性值)"
onclick="testByID();">
</body>
</html>
(2). getElementsByTagName(标签名)通过标签名查找 HTML 元素
例如:
<script>
//getElementsByTagName(标签名)通过标签名查找 HTML 元素
function testByTagName(){
/*
var p=document.getElementsByTagName("p");
//p---[object HTMLCollection] DOM对象的集合---数组
//typeof p---object 数组也是对象所以typeof p值才会是object
//p[5]---[object HTMLParagraphElement] DOM对象
var size=5;
for(var i=0;i<p.length;i++){
var fonts=size*i+size;
p[i].style.fontSize=fonts+"px";
}
*/
//当元素在html文件中只有一个的时候,
//通过getElementsByTagName方法得到的结果依然是数组
var h2=document.getElementsByTagName("h2");
//alert(h2); [object HTMLCollection] DOM对象的集合---数组
if(h2.length==1){
h2[0].style.color="blue";
}
}
</script>
(3). getElementsByClassName(class属性值)通过类名找到 HTML 元素
例如:
function testByClassName(){