zoukankan      html  css  js  c++  java

  • 004 DOM01

    一：说明

    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>

    　　效果：

    　　

    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>

    　　效果：

    　　

    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>

    　　效果：

    　　

    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>

    　　效果：

    　　

    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>

    　　效果：

    　　

    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>

    　　效果：

    　　

    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>

    　　效果：

    　　

    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>

    　　效果：

    　　

    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>

    　　效果：‘

    　　

    　　使用一个按钮：

     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>
  • 相关阅读:
    ASP.NET获取服务器信息
    检测到有潜在危险的 Request.Form 值错误解决办法
    修改sql server数据库逻辑文件名的语句
    遍历类的所有属性和根据属性名动态设置属性值
    JS三种编解码方式
    获取QQ群用户列表
    关于字符串类型相关的问题总结
    学习C++之父的最新姐妹作笔记1
    【转】 Uniode TO ANSI 转换函数封装
    添加工具栏图标按钮（转）
  • 原文地址：https://www.cnblogs.com/juncaoit/p/11218665.html
Copyright © 2011-2022 走看看