• 12-3 DOM操作


    一 DOM基础

    1 DOM介绍

    DOM:文档对象模型。DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

    DOM就是由节点组成的。

    2 DOM树

    上图可知,在HTML当中,一切都是节点:(非常重要)

    • 元素节点:HMTL标签。

    • 文本节点:标签中的文字(比如标签之间的空格、换行)

    • 属性节点::标签的属性。

    整个html文档就是一个文档节点。所有的节点都是Object。

    3  DOM节点的获取

    1 var div1 = document.getElementById("box1");      //方式一:通过id获取单个标签
    2 
    3     var arr1 = document.getElementsByTagName("div1");     //方式二:通过 标签名 获得 标签数组,所以有s
    4 
    5     var arr2 = document.getElementsByClassName("hehe");  //方式三:通过 类名 获得 标签数组,所以有s

    4 (获取,更改,删除,节点属性)

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>DOM基础</title>
     6 </head>
     7 <body>
     8 <img src="./1.jpg" alt="a" id="a1" title="手机图片" class="image">
     9 <script type="text/javascript">
    10     //获取节点属性值
    11     var myNode = document.getElementsByTagName("img")[0];
    12 
    13     // console.log(myNode.src);
    14     // console.log(myNode.className);    //注意,是className,不是class
    15     // console.log(myNode.title);
    16     //
    17     // console.log("-----第一种方式-------");
    18     //
    19     // console.log(myNode["src"]);
    20     // console.log(myNode["className"]); //注意,是className,不是class
    21     // console.log(myNode["title"]);
    22     // console.log('--------------------第二种方式-----------');
    23     // console.log(myNode.getAttribute("src"));
    24     // console.log(myNode.getAttribute("class"));   //注意是class,不是className
    25     // console.log(myNode.getAttribute("title"));
    26     //设置节点属性值
    27     // console.log("-----第一种方式-------");
    28     // myNode.src='./2.jpg';
    29     // myNode.className='image2';
    30     console.log('--------------------第二种方式------');
    31      myNode.setAttribute("src","./3.jpg");
    32     myNode.setAttribute("class","image3-box");
    33     myNode.setAttribute("id","你好");
    34     //删除节点的属性
    35     myNode.removeAttribute('class');
    36     myNode.removeAttribute('id');
    37 </script>
    38 </body>
    39 </html>
    View Code

    5 (创建 添加节点属性)

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>DOM操作</title>
     6 </head>
     7 <body>
     8 <div id="box">
     9     <p id="p1">1113</p>
    10 
    11 
    12 </div>
    13 <button id="btn">
    14     添加元素
    15 </button>
    16 <script>
    17     //获取文档
    18     console.log(document);
    19     //获取的html对象
    20     console.dir(document.documentElement);
    21     console.dir(document.getElementsByTagName('html')[0]);
    22     //获取body
    23     console.log(document.body);
    24     var oBtn=document.getElementById('btn');
    25     var oBox=document.getElementById('box');
    26     var op1=document.getElementById('p1');
    27     oBtn.onclick=function () {
    28         var op=document.createElement('p');//创建标签
    29         // // op.innerText=123;//添加文本
    30         op.innerHTML='<a href="#">123</a>';//添加标签
    31         // oBox.appendChild(op);//追加孩子节点
    32 
    33         op.style.color='red';
    34         console.log(op.parentNode);//获取p标签的父节点是div
    35         console.log(op.children[0]);//获取p标签的子节点是  a
    36         console.log(oBox.nextElementSibling.innerHTML);//火狐、谷歌、IE9+版本:都指的是下一个元素节点(标签),就是div下面的button标签
    37         oBox.insertBefore(op,op1);//在参考标签之前添加一个标签,op1是参考标签,op是要添加的标签
    38 
    39 
    40 
    41     }
    42 
    43 
    44 </script>
    45 
    46 </body>
    47 </html>
    View Code

    二 DOM事件操作

    1 实例:效果是点击浏览器上面的盒子,弹出内容

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         #box1{
     8              200px;
     9             height: 200px;
    10             background-color: red;
    11         }
    12     </style>
    13 </head>
    14 <body>
    15 <div id="box1"></div>
    16 
    17 <script type="text/javascript">
    18     // 1、获取事件源
    19     var div = document.getElementById("box1");
    20     // 2、绑定事件
    21     div.onclick = function () {
    22         // 3、书写事件驱动程序
    23         alert("我是弹出的内容");
    24     }
    25 </script>
    26 
    27 </body>
    28 </html>
    View Code

    常见事件如下

    2  利用DOM去更改一些属性设置盒子切换的大小和颜色

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>DOM事件</title>
     6     <style>
     7         .box1{
     8              200px;
     9             height: 200px;
    10             background-color: red;
    11         }
    12         /*.active{*/
    13             /*background-color: yellow;*/
    14         /*}*/
    15 
    16     </style>
    17     <script>
    18         //js入口函数,当文档和图片都加载完成之后,入口函数才调用叫window
    19         window.onload=function() {
    20             console.log(111);
    21             var oDiv=document.getElementById('box');//获取id
    22             console.dir(oDiv);
    23             console.log(oDiv.id);
    24             console.log(oDiv.className);
    25             // 第一种写法
    26             var isRed=true;
    27             oDiv.onclick=function () { //添加一个点击事件
    28                 if (isRed){
    29                       oDiv.style.backgroundColor='black';
    30                       oDiv.style.width='300px';
    31                       isRed=false
    32                 }else{
    33                     oDiv.style.backgroundColor='red';
    34                     oDiv.style.width='200px';
    35                     isRed=true;
    36                 }
    37                
    38 
    39             };
    40 
    41         };
    42     </script>
    43 </head>
    44 <body>
    45     <div id="box" class="box1 active">
    46     </div>
    47 
    48 </body>
    49 </html>
    View Code

    3  利用dom去操作图片的不断切换

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>DOM事件</title>
     6     <style>
     7 
     8 
     9     </style>
    10     <script>
    11 
    12         // -------------第二种例子,图片切换--------------------------------
    13         window.onload=function (ev) {
    14                 var oimg=document.getElementsByTagName('img')[0];//获取第一个img标签
    15                 console.log(oimg);
    16                 var obtn=document.getElementsByClassName('btn')[0];//获取第一个btn类名
    17                 obtn.style.width='100px';//可以单独设置btn按钮的样式
    18                 obtn.style.height='100px';
    19                 var tu=true;//设置添加为true
    20                 obtn.onclick=function(){
    21 
    22                     if (tu){
    23                          oimg.src='./1.jpg';//第一次默认是1图片
    24                          console.log(oimg.id);//获取img的id,相当于get
    25                          oimg.id='lv';//相当于set
    26                          tu=false
    27 
    28                     }else{
    29                         oimg.src='./2.jpg';
    30                         tu=true
    31                     }
    32 
    33 
    34             }
    35 
    36         }
    37 
    38     </script>
    39 </head>
    40 <body>
    41     <div id="box" class="box1 active">
    42     </div>
    43     <img src="./2.jpg" alt="手机" title="小米" id="one">
    44     <!--<img src="./3.jpg" alt="手机" title="小米" id="two">-->
    45     <button class="btn">切换</button>
    46 </body>
    47 </html>
    View Code
  • 相关阅读:
    Linux的命令2
    运维书
    管理MariaDB
    MariaDB基础命令
    Linux创建桥接网络
    聚合网络
    kickstart
    VLAN原理
    进程优先和ACL
    计划任务at、crontab
  • 原文地址:https://www.cnblogs.com/huningfei/p/9295176.html
Copyright © 2020-2023  润新知