JavaScript基础知识点总结、八
一、DOM对象
DOM--Document Object Model[文档对象模型]
当网页被加载时,浏览器会创建页面的文档对象模型。
HTML DOM 模型被构造为对象的树
Html文件
<html>
<head>
<title>My title</title>
</head>
<body>
<a href=””>My link</a>
<h1>My header</h1>
</body>
</html>
1.DOM可以完成的功能
1.JavaScript 能够改变页面中的所有 HTML 元素
2.JavaScript 能够改变页面中的所有 HTML 属性
3.JavaScript 能够改变页面中的所有 CSS 样式
4.JavaScript 能够对页面中的所有事件做出反应
2. 查找 HTML 元素
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
2.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.2 <