思享工具箱

004 DOM01

摘要：
1： 说明1。Js ECMAScripts标准的三个部分：JSDOM的基本语法：文档对象模型，操作页面元素的BOM：浏览器对象模型，运行浏览器2。术语文档：页面是一个文档元素：页面中的所有标签都是元素，元素可以被视为对象节点：页面中所有内容都是节点属性：标签的属性2：第一次体验DOM 1。程序12345title678910haha1112varbtn=document。按ID获取元素；13磅。onclick=function（）｛14varp1=document.getElementById；15p1。innerText=“嘿嘿”；16} 171819效果：3。单击按钮可修改标记和热文本程序的地址：1˂！

一：说明

1.Js的三个部分

　　ECMAScripts标准：JS的基本语法

　　DOM：文档对象模型，操作页面的元素的

　　BOM：浏览器对象模型，操作浏览器

2.术语

　　文档：一个页面就是一个文档

　　元素：页面中的所有标签都是元素，元素可以看成对象

　　节点：页面中的所有内容都是节点

　　属性：标签的属性

二：初次体验DOM

1.程序

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7 
 8     </script>
 9 </head>
10 <body>
11     <input type="button" value="按钮弹出" onclick="alert('CJ')">
12 </body>
13 </html>

　　优化版本：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <input type="button" value="按钮弹出" id="demo">
10     <script>
11         function click(){
12             alert("CJ");
13         }
14         var registEvent = document.getElementById("demo");
15         //给按钮注册事件，注意点是不加括号，先不执行，在点击的时候才执行
16         registEvent.onclick=click;
17     </script>
18 </body>
19 </html>

　　再次优化：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <input type="button" value="按钮弹出" id="demo">
10     <script>
11         var registEvent = document.getElementById("demo");
12         //给按钮注册事件，使用匿名函数
13         registEvent.onclick = function click(){
14             alert("CJ");
15         };
16     </script>
17 </body>
18 </html>

三：案例【基本标签，表单，样式】

1.单击按钮，显示图片

　　获取img的对象，然后操作里面的属性即可。

　　其中，宽度，高度不需要加px单位。

　　程序：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="显示图片" id="btn">
 9     <br>
10     <img src="" alt="" id="im">
11     <script>
12         var btn = document.getElementById("btn");
13         btn.onclick=function () {
14             var im = document.getElementById("im");
15             im.src = "image/00_1.png";
16             im.width = 500;
17         }
18     </script>
19 </body>
20 </html>

　　效果：

　　004 DOM01第1张

2.点击按钮，修改p标签中的内容

　　使用innerTxet。凡是成对的标签，中间的文本，设置的时候，都使用innerText这个属性放入方式。

　　程序：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="显示图片" id="btn">
 9     <br>
10     <p id="p1">哈哈</p>
11     <script>
12         var btn = document.getElementById("btn");
13         btn.onclick=function () {
14             var p1 = document.getElementById("p1");
15             p1.innerText="嘿嘿";
16         }
17     </script>
18 </body>
19 </html>

　　效果：

　　004 DOM01第2张

3.点击按钮，修改a标签的地址，与热点文字

　　程序：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="显示" id="btn">
 9     <br>
10     <a href="www.baidu.com" id="a1">百度</a>
11     <script>
12         var btn = document.getElementById("btn");
13         btn.onclick=function () {
14             var a1 = document.getElementById("a1");
15             a1.innerText="新浪";
16             a1.href ="https://www.sina.com.cn/";
17         }
18     </script>
19 </body>
20 </html>

　　效果：

　　004 DOM01第3张

4.给多个p设置文字

　　程序：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="显示" id="btn">
 9     <br>
10     <p>AAAAA</p>
11     <p>BBBBB</p>
12     <p>CCCCC</p>
13     <div>
14         <p>DDDDDD</p>
15     </div>
16     <script>
17         var btn = document.getElementById("btn");
18         btn.onclick=function () {
19             var p1 = document.getElementsByTagName("p");
20             for (var i=0;i<p1.length;i++){
21                 p1[i].innerText="XXYYZZ";
22             }
23         }
24     </script>
25 </body>
26 </html>

　　效果：

　　004 DOM01第4张

5.只修改div中的p标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="显示" id="btn">
 9     <br>
10     <p>AAAAA</p>
11     <p>BBBBB</p>
12     <p>CCCCC</p>
13     <div id="div">
14         <p>DDDDDD</p>
15     </div>
16     <script>
17         var btn = document.getElementById("btn");
18         btn.onclick=function () {
19             var p1 = document.getElementById("div").getElementsByTagName("p");
20             for (var i=0;i<p1.length;i++){
21                 p1[i].innerText="XXYYZZ";
22             }
23         }
24     </script>
25 </body>
26 </html>

　　效果：

　　004 DOM01第5张

6.单机按钮，修改文本框中的文本

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="显示" id="btn"><br>
 9     <input type="text" value="111"><br>
10     <input type="text" value="111"><br>
11     <input type="text" value="111"><br>
12     <input type="text" value="111"><br>
13     <input type="text" value="111"><br>
14     <input type="text" value="111"><br>
15 
16     <script>
17         var but = document.getElementById("btn").onclick=function () {
18             var input = document.getElementsByTagName("input");
19             for (var i=0;i<input.length;i++){
20                 if(input[i].type!="button"){
21                     input[i].value = "zzzzz";
22                 }
23             }
24         }
25     </script>
26 </body>
27 </html>

　　效果：

　　004 DOM01第6张

7.点谁，谁变化

　　在变化的时候，使用for循环，将其他的还原，当前元素才变化。

　　注意是，使用this，如果使用btns[i]，则在页面加载完成后，点击执行，i=6了。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="没中"><br>
 9     <input type="button" value="没中"><br>
10     <input type="button" value="没中"><br>
11     <input type="button" value="没中"><br>
12     <input type="button" value="没中"><br>
13     <input type="button" value="没中"><br>
14 
15     <script>
16         //获取所有的按钮，然后分别注册事件
17         var btns = document.getElementsByTagName("input");
18         for (var i =0;i<btns.length;i++){
19             //所有的都置为没中
20             btns[i].onclick=function () {
21                 for (var j=0;j<btns.length;j++){
22                     btns[j].value="没中";
23                 }
24                 this.value="中了";
25             }
26             //当前的是中
27         }
28     </script>
29 </body>
30 </html>

　　效果：

　　004 DOM01第7张

8.切换图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         img {
 8             width: 300px;
 9         }
10     </style>
11 </head>
12 <body>
13     <a href="#">
14         <img src="image/00_1.png" alt="" id="img">
15     </a>
16     <script>
17         document.getElementById("img").onclick = function () {
18             this.src = "image/00_2.jpg";
19         }
20     </script>
21 </body>
22 </html>

9.修改div的样式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 </head>
 8 <body>
 9     <input type="button" value="设置样式" id="btn">
10     <div id="di" style="200px;height: 100px;background-color: darkseagreen"></div>
11     <script>
12         var btn=document.getElementById("btn");
13         btn.onclick=function () {
14             var div = document.getElementById("di");
15             div.style.width="400px";
16             div.style.height="300px";
17             div.style.backgroundColor="red";  //在Js中，将会将原来的-去掉，然后驼峰式。
18         }
19     </script>
20 </body>
21 </html>

　　效果：

　　004 DOM01第8张

10.影藏与显示

　　影藏：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 </head>
 8 <body>
 9     <input type="button" value="设置样式" id="btn">
10     <div id="di" style="200px;height: 100px;background-color: darkseagreen"></div>
11     <script>
12         var btn=document.getElementById("btn");
13         btn.onclick=function () {
14             var div = document.getElementById("di");
15             div.style.display="none";
16         }
17     </script>
18 </body>
19 </html>

　　显示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 </head>
 8 <body>
 9     <input type="button" value="影藏" id="btn1">
10     <input type="button" value="显示" id="btn2">
11 
12     <div id="di" style="200px;height: 100px;background-color: darkseagreen"></div>
13     <script>
14         //影藏
15         var btn1=document.getElementById("btn1");
16         btn1.onclick=function () {
17             var div = document.getElementById("di");
18             div.style.display="none";
19         }
20         //显示
21         var btn2=document.getElementById("btn2");
22         btn2.onclick=function () {
23             var div = document.getElementById("di");
24             div.style.display="block";
25         }
26 
27     </script>
28 </body>
29 </html>

　　效果：‘

　　004 DOM01第9张

　　使用一个按钮：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 </head>
 8 <body>
 9     <input type="button" value="影藏" id="btn3">
10     <div id="di" style="200px;height: 100px;background-color: darkseagreen"></div>
11     <script>
12 
13         //一个按钮
14         var btn3=document.getElementById("btn3");
15         btn3.onclick=function () {
16             var div = document.getElementById("di");
17             if(this.value=="影藏"){
18                 div.style.display="none";
19                 this.value="显示"     //使用this
20             }else{
21                 div.style.display="block";
22                 this.value="影藏"
23             }
24         }
25     </script>
26 </body>
27 </html>

　　

11.操作class

　　设置元素的样式，不用class关键字，使用className

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .cc {
 8             width: 300px;
 9             height: 200px;
10             background-color: #ccc;
11         }
12     </style>
13 </head>
14 <body>
15     <input type="button" value="影藏" id="btn3">
16     <div id="di"></div>
17     <script>
18         var btn3=document.getElementById("btn3");
19         btn3.onclick=function () {
20             document.getElementById("di").className="cc";
21         }
22     </script>
23 </body>
24 </html>

标签：#button样式#按钮 | 浏览：122 | 发布日期：

免责声明：文章转载自《004 DOM01》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇看懂Oracle执行计划SSH面试题（struts2+Spring+hibernate）下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

iOS开发UI篇—在ImageView中添加按钮以及Tag的参数说明

一、tag参数 一个视图通常都只有一个父视图，多个子视图，在开发中可以通过使用子视图的tag来取出对应的子视图。方法为Viewwithtag: 提示点：在xib中如果想要通过tag参数获取对应的控件（属性），不要把tag的参数设置为0，因为xib中所有的对象默认tag都为0，设置为0取不到对象。 二、ImageView中添加按钮 （1）ImageView...

画画板--第三方开源--DrawableView

Android上的第三方开源DrawableView支持手写，类似于写字板。DrawableView支持改变画笔颜色，画笔线条粗细，画布的手势缩放和拖曳显示部分区域。并最终支持将手绘的图保存到本地。在github上的项目主页：https://github.com/PaNaVTEC/DrawableView先把布局文件中写一个DrawableView：...

python tkinter 学生信息管理系统

使用tkinter模块，python3.6,主要功能有添加，查询，删除，修改学生信息 使用模版： 1 from tkinter import * 2 import tkinter.font as tkFont 3 import tkinter as tk 4 from tkinter import ttk 最主要也是最难做的是，实现不同功能的界面在同一TK...

vue后台（一）

一，项目准备工作 1.拿到已经是二次开发的代码， npm i , 安装依赖包 ES6模块暴露和导入复习 1. 导出方式一: 默认一次性导出 (只能有一个) export default xxx 本质: 整个模块是一个对象, 对象中有default属性, 即: {default: xxx} 2....

Android学习之五：android一些基本控件

每一个GUI开发工具都会提供一些基本的控件，例如Label和Button 等，下面我们来看下Android的一些基本控件。 Label：就是只用来显示些文本信息，而且不需要编辑的控件，在Android中是使用TextView控件的。我们来看一下在xml文件下面怎么定义该控件，我们来看以下的xml代码： <TextView android:lay...

安卓界面组件单选复选按框

    安卓界面UI为开发者提供了单选复选框，单选框和复选框继承了安卓的普通按钮，所以他们可以直接使用普通按钮的xml基本属性。他们与普通按钮区别在于提供了可以选中的功能，同时二者之间的区别是:单选按钮在按钮组中，当用户点击选择以后，这个按钮组就必须有一个被选中，只能改选，无法撤销（所以单独的一个单选框功能上很尴尬，点击以后状态不能再更改，很僵硬）；复选框...

最新文章

随机推荐

思享工具箱导航