时间戳

首页 > 技术文章 > JavaScript对象学习--dom对象包含轮播图案列，动态表格

JavaScript对象学习--dom对象包含轮播图案列，动态表格

zzdd 2021-03-04 19:21 原文

JavaScript：

  1. ECMAScript：

  2. BOM：

  3. DOM：

    1. 事件

DOM的简单学习

  1. 功能：控制html文档内容

  2. 代码：获取页面标签（元素）对象和Element

    1. document.getElementById("id值")：通过元素id获取元素对象

  3. 操作Element对象

    1. 修改属性值

      1. 明确获取的对象是那个？

      2. 查看api文档，找其中有哪些属性可以设置

    2. 修改标签体内容

      1. 属性，innerhtml

  4. 事件简单学习

    1. 功能：某些组件被执行了某些操作后，触发某些代码的执行。

    2. 如何绑定事件

      1. 直接html标签上，指定事件的属性，属性值就是js代码

        1. 事件：onclick..单击事件

        2. 通过js获取元素对象，指定事件的属性，设置一个函数

小案例：点击实现图片切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="c" src="img/psc2.jpg">
​
    <script>
        /*
            1.获取图片对象
            2.绑定单击事件
            3.每次切换图片
                规则，
                    如果灯是开的on，切换为off
​
         */
        var light = document.getElementById("c");
        var flag = false;//加入表示判断图片是否是psc2
        light.onclick = function () {
            if (flag) {
                light.src = "img/psc3.jpg";
                flag = false;
            }else {
                light.src = "img/psc2.jpg";
                flag = true;
            }
        }
​
    </script>
</body>
</html>

  1. BOM：

    1. 概念：Browser object Model 浏览器对象模型

      1. 将浏览器各个组成部分封装成对象

        Browser 对象

        • [Window] 窗口对象

          • <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>window对象</title>
            ​
            </head>
            <body>
                <input id="openBtn" type="button" value="打开新窗口">
                <input id="closeBtn" type="button" value="关闭新窗口">
                <script>
                    /*
                    window窗口对象
                        1.创建
                        2.方法
                            1.与弹出框有关的方法
                                alert（）  弹出一个警告框
                                confirm（）显示带有一段信息以及确认按钮和取消按钮的对话框
                                    如果用户点击确定返回true，点击取消返回false
                                prompt（） 显示提示用户输入的对话框
                            2.与打开关闭有关的方法
                                close（）关闭浏览器窗口
                                    谁调用我，我关闭谁
                                open（）打开一个新的浏览器窗口
                                    返回新的Window对象
            ​
                            3.与定时器有关的方法
                                setInterval()   按照指定的周期（以毫秒计）来调用函数或计算表达式。
                                setTimeout()    在指定的毫秒数后调用函数或计算表达式。
                                    参数：
                                        1.js代码或者方法对象
                                        2.毫秒值
                                       返回值：唯一标识，用于取消定时器
                                clearInterval() 取消由 setInterval() 设置的 timeout。
            cl                  clearTimeout()  取消由 setTimeout() 方法设置的 timeout。
                        3.属性
                            1.获取其他BOM对象
                                history
                                location
                                Screen
                                document
                        4.特点
                            window对象不需要创建可以直接使用，window使用window.方法名
                            window引用可以省略，方法名（）
                     */
                    //alert("hello window");
                    //window.alert("111");
                    //var flag =  confirm("确定要退出");
                    //alert(flag);
            ​
                   /* var newWindow;
                    var openBtn = document.getElementById("openBtn");
                    openBtn.onclick = function () {
                        //打开一个新窗口
                       newWindow = open("http://www.baidu.com");
                    }
                    var closeBtn = document.getElementById("closeBtn");
                    closeBtn.onclick = function () {
                        //关闭一个新窗口
                        newWindow.close();
                    }*/
            ​
            ​
                   //一次性定时器
                    //var id =setTimeout("f1();",2000);
                    clearTimeout(id);
                            function f1() {
                                alert('boom');
                            }
            ​
                    //循环定时器
                     var id = setInterval(f1,2000);
            ​
                </script>
            </body>
            </html>

        轮播图案例

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>轮播图</title>
        ​
        </head>
        <body>
        <img id="img" src="img/psc2.jpg" width="100%" height="100%">
        <script>
            /*
                分析：
                        1.在页面上使用img标签
                        2.定义一个方法修改图片的连接
                        3.定义定时器，每隔一段时间换一张图片
        ​
             */
            //修改图片src
            var num = 1;
            function change() {
                num++;
                if(num>3){
                    num = 1;
                }
                var img1 =  document.getElementById("img");
                img1.src = "img/psc"+num+".jpg";
            }
            //2.定义定时器
            setInterval(change,3000);
        ​
        ​
        ​
        </script>
        </body>
        </html>

        • [Navigator] 浏览器对象

        • [Screen]显示器对象

        • [History]历史记录对象

          • 创建（获取）：

            • window.history

            • history

          • 方法

            • back（）加载history列表中的前一个url

            • forward（）加载history列表中的下一个url

            • go（）加载history列表中的某个具体页面

              • 正数，前进几个历史记录

              • 负数，后退几个历史记录

          • 属性

            • length 返回当前窗口的历史列表中的url数量

        • [Location]地址栏对象

          • 创建

            • window.location

            • location

          • 方法

            • reload（）重新加载当前文档，刷新

          • 属性

            • href 设置或返回完整URL

      2. DOM对象

        1. 概念：document object Model 文档对象模型

          1. 将标记语言文档的各个组成部分，封装成对象，可以使用这些对象，对标记语言

    2. W3C DOM标准被分为3个不同的部分

      1. 核心DOM- 针对任何结构化文档的标准模型

        1. Document：文档对象

        2. Element：元素对象

        3. Attribute：属性对象

        4. Text：文本对象

        5. Comment：注释对象

        6. node节点对象，其他5个的父对象

      2. XML DOM --针对XML文档的标准模型

      3. HTML DOM --针对HTML文档的标准模型

    3. 核心DOM模型

      1. Document:文档对象

        1. 创建（获取）:再html dom 墨香中可以使用window对象获取

          1. window.document

          2. document获取

        2. 方法

          1. 获取Element对象

            1. getElementById（）：通过id属性获取对象

            2. getElementByTagName();根据元素名称获取元素对象们，返回值师叔祖

            3. getElementsByClassName（）；根据class的属性值获取元素对象们，返回值是数组

            4. getElementByName（）；根据名字获取元素对象

        3. 属性

      2. Element：元素对象

        1. 获取，通过Document来获取和创建

        2. 方法：

          1. removeAttribute（）

          2. setAttribute（）

        3. 案列

          1. <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Title</title>
            </head>
            <body>
            <a> 点我</a>
            <input type="button" value="设置属性" id="btn_set">
            ​
            <script>
            ​
                var btn = document.getElementById("btn_set");
                btn.onclick = function () {
                    //1.获取a标签
                    var a = document.getElementsByTagName("a")[0];
                    a.setAttribute("href","https://www.baidu.com");
                }
            </script>
            </body>
            </html>

      3. Node：节点对象，其他5个的父对象

        1. 特点：所有DOM对象都可以被认为是节点

        2. 方法：appendChild（）向节点的子节点列表的结尾添加新的子节点

          removeChild（）删除（并返回）当前节点的指定子节点

          replaceChild（）用新接地但替换一个子节点

        3. 属性：

          1. parentNode 返回父亲节点

    4. HTML DOM

      1. 如何获取html标签的属性和方法

      2. 标签体的设置和获取

        1. innerHTML

        2. 使用html元素对象的属性

        3. ​
          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>动态表格</title>
          ​
              <style>
                  table{
                      border: 1px solid;
                      margin: auto;
                      width: 500px;
                  }
          ​
                  td,th{
                      text-align: center;
                      border: 1px solid;
                  }
                  div{
                      text-align: center;
                      margin: 50px;
                  }
              </style>
          ​
          </head>
          <body>
          ​
          <div>
              <input type="text" id="id" placeholder="请输入编号">
              <input type="text" id="name"  placeholder="请输入姓名">
              <input type="text" id="gender"  placeholder="请输入性别">
              <input type="button" value="添加" id="btn_add">
          ​
          </div>
          ​
          ​
          <table>
              <caption>学生信息表</caption>
              <tr>
                  <th>编号</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>操作</th>
              </tr>
          ​
              <tr>
                  <td>1</td>
                  <td>令狐冲</td>
                  <td>男</td>
                  <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
              </tr>
          ​
              <tr>
                  <td>2</td>
                  <td>任我行</td>
                  <td>男</td>
                  <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
              </tr>
          ​
              <tr>
                  <td>3</td>
                  <td>岳不群</td>
                  <td>?</td>
                  <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
              </tr>
          ​
          ​
          </table>
          ​
          ​
          <script>
          ​
              /*
                  1.添加
                      1.给添加按钮绑定单击事件
                      2.获取文本框的内容
                      3.创建td。这只td得文本为文本框的内容
                      4.创建tr
                      5.将td添加到tr中
                      6.获取table，将tr天年到table中
          ​
                 2.删除
                      1.确定点击的是哪个超链接
                       <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
                      2.removeChild(),通过父节点删除子节点
          ​
               */
                 /* document.getElementById("btn_add").onclick = function () {
                    var id = document.getElementById("id").value;
                    var name = document.getElementById("name").value;
                    var gender = document.getElementById("gender").value;
          ​
                    //创建td，赋值td的标签体
                      //id的td
                      var td_id = document.createElement("td");
                      var text_id = document.createTextNode(id);
                      td_id.appendChild(text_id);
                      var td_name = document.createElement("td");
                      var text_name = document.createTextNode(name);
                      td_name.appendChild(text_name);
                      var td_gender = document.createElement("td");
                      var text_gender = document.createTextNode(gender);
                      td_gender.appendChild(text_gender);
                      //创建a标签的td
                      var td_a = document.createElement("td");
                      var element_a = document.createElement("a");
                      element_a.setAttribute("onclick","delTr(this);");
                      element_a.setAttribute("href","javascript:void(0);");
                      var text_a = document.createTextNode("删除");
                      element_a.appendChild(text_a);
                      td_a.appendChild(element_a);
                      //创建tr
                      var tr = document.createElement("tr");
                      //添加td到tr中
                      tr.appendChild(td_id);
                      tr.appendChild(td_name);
                      tr.appendChild(td_gender);
                      tr.appendChild(td_a);
                      //获取table
                      var table = document.getElementsByTagName("table")[0];
                      table.appendChild(tr);
                  }*/
          ​
                 //使用innerHtml来添加
              document.getElementById("btn_add").onclick =function () {
                  var id = document.getElementById("id").value;
                  var name = document.getElementById("name").value;
                  var gender = document.getElementById("gender").value;
                  //获取table
                  var table = document.getElementsByTagName("table")[0];
                  //追加一行
                  table.innerHTML += " <tr>\n" +
                      "        <td>"+id+"</td>\n" +
                      "        <td>"+name+"</td>\n" +
                      "        <td>"+gender+"</td>\n" +
                      "        <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n" +
                      "    </tr>";
          ​
              }
          ​
          ​
                  function delTr(obj) {
                     var table = obj.parentNode.parentNode.parentNode;
                     var tr = obj.parentNode.parentNode;
          ​
                     table.removeChild(tr);
                  }
          ​
          ​
          ​
          ​
          </script>
          ​
          </body>
          </html>

           

        4. 控制样式

          1. 使用元素的style属性来使用。

          2. 提前定义好样式，使用class来定义样式

    5. <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <style>
              .d1{
                  border: 1px solid black;
              }
              .d2{
                  border:1px solid blanchedalmond;
              }
          </style>
      </head>
      <body>
      <div id="div1">
          div
      </div>
      ​
      <div id="div2">
          div
      </div>
      <script>
          var div1 = document.getElementById("div1");
          div1.onclick = function(){
              //修改样式方式一
              div1.style.border = "1px solid red";
              div1.style.height="50px";
              //font size-->fontsize
              div1.style.fontSize="20px";
          }
      ​
          var div2 = document.getElementById("div1");
          div2.onclick = function(){
              //修改样式方式2
          div2.className = "d1";
          }
      ​
      </script>
      </body>
      </html>

       

    6.  

推荐阅读