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 ...
随机推荐
- zabbix Server 4.0 报警（Action）篇
zabbix Server 4.0 报警(Action)篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看zabbix默认的Actions 1>.点击默认的Actio ...
- Schema学习【一】
XML Schema 是基于 XML 的 DTD 替代者. 什么是 XML Schema? XML Schema 的作用是定义 XML 文档的合法构建模块,类似 DTD. XML Schema: 定义 ...
- Anaconda 查看、创建、管理和使用python环境
1. 查看Python环境 conda info --env可以看到所有python环境,前面有个‘*’的代表当前环境: 2.创建Python环境 conda create --name python ...
- Jmeter 中正则表达式提取器Regular Expression Extractor
正则表达式提取器点击后置处理器中Post Processors 中的正则表达式提取器 Regular Expression Extractor Appy to: 表示作用于哪一个请求Main samp ...
- samba简单配置
Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB (Server Messages Block,信息服务块)是一种在局域网上共享文件和打印机的一种 ...
- [LeetCode] 0155. Min Stack 最小栈 & C++Runtime加速
题目 Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. ...
- 基于Java+Selenium的WebUI自动化测试框架（十三）-----基础页面类BasePage(Excel)
前面,我们讲了如何使用POI进行Excel的“按需读取”.根据前面我们写的BasePageX,我们可以很轻松的写出来基于这个“按需读取”的BasePage. package webui.xUtils; ...
- 使用React.Fragment替代render函数中div的包裹
1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extend ...
- 微信小程序~生命周期方法详解
生命周期是指一个小程序从创建到销毁的一系列过程 在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面 先来看一张小程序项目结构 从上图可以看出,根目录下面有包含了app.js ...
- 《CoderXiaoban》第九次团队作业：Beta冲刺与验收准备2
项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 实验十三 团队作业9:BETA冲刺与团队项目验收 团队名称 Coderxiaoban团队 作业学习目标 (1)掌握软件黑盒 ...