JavaScript (五)---[HTML DOM, 对标签的属性,标签体的内容,CSS属性,标签事件进行操作]
目录
- HTML DOM
-
- 对于属性的操作
- 对于标签体的内容进行操作
- 对于标签的CSS修饰属性进行操作
- 对标签的事件进行操作
- 其他几种获得标签的方式
HTML DOM
DOM (Document Object Model) 文档(网页中的标签)对象模型;通过html dom，可用javaScript操作html文档的所有标签.
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。
![JavaScript (五)---[HTML DOM, 对标签的属性,标签体的内容,CSS属性,标签事件进行操作]_第1张图片](http://img.e-com-net.com/image/info8/f22b53c5ea0a43eca67d20a9f3d40c7a.jpg)
加载网页时;浏览器会创建页面的文档对象模型.
在js语言中认为网页中的每一个标签;html文件都是对象;js在操作网页时,本质上就是操作对象;这类对象就是DOM;若要需要对网页中的标签进行修改;首先要获得标签;
在网页加载后;会生成一个document对象;(表示整个html文件);通过这个document对象可以获得网页中的任意一个标签,
获得标签有四种方式;
(1)通过 id 找到标签
(一次只能拿到一个标签的,由于id是唯一)
document.getElementById(“标签的id");
(2)通过标签名找到标签 (返回的是一个装有多个标签对象的数组对象;
例如输入input;获得全部的input类型标签)
document.getElementsByTagName(“标签名”);
(3)通过类名找到标签 (
返回的是一个装有多个标签对象的数组对象;几个标签可以用相同的类名)
document.getElementsByClassName(“类名”);
(4)通过name找到标签 (
返回的是一个装有多个标签对象的数组对象;name相同为一组)
document.getElementsByName(“name");
获得这些标签后;可以以有 4 种操作:
(1)对标签的属性进行操作;
(2)对标签体中的内容进行操作;
(3)对标签的CSS修饰属性进行操作;
(4)对标签的事件进行操作.
对于属性的操作
使用 value 属性
或者图片或链接的src属性
案例一:在一个网页中,有两个文本框,一个复选框,一个按钮;当我们点击按钮时,就会将文本框 1 中的内容自动写到文本框 2 中;文本框 1 的内容自动清空;且自动选中复选框( 实际上就是对标签的属性操作 )
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
function test(){
//获得文本框1的对象;(通过id找到)
var text1=document.getElementById("textid01");
//点击操作按钮,就会获得文本框1中的内容;
//console.log(res0.value);
//获得文本框2的对象;
var text2=document.getElementById("textid02");
//将文本框1的内容赋给文本框2;
text2.value=text1.value;
//清空文本框1的内容;
text1.value="";
//获得复选框的对象;
var check1=document.getElementById("checkid01");
//选中复选框;
check1.checked="checked";
}
script>
head>
<body>
<input type="text" id="textid01" value=""/><hr/>
<input type="text" id="textid02" /><hr/>
<input type="checkbox" id="checkid01"/>
<input type="button" value="操作按钮" onclick="test()"/>
body>
html>
效果:
![JavaScript (五)---[HTML DOM, 对标签的属性,标签体的内容,CSS属性,标签事件进行操作]_第2张图片](http://img.e-com-net.com/image/info8/c00f1351615742788cdaa5084ea90edf.gif)
对于标签体的内容进行操作
使用 innerHTML 属性或者innerText属性
innerHTML 属性:获得标签的html内容(也包含子标签);
innerText 属性:仅获得标签中的文本内容
案例二:在一个网页中;div块级标签1包含一个链接和一个加粗字体;div块级标签2位空的;有个操作按钮;点击一下操作按钮;块级标签 1 的文本内容就会符给块级标签 2 .(对标签体的内容操作)
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
function test(){
//获得块级标签1,2的对象;
var divx1=document.getElementById("div01");
var divx2=document.getElementById("div02");
//将块级标签1中的文本内容赋给块级标签2;
//仅仅是文本内容;所以在块级标签2中的百度链接是无效的;
divx2.innerText=divx1.innerText;
}
script>
head>
<body>
<div id="div01">
<a href="https://www.baidu.com/"> 百度a>
<b>内容b>
div>
<div id="div02">
div>
<input type="button" onclick="test()" value="操作按钮" />
body>
html>
效果:
![JavaScript (五)---[HTML DOM, 对标签的属性,标签体的内容,CSS属性,标签事件进行操作]_第3张图片](http://img.e-com-net.com/image/info8/bc93efc54fcd46f1a82d9182a0961bf8.gif)
对于标签的CSS修饰属性进行操作
注意要先用标签的对象调用 style 属性
案例三:在一个网页中;有一个蓝色背景的块级标签;一个操作按钮;点击操作按钮;块级标签的尺寸和背景颜色就会改变;
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
function test(){
//获得块级标签的对象;
var divx1=document.getElementById("div01");
//改变块级标签的CSS修饰属性;
//修改尺寸和背景颜色;
divx1.style.width="150px";
divx1.style.height="200px";
divx1.style.backgroundColor="lightgreen";
}
script>
head>
<body>
<div id="div01" style="background-color: aqua;">
<p>这是段落p>
div>
<input type="button" value="操作按钮" onclick="test()" />
body>
html>
效果:
![JavaScript (五)---[HTML DOM, 对标签的属性,标签体的内容,CSS属性,标签事件进行操作]_第4张图片](http://img.e-com-net.com/image/info8/98bb441098474b8299f686fdf41f1d96.gif)
对标签的事件进行操作
注意,由于JS语言是按先后顺序加载的;所以在获取到标签对象后,要添加或者修改标签的事件;必须要等网页中的标签加载之后;那么,可以选择将js语言直接写在body标签中的网页之后,或者利用外部js文件导入到body标签中的网页之后;还有一种做法是在body标签中添加 onload 事件;或者对 window对象使用onload事件;等待网页中的标签加载之后,再对标签绑定事件处理函数;就不用在标签中一个一个地添加事件了.
注意;这样使用的是匿名函数;即无需添加函数名.
案例四:对一个操作按钮添加事件;
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
//先加载网页中的标签;
window.onload=function(){
//对操作按钮添加事件;
document.getElementById("button01").onclick=function(){
var res=confirm("您确定退出?");
//退出当前窗口;
if(res=true){
window.close();
}
}
}
script>
head>
<body>
<input type="button" id="button01" value="操作按钮" />
body>
html>
效果:
![JavaScript (五)---[HTML DOM, 对标签的属性,标签体的内容,CSS属性,标签事件进行操作]_第5张图片](http://img.e-com-net.com/image/info8/1d61c8ebd9a640eda32dfdfd0a471f88.gif)
其他几种获得标签的方式
在前面的案例中都是用标签的ID获取标签的;尝试用别的方式获取标签;
(1)获取标签名的方式 (返回的是一个装有多个标签对象的数组对象;)
document.getElementsByTagName(“标签名”);
案例五:要通过一个操作按钮,选中所有的复选框;(使用获取标签名的方式)
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
function btntest(){
//获得input标签对象的一个数组;
var inputobj=document.getElementsByTagName("input");
//对所有复选框操作;
console.log(inputobj.length);
for (var i = 0; i <inputobj.length-1; i++) {
inputobj[i].checked=true;
}
}
script>
head>
<body>
等待删除的文件<hr/>
<input type="checkbox"/>图片
<input type="checkbox"/>音频
<input type="checkbox"/>视频
<input type="checkbox"/>大应用
<input type="checkbox"/>文档
<input type="checkbox"/>无效安装包<hr/>
<input type="button" value="操作按钮" onclick="btntest()"/>
body>
html>
(2)获取类名的方式 ( 返回的是一个装有多个标签对象的数组对象)
document.getElementsByClassName(“类名”)
在学习CSS修饰属性时;可以给标签加类名 class ;几个标签也可以用同样的类名.
案例五;同时选中多个复选框;
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
function btntest(){
//获取类名的方式;
var inputobj=document.getElementsByClassName("checkb");
//选中所有复选框;
for (var i = 0; i < inputobj.length; i++) {
inputobj[i].checked=true;
}
}
script>
head>
<body>
等待删除的文件<hr/>
<input type="checkbox" class="checkb"/>图片
<input type="checkbox" class="checkb" />音频
<input type="checkbox" class="checkb" />视频
<input type="checkbox" class="checkb"/>大应用
<input type="checkbox" class="checkb"/>文档
<input type="checkbox" class="checkb"/>无效安装包<hr/>
<input type="button" value="操作按钮" onclick="btntest()"/>
body>
html>
(3)通过name找到标签 (返回的是一个装有多个标签对象的数组对象;name相同为一组)
document.getElementsByName(“name");
案例五;同时选中所有复选框
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
function btntest(){
//获取name的方式;
var inputobj=document.getElementsByName("checkname")
//选中所有复选框;
for (var i = 0; i < inputobj.length; i++) {
inputobj[i].checked=true;
}
}
script>
head>
<body>
等待删除的文件<hr/>
<input type="checkbox" name="checkname"/>图片
<input type="checkbox" name="checkname" />音频
<input type="checkbox" name="checkname"/>视频
<input type="checkbox" name="checkname"/>大应用
<input type="checkbox" name="checkname"/>文档
<input type="checkbox" name="checkname"/>无效安装包<hr/>
<input type="button" value="操作按钮" onclick="btntest()"/>
body>
html>