JavaScript_8
1.DOM对象
DOM–Document Object Model[文档对象模型]
当网页被加载时,浏览器会创建页面的文档对象模型。
HTML DOM 模型被构造为对象的树
2.DOM可以完成的功能
- 1.JavaScript 能够改变页面中的所有 HTML 元素
- 2.JavaScript 能够改变页面中的所有 HTML 属性
- 3.JavaScript 能够改变页面中的所有 CSS 样式
- 4.JavaScript 能够对页面中的所有事件做出反应
3. 查找 HTML 元素
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
- 3.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"
onclick="testByID();">
</body>
</html>
- 3.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.3. getElementsByClassName(class属性值)通过类名找到 HTML 元素
例如:
<script>
function testByClassName(){
var p1= document.getElementsByClassName("p1");
//alert(p1); //[object HTMLCollection]
for(var i=0;i<p1.length;i++){
p1[i].style.color="red";
}
var h= document.getElementsByClassName("h");
//alert(h); //[object HTMLCollection]
for(var i=0;i<h.length;i++){
h[i].style.color="blue";
}
}
</script>
4.JavaScript 能够改变页面中的所有 HTML 元素[元素的文本内容]
- innerHTML 属性–改变页面中HTML 元素的文本内容
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>innerHTML属性---改变页面中HTML元素的文本内容</title>
<script>
function testinnerHTML(){
var text1=document.getElementById("text1");
var h1=document.getElementsByTagName("h1")[0];
h1.innerHTML=text1.value;
}
function testinnerText(){
var text1=document.getElementById("text1");
var h1=document.getElementsByTagName("h1")[0];
h1.innerText=text1.value;
}
</script>
</head>
<body>
<h1>改变页面中HTML元素的文本内容</h1>
<input type="text" id="text1"><br>
<input type="button" value="testinnerHTML" onclick="testinnerHTML();"><br>
<input type="button" value="testinnerText" onclick="testinnerText();">
</body>
</html>
注意:innerHTML中设置的字符串内容中有html标记,那么这个被包含的html标记会被解释运行。
- innerText 属性–改变页面中HTML 元素的文本内容
注意:innerText中设置的字符串内容中有html标记,那么这个被包含的html标记会被作为字符串输出。
5.JavaScript 能够改变页面中的所有 HTML 属性
属性在html和css中都有。
Html中的属性—是给浏览器解释运行html标记时通过附加信息。
往往出现在html的开始标记中,如果有多个中间使用空格分离。
例如:
<img ></img>–<img />
<img src=”” width=”” height=”” />
src=”” width=”” height=””----Html标记中的属性
css中的属性----是用来改变html元素的样式。 - 1.在html开始元素中通过style属性
例如:
<div style=”width:100px;height:100px”></div>
style—是html属性
width:100px;height:100px----css属性
- 2.在<style>元素中和“.css”文件中
选择器{
css中的属性
}
控制 HTML 属性的格式:
dom对象.具体的html属性名称=属性名称对应的属性值;
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function testattribute(){
//dom对象.具体的html属性名称=属性名称对应的属性值;
var imgdoc=document.getElementsByTagName("img")[0];
//alert(imgdoc); [object HTMLImageElement]
imgdoc.src="img/2.jpg";
//i![在这里插入图片描述](https://img-blog.csdnimg.cn/20201121185021425.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzUwODU1NTgw,size_16,color_FFFFFF,t_70#pic_center)
mgdoc---dom对象
//src--具体的html属性名称
//"img/2.jpg"---属性名称对应的属性值;
}
</script>
</head>
<body>
<img src="img/1.jpg" />
<input type="button" value="控制html属性" onclick="testattribute();">
</body>
</html>
6.JavaScript 能够改变页面中的所有 CSS 样式
dom对象.style.具体的css属性名称=属性名称对应的属性值;
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
width: 100px;
height: 100px;
}
</style>
<script>
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);
//alert(hdoc.innerHTML);
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="img/3.jpg" />
<input id="but1" type="button" value="隐藏" onclick="testCss();">
</body>
</html