1.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>
2.DOM可以完成的功能
- Javascript能够改变页面中所有HTML元素
- Javascript能够改变页面中所有HTML属性
- Javascript能够改变页面中所有CSS样式
- Javascript能够对页面中所有事件作出反应
3. 查找HTML元素
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
- 通过getElementById(id属性值)通过id查找HTML元素
例如:
注意:当id属性相同时,只能获取到第一个id
<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属性值)" οnclick="testByID();">
</body>
-
getElementsByTagName(标签名) 通过标签名查找HTML元素
注意:该方法或获取到所有相同标签的HTML元素
无论获取的元素标签有几个,都会得到一个DOM对象的集合(数组),除非只获取该数组中的其中一个,才得到该DOM对象的一个元素
例如:
(1)获取多个元素情况
function GetElementsTagByName() {
var p = document.getElementsByTagName("p");
alert(p)
}
</script>
<p>p元素测试document.getElementsTagByName(标签名)</p>
<p>p元素测试document.getElementsTagByName(标签名)</p>
<p>p元素测试document.getElementsTagByName(标签名)</p>
<p>p元素测试document.getElementsTagByName(标签名)</p>
<input type="button" value="p元素测试document.getElementsTagByName(标签名)" οnclick="GetElementsTagByName();">
(2)获取一个元素情况
function GetElementsTagByName() {
var p = document.getElementsByTagName("p");
alert(p)
}
</script>
<p>p元素测试document.getElementsTagByName(标签名)</p>
<input type="button" value="p元素测试document.getElementsTagByName(标签名)" οnclick="GetElementsTagByName();">
(3)只获取该数组中的其中一个,才得到该DOM对象的一个元素
function GetElementsTagByName() {
var p = document.getElementsByTagName("p")[0];
alert(p)
}
-
getElementsByClassName(class属性值)通过类名找到 HTML 元素
注意:getElementsByClassName(class属性值)获取HTML元素注意点和上面标签名查找方法一致
例如:
function testByClassName() {
var p1 = document.getElementsByClassName("p1");
var h1 = document.getElementsByClassName("h1");
//alert(p1); //[object HTMLCollection]
for (var i = 0; i < p1.length; i++) {
p1[i].style.color = "red";
}
var h1 = document.getElementsByClassName("h1");
//alert(h); //[object HTMLCollection]
for (var i = 0; i < h1.length; i++) {
h1[i].style.color = "blue";
}
}
</script>
<p class="p1">p元素测试document.getElementsByClassName(标签名)</p>
<p class="p1">p元素测试document.getElementsByClassName(标签名)</p>
<p class="p1">p元素测试document.getElementsByClassName(标签名)</p>
<p class="p1">p元素测试document.getElementsByClassName(标签名)</p>
<h1 class="h1">h元素测试document.getElementsByClassName</h1>
<h1 class="h1">h元素测试document.getElementsByClassName</h1>
<h1 class="h1">h元素测试document.getElementsByClassName</h1>
<input type="button" value="p元素测试document.getElementsTagByName(标签名)" οnclick="testByClassName();">
4.JavaScript 能够改变页面中的所有 HTML 元素[元素的文本内容]
- innerHTML 属性–改变页面中HTML 元素的文本内容
注意:被innerHTML所修改的内容中出现HTML标签的话,这个标签或被解释运行,所以一般最好不要出现HTML标签
例如:
function testinnerHTML() {
var text1 = document.getElementById("text1");
var h1 = document.getElementsByTagName("h1")[0];
//h1--[object HTMLHeadingElement] Dom对象
var textvalue = text1.value;
h1.innerHTML = textvalue;
//h1.innerHTML=text1.value;
//h1.innerHTML=document.getElementById("text1").value;
//注意:innerHTML中设置的字符串内容中有html标记,那么这个被包含的html标记会被解释运行。
}
</script>
<h1>测试innerHTML</h1>
<input type="text" id="text1">
<input type="button" value="测试innerHTML" οnclick="testinnerHTML();">
-
innerText 属性–改变页面中HTML 元素的文本内容
注意:该方法与inmmerHTML不同的是,innerText在修改HTML文本内容的时候,里面包括HTML标签的时候,会以字符串的形式输出,而不会将HTML标签解释运行!
5.JavaScript 能够改变页面中的所有 HTML 属性
属性在html和css中都有。
Html中的属性—是给浏览器解释运行html标记时通过附加信息。
往往出现在html的开始标记中,如果有多个中间使用空格分离。
例如:
<img ></img>–<img />
<img src=”” width=”” height=”” />
src=”” width=”” height=””----Html标记中的属性
css中的属性----是用来改变html元素的样式。
-
在html开始元素中通过style属性
例如:
<div style=”width:100px;height:100px”>
style—是html属性
width:100px;height:100px----css属性 -
在<style>元素中和“.css”文件中
选择器{
css中的属性
} -
控制 HTML 属性的格式:
dom对象.具体的html属性名称=属性名称对应的属性值;例如:
function testattribute(){
//dom对象.具体的html属性名称=属性名称对应的属性值;
var imgdoc=document.getElementsByTagName("img")[0];
//alert(imgdoc); [object HTMLImageElement]
imgdoc.src="../code/imgs/avatar2.png";
//imgdoc---dom对象
//src--具体的html属性名称
//"imgs/avatar2.png"---属性名称对应的属性值;
}
</script>
</head>
<body>
<img src="../code/imgs/avatar.png" />
<input type="button" value="控制html属性" οnclick="testattribute();">
-
JavaScript 能够改变页面中的所有 CSS 样式
dom对象.style.具体的css属性名称=属性名称对应的属性值;例如:
function testCss() {
//dom对象.style.具体的css属性名称=属性名称对应的属性值;
var imgdoc = document.getElementsByTagName("img")[0];
var button = document.getElementById("but1");
var hdoc = document.getElementsByTagName("h1")[0];
// alert(hdoc.innerText); //hellotest
// alert(hdoc.innerHTML); //hello<a href="#">test</a>
var buttext = button.value;
// alert(buttext);
if (buttext == "隐藏") {
button.value = "显示";
imgdoc.style.display = "none";
}
if (buttext == "显示") {
button.value = "隐藏";
imgdoc.style.display = "block";
}
}
</script>
</head>
<body>
<h1>hello<a href="#">test</a></h1>
<img src="../code/imgs/avatar.png" />
<input id="but1" type="button" value="隐藏" οnclick="testCss();">
</body>