JavaScript 11.03

JavaScript 第七天 DOM操作

1.1 什么是DOM 操作


文档Document对象Object模型Model  
​
通过js中的内置对象document对网页的内容进行增删改查。
​
增：类似与 发表说说

1.2 增


A  传统方式
<input id="bar" /><button onclick="haha()">发表</button>
        <p id="foo">
            您还没有说说。
        </p>
        <script type="text/javascript">
            function haha(){
                //1. 动态创建
                var a= document.createElement("h1");
                //2. 优化
                a.innerHTML = bar.value;
                //3. 动态添加
                foo.appendChild(a);
            }
        </script>
B 模板方式 
   将我们要动态生成的内容提前写好 ， 当我们需要发布的时候 ， 我们直接将 模板动态放到页面中
   
   <style type="text/css">
    #aaa {
        border: 2px solid red;
        padding: 10px;
    }
   </style>
​
    </head>
    <body>
        
​
         <input  id="bar" /><button onclick="haha()">发表</button>
         <p  id="foo"> </p>
         
         <script type="text/template"  id="temp">
               <div id="aaa">
                  <img src="img/pie_0.jpg"  width="50" alt="">
                            <span>张三</span> 
                            <span>发布于:XXXX</span>
                            <h6>
                                YYYY
                            </h6>
                            <button>点赞</button>
                            <button>转发</button>
                            <button>评论</button>
                            <button>举报</button>
               </div>
         </script>
         
         <script type="text/javascript">
            
            function haha(){
                  foo.innerHTML   +=  temp.innerHTML.replace( "XXXX" , new Date()  ).replace( "YYYY"  , bar.value );
            }
            
         </script>
        
​
    </body>
​
​

1.3 删


<div   id="ad"  style="width: 200px;height: 200px; padding: 10px; border: 2px solid red;">
        我是小广告
        <button  onclick="hehe()">关闭</button>
    </div>
    
    <script type="text/javascript">
        
        function hehe(){
            ad.remove();
        }
        
    </script>

1.4 查


通过document对象获取页面内容
​
1 为什么要查询?
function hehe(){
    ad.remove();
}        
在js代码中 我们要对页面的标签进行操作，首先要获取页面标签 这就是查询操作
​
2 具体操作
​
<body>
        
    
    
         <div id="foo">
             <div          class="haha">123</div>
             <div id="bar" class="haha">
                 <span>1</span>
                 <span>2</span>
                 <span>3</span>
             </div>
             <div           class="haha">456</div>
         </div>
    
        <script type="text/javascript">
            
            // 1 根据id获取页面标签 但是我们通过id获取页面标签 一般是直接使用（id不能是关键字）
            var  a1 = document.getElementById("bar");
            
            // 2 通过class类名获取页面标签 HTMLCollection { 0: div.haha, 1: div#bar.haha, 2: div.haha, length: 3, … }  
            //   将获取的内容存储到一个集合中 并且返回  如果需要继续操作则可以根据索引编号获取
            var  a2 = document.getElementsByClassName("haha");
            
            // 3 通过标签名获取页面元素 HTMLCollection { 0: span, 1: span, 2: span, length: 3 }
            var  a3 = document.getElementsByTagName("span");
            console.log( a3 );
            
            // 4 通过选择器获取页面符合条件的第一个元素
            var a4 = document.querySelector(".haha");
            // 5 通过选择器获取页面符合条件的所有元素
            var a5 = document.querySelectorAll("div");
            
             var  b1 = bar.firstElementChild;
              var  b2 = bar.lastElementChild;
              var  b3 = bar.children;
              
              var  b4 = bar.nextElementSibling;
              var  b5 = bar.previousElementSibling;
              
              var  b6 =  bar.parentElement;
              
              var  b7 =  bar.parentElement.parentElement;
              console.log(b7)
            
        </script>

1.5 选项卡练习


<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            
            .s {
                background-color: red;
                color: green;
            }
            
        </style>
    </head>
    <body>
        
           <button  class="s"  >淘宝</button>
           <button>店铺</button>
           <button>宝贝</button>
           
           <script type="text/javascript">
                var  arr =  document.querySelectorAll( "button" );
                
                for( var i=0;i<arr.length;i++){
                   var  btn = arr[i];
                   btn.onclick = function(){
                        document.querySelector(".s").className = "";
                        /* this 指代当前事件的触发对象 哪个按钮让这个函数执行了 this就指谁*/
                        this.className = "s";
                   }
               }
           </script>
        
    </body>

1.6 购物车练习


<body>
        
         <div>
            商品名称:  <input id="n1">
            商品价格:  <input id="n2"> 
            <button  id="tjsp">添加商品</button>
            <button  onclick="fan()">反选</button>
            <button  onclick="shan()">删除</button>
         </div>
         <table id="bg" class="table  table-border ">
             <tr>
                 <th> <input type="checkbox"  id="qx" onchange="haha()"> </th>
                 <th> 商品名称 </th>
                 <th> 商品价格 </th>
                 <th> 下单日期 </th>
             </tr>
         </table>
        
        <script type="text/template" id="temp">
            <tr>
                             <td><input type="checkbox" class="foo"></td>
                             <td>XXXX</td>
                             <td>YYYY</td>
                             <td>ZZZZ</td>
            </tr>
        </script>
        
        <script type="text/javascript">
            function shan(){
                if(  confirm("确定删除码？") ){
                    var arr =  document.querySelectorAll(".foo");
                    for(var i=0;i<arr.length;i++){
                        if(arr[i].checked == true)  arr[i].parentElement.parentElement.remove();
                    }
                }
            }
            function fan(){
                var arr =  document.querySelectorAll(".foo");
                for(var i=0;i<arr.length;i++){
                    arr[i].checked = !arr[i].checked;
                }
            }
        
             function haha(){
                var arr =  document.querySelectorAll(".foo");
                for(var i=0;i<arr.length;i++){
                    arr[i].checked = qx.checked;
                }
             }
        
            tjsp.onclick = function(){
                
                bg.firstElementChild.innerHTML  +=  temp.innerHTML.replace("XXXX", n1.value).replace("YYYY",n2.value).replace("ZZZZ", new Date());
            }
            
        </script>
       
</body>

 

posted @ 2021-11-03 09:57  吴光熠  阅读(36)  评论(0)    收藏  举报