004 DOM01
一：说明
1.Js的三个部分
ECMAScripts标准：JS的基本语法
DOM：文档对象模型，操作页面的元素的
BOM：浏览器对象模型，操作浏览器
2.术语
文档：一个页面就是一个文档
元素：页面中的所有标签都是元素，元素可以看成对象
节点：页面中的所有内容都是节点
属性：标签的属性
二：初次体验DOM
1.程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script> </script>
</head>
<body>
<input type="button" value="按钮弹出" onclick="alert('CJ')">
</body>
</html>
优化版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <input type="button" value="按钮弹出" id="demo">
<script>
function click(){
alert("CJ");
}
var registEvent = document.getElementById("demo");
//给按钮注册事件，注意点是不加括号，先不执行，在点击的时候才执行
registEvent.onclick=click;
</script>
</body>
</html>
再次优化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <input type="button" value="按钮弹出" id="demo">
<script>
var registEvent = document.getElementById("demo");
//给按钮注册事件，使用匿名函数
registEvent.onclick = function click(){
alert("CJ");
};
</script>
</body>
</html>
三：案例【基本标签，表单，样式】
1.单击按钮，显示图片
获取img的对象，然后操作里面的属性即可。
其中，宽度，高度不需要加px单位。
程序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="显示图片" id="btn">
<br>
<img src="" alt="" id="im">
<script>
var btn = document.getElementById("btn");
btn.onclick=function () {
var im = document.getElementById("im");
im.src = "image/00_1.png";
im.width = 500;
}
</script>
</body>
</html>
效果：
2.点击按钮，修改p标签中的内容
使用innerTxet。凡是成对的标签，中间的文本，设置的时候，都使用innerText这个属性放入方式。
程序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="显示图片" id="btn">
<br>
<p id="p1">哈哈</p>
<script>
var btn = document.getElementById("btn");
btn.onclick=function () {
var p1 = document.getElementById("p1");
p1.innerText="嘿嘿";
}
</script>
</body>
</html>
效果：
3.点击按钮，修改a标签的地址，与热点文字
程序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="显示" id="btn">
<br>
<a href="www.baidu.com" id="a1">百度</a>
<script>
var btn = document.getElementById("btn");
btn.onclick=function () {
var a1 = document.getElementById("a1");
a1.innerText="新浪";
a1.href ="https://www.sina.com.cn/";
}
</script>
</body>
</html>
效果：
4.给多个p设置文字
程序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="显示" id="btn">
<br>
<p>AAAAA</p>
<p>BBBBB</p>
<p>CCCCC</p>
<div>
<p>DDDDDD</p>
</div>
<script>
var btn = document.getElementById("btn");
btn.onclick=function () {
var p1 = document.getElementsByTagName("p");
for (var i=0;i<p1.length;i++){
p1[i].innerText="XXYYZZ";
}
}
</script>
</body>
</html>
效果：
5.只修改div中的p标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="显示" id="btn">
<br>
<p>AAAAA</p>
<p>BBBBB</p>
<p>CCCCC</p>
<div id="div">
<p>DDDDDD</p>
</div>
<script>
var btn = document.getElementById("btn");
btn.onclick=function () {
var p1 = document.getElementById("div").getElementsByTagName("p");
for (var i=0;i<p1.length;i++){
p1[i].innerText="XXYYZZ";
}
}
</script>
</body>
</html>
效果：
6.单机按钮，修改文本框中的文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="显示" id="btn"><br>
<input type="text" value="111"><br>
<input type="text" value="111"><br>
<input type="text" value="111"><br>
<input type="text" value="111"><br>
<input type="text" value="111"><br>
<input type="text" value="111"><br> <script>
var but = document.getElementById("btn").onclick=function () {
var input = document.getElementsByTagName("input");
for (var i=0;i<input.length;i++){
if(input[i].type!="button"){
input[i].value = "zzzzz";
}
}
}
</script>
</body>
</html>
效果：
7.点谁，谁变化
在变化的时候，使用for循环，将其他的还原，当前元素才变化。
注意是，使用this，如果使用btns[i]，则在页面加载完成后，点击执行，i=6了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="没中"><br>
<input type="button" value="没中"><br>
<input type="button" value="没中"><br>
<input type="button" value="没中"><br>
<input type="button" value="没中"><br>
<input type="button" value="没中"><br> <script>
//获取所有的按钮，然后分别注册事件
var btns = document.getElementsByTagName("input");
for (var i =0;i<btns.length;i++){
//所有的都置为没中
btns[i].onclick=function () {
for (var j=0;j<btns.length;j++){
btns[j].value="没中";
}
this.value="中了";
}
//当前的是中
}
</script>
</body>
</html>
效果：
8.切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
width: 300px;
}
</style>
</head>
<body>
<a href="#">
<img src="data:image/00_1.png" alt="" id="img">
</a>
<script>
document.getElementById("img").onclick = function () {
this.src = "image/00_2.jpg";
}
</script>
</body>
</html>
9.修改div的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<input type="button" value="设置样式" id="btn">
<div id="di" style="width:200px;height: 100px;background-color: darkseagreen"></div>
<script>
var btn=document.getElementById("btn");
btn.onclick=function () {
var div = document.getElementById("di");
div.style.width="400px";
div.style.height="300px";
div.style.backgroundColor="red"; //在Js中，将会将原来的-去掉，然后驼峰式。
}
</script>
</body>
</html>
效果：
10.影藏与显示
影藏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<input type="button" value="设置样式" id="btn">
<div id="di" style="width:200px;height: 100px;background-color: darkseagreen"></div>
<script>
var btn=document.getElementById("btn");
btn.onclick=function () {
var div = document.getElementById("di");
div.style.display="none";
}
</script>
</body>
</html>
显示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<input type="button" value="影藏" id="btn1">
<input type="button" value="显示" id="btn2"> <div id="di" style="width:200px;height: 100px;background-color: darkseagreen"></div>
<script>
//影藏
var btn1=document.getElementById("btn1");
btn1.onclick=function () {
var div = document.getElementById("di");
div.style.display="none";
}
//显示
var btn2=document.getElementById("btn2");
btn2.onclick=function () {
var div = document.getElementById("di");
div.style.display="block";
} </script>
</body>
</html>
效果：‘
使用一个按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<input type="button" value="影藏" id="btn3">
<div id="di" style="width:200px;height: 100px;background-color: darkseagreen"></div>
<script> //一个按钮
var btn3=document.getElementById("btn3");
btn3.onclick=function () {
var div = document.getElementById("di");
if(this.value=="影藏"){
div.style.display="none";
this.value="显示" //使用this
}else{
div.style.display="block";
this.value="影藏"
}
}
</script>
</body>
</html>
11.操作class
设置元素的样式，不用class关键字，使用className
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cc {
width: 300px;
height: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<input type="button" value="影藏" id="btn3">
<div id="di"></div>
<script>
var btn3=document.getElementById("btn3");
btn3.onclick=function () {
document.getElementById("di").className="cc";
}
</script>
</body>
</html>
004 DOM01的更多相关文章
- [网站公告]3月10日23:00-4:00阿里云SLB升级，会有4-8次连接闪断
大家好,阿里云将于3月10日23:00-4:00对负载均衡服务(SLB)做升级操作,升级期间SLB网络连接会有约4-8次闪断.由此给您带来麻烦,敬请谅解! 阿里云SLB升级公告内容如下: 尊敬的用户: ...
- 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数004·edge，边缘处理
<zw版·Halcon-delphi系列原创教程> Halcon分类函数004·edge,边缘处理 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替换:“ ...
- Python练习题 004：判断某日期是该年的第几天
[Python练习题 004]输入某年某月某日,判断这一天是这一年的第几天? ---------------------------------------------- 这题竟然写了 28 行代码! ...
- [反汇编练习] 160个CrackMe之004
[反汇编练习] 160个CrackMe之004. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...
- [置顶] cocos2d-x 3.0游戏开发xcode5帅印博客教学 004.[HoldTail]主角的上下飞行跟移动
cocos2d-x 3.0游戏开发xcode5帅印博客教学 004.[HoldTail]主角的上下飞行跟移动 写给大家的前言,在学习cocos2d-x的时候自己走了很多的弯路,也遇到了很多很多问题,不 ...
- 逆向project第004篇：令计算器程序显示汉字（下）
一.前言 钩子技术是一项很有有用价值的技术.在Windows下HOOK技术的方法比較多,使用比較灵活,常见的应用层的HOOK方法有Inline HOOK(详见<反病毒攻防研究第012篇:利用In ...
- 2017-2018-1 1623 bug终结者 冲刺004
bug终结者 冲刺004 by 20162322 朱娅霖 整体连接 简要说明 目前,我们已经完成了欢迎界面,主菜单界面,排行榜界面,选项界面,胜利界面,地板类.小人类.墙体类.箱子类和虚拟按键类. 主 ...
- 『练手』004 Laura.SqlForever如何扩展 导航栏 工具栏 右键菜单 插件
004 Laura.SqlForever如何扩展 导航栏 工具栏 右键菜单 插件 导航栏 插件扩展 比如下图的 窗口 > 关闭所有文档 这个导航栏: 在 任何程序集,任何命名空间,任 ...
- maven私库nexus2.3.0-04迁移升级到nexus-3.16.1-02（异机迁移备份）
环境信息: nexus2.3.0-04安装在32位Windows server 2003系统上 安装位置信息如下: 仓库迁移 Nexus的构件仓库都保存在sonatype-work目录中,nexus2 ...
随机推荐
- 【HCIA Gauss】学习汇总-数据库管理-2
数据库管理目标:稳定 安全 数据一致性 系统高性能 数据库管理员 数据库管理范围 :数据库管理对象1.物理设计工作 2.物理实现工作 对象是指 :数据库里 存储和指向数据的各种概念和结构的总称 对象管 ...
- zabbix监控MySQL状态值获取不到值原因分析
在server端测试键值 [root@zbx-server etc]# zabbix_get -s MySQL-glibc -k "buffer_pool_wait_free" 如 ...
- WPF + SelfHost 实现窗体自宿主（API，API和窗体通信）
前言 今天研究了在 WPF 中使用 SelfHost 自宿主. 具体的功能是,在 WPF 中使用自宿主服务,外部调用服务的 API,在 API 里面操作窗体的显示等. 技术点 在 WPF 中集成 Se ...
- HDU2870 Largest Submatrix
Largest Submatrix Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- linux 中截取字符串
shell中截取字符串的方法有很多中,${expression}一共有9种使用方法.${parameter:-word}${parameter:=word}${parameter:?word}${pa ...
- 2019/2/18 Test
图论模拟 [简述情况]: \(110/400\) \(20 \leq rank\) \(AC:1\) 有思路但未\(AC:0\) 无思路\(:3\) 题目 简述 \(LUOGU4304\) 二分图最大 ...
- ML,DL核心数学及算法知识点总结
ML,DL核心数学及算法知识点总结:https://mp.weixin.qq.com/s/bskyMQ2i1VMNiYKIvw_d7g
- 洛谷 P1638 逛画展 题解
P1638 逛画展 题目描述 博览馆正在展出由世上最佳的 M 位画家所画的图画. wangjy想到博览馆去看这几位大师的作品. 可是,那里的博览馆有一个很奇怪的规定,就是在购买门票时必须说明两个数字, ...
- 42、JDBC数据源案例
一.JDBC数据源案例 1.概述 Spark SQL支持使用JDBC从关系型数据库(比如MySQL)中读取数据.读取的数据,依然由DataFrame表示,可以很方便地使用Spark Core提供的各种 ...
- 影像优化 OptimizeRaster工具包介绍
Esri OptimizeRasters是一个高效.可配置的开源工具包. OptimizeRasters提供了以下功能: 影像格式转换和压缩.支持输出优化栅格格式:MRF.分块TIFF.云存储优化Ge ...