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 ...
随机推荐
- Linux操作系统的文件查找工具locate和find命令常用参数介绍
Linux操作系统的文件查找工具locate和find命令常用参数介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.非实时查找(数据库查找)locate工具 locate命 ...
- mysqldump简单备份
mysqldump简单命令 mysqldump DB_NAME [tb1] [tb2] > /path/back.sql --master-data={0|1|2} 0: 不记录二进制日志 ...
- 《代码敲不队》第九次团队作业：Beta冲刺第1天
项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 代码敲不队 作业学习目标 (1)项目文档的完善与整理:(2)团队项目总结陈述PPT编制:(3)符合 ...
- ORACLE对字符串去空格处理（trim）
首先便是这Trim函数.Trim 函数具有删除任意指定字符的功能,而去除字符串首尾空格则是trim函数被使用频率最高的一种.语法Trim ( string ) ,参数string:string类型,指 ...
- 浮点数转成字符串函数gcvt()
头文件:#include <stdlib.h> 这三个函数都是将数字转化为字符串,简单区别如下: 1.gcvt()所转换后的字符串包含小数点或正负符号 2.ecvt()的转换结果中不包括十 ...
- 使用LoadRunner脚本并发下载文件，出现19890错误
需求:10个客户并发下载同一份zip文件.执行的时候,8个Fail了,只下载了两份zip,且无论执行多少遍,都是这样. 错误信息如下:message code:-19890C interpreter ...
- Tensorflow细节-P194-组合训练数据
import tensorflow as tf files = tf.train.match_filenames_once("data.tfrecords-*") filename ...
- sql server vs mysql
1.中文: my.ini [mysqld] character-set-server=utf8 character-set-client=utf8 data\testdb\db.opt default ...
- C语言malloc的用法及详解
#include <stdio.h> #include <stdlib.h> void freem(int* p){ #include <stdio.h> #inc ...
- 洛谷P1325 雷达安装
题目 考虑对于一个小岛,如果有雷达可以覆盖它,则这些雷达肯定在一个区间里,则原题内容则变为区间选点问题 #include <bits/stdc++.h> using namespace s ...