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 ...
随机推荐
- 191016 Linux中安装python3
注意事项:直接在Linux系统中安装python3后会导致yum命令和pip命令失效. 安装python3过程(按下述方法安装依赖包.指定软链接,就不会出错了): # 安装依赖包 yum instal ...
- Scrum会议博客以及测试报告（β阶段）
3组Alpha冲刺阶段博客目录 一.Scrum Meeting1. [第十周会议记录](链接地址:https://www.cnblogs.com/Cherrison-Time/articles/120 ...
- Python工程目录组织
Python工程目录组织 from: https://zhuanlan.zhihu.com/p/36221226 Python工程目录组织 关于如何组织一个较好的Python工程目录结构,已经有一些得 ...
- Java8 Stream 流使用场景和常用操作
JAVA8内置的函数式编程接口应用场景和方式 pojo类对象和默认创建list的方法 import lombok.AllArgsConstructor; import lombok.Data; imp ...
- java线程基础巩固---分析Thread的join方法详细介绍，结合一个典型案例
关于Thread中的join方法貌似在实际多线程编程当中没怎么用过,在当初学j2se的时候倒时去学习过它的用法,不过现在早已经忘得差不多啦,所以对它再复习复习下. 首先先观察下JDK对它的介绍: 其实 ...
- 行为型模式(六) 状态模式（State）
一.动机(Motivate) 在软件构建过程中,某些对象的状态如果改变,其行为也会随之而发生变化,比如文档处于只读状态,其支持的行为和读写状态支持的行为就可能完全不同. 如何在运行时根据对象的状态 ...
- 编程判断输入的字符是否为‘y’或‘Y’，若是，则输出‘yes’，否则输出‘no’
#include<stdio.h>void main(){ char ch; ch=getchar(); ch == 'y' || ch == 'Y' ? printf("yes ...
- [NgRx 8] Basic of NgRx8
1. First step is creating action creator Action name should be clear which page, which functionality ...
- Java基础学习【字符串倒序输出+排序】
字符串逆序输出 import java.util.*; public class Main{ public static void main(String [] args) { //字符串逆序输出 S ...
- 001——CC2530——终端或者路由器传输到不同多协调器上
(一)参考文献:协调器太多,cc2530的终端或则路由器选择性加入协调器的方法 (二)频道和ID一样 进入协调器和终端和路由器的两个程序,找到Tools中的f8wConfig.cfg文件.修改默认PA ...