JS DOM的使用

VIP文章咩Kakao

已于 2022-11-23 23:37:45 修改

阅读量437

点赞数

分类专栏： Javascript 文章标签： javascript 前端

于 2022-11-23 21:48:42 首次发布

本文链接：https://blog.csdn.net/weixin_52142992/article/details/128008585

版权

DOM

(1). 了解DOM

DOM: 文档对象模型(Document Object Model，简称DOM).
作用: 主要用来操作页面上的元素, 对页面元素的内容, 属性和样式进行操作.

(2).DOM的节点操作

获取DOM节点对象
- 使用原生js获取dom节点对象
  
  常用:
  - document.querySelector(); //(id,class,元素皆可)选择器(只返回匹配的第一个元素)
  - document.querySelectorAll(); //(id,class,元素皆可)元素选择器(只返回匹配的第一个元素集合)
  - document.getElementById(); //id选择器
  - document.getElementClassName(); //类选择器

     <body>
         <div id="app">appppppppppppp</div>  
         
         <script>
             var _app = document.querySelector('#app');
             console.log('_app',_app);
             var _app1 = document.getElementById('app');
             console.log('_app1',_app1);
         </script>
     </body>

使用jquery获取dom节点对象

     <body>
     
         <div id="app">appppppppppppp</div>  
         <div class="box">boxxxxxxxxxx</div>
         <ul class="" id="list">
             <li class="item">1xxxx</li>
             <li class="item">2xxxx</li>
             <li class="item">3xxxx</li>
             <li class="item">4xxxx</li>
             <li class="item">5xxxx</li>
         </ul>
     
         <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
         <script> 
                 // 获取#app节点对象 
                 var $app = $('#app');
                 console.log('$app',app);
     
                 // 获取.box节点对象
                 var $box = $('.box');
                 console.log('$box',$box);
     
                 // 获取所有#list下的li节点对象
                 var $lis = $('#list .item');
                 console.log('$lis',$lis);       
         </script>
     </body>

原生js dom节点对象和jquery对象相互转换

     <body>
         <div id="app">appppppppppppp</div>  
         <div class="box">boxxxxxxxxxx</div>
     
         <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
         <script>
             //原生获取app节点
             var _app = document.querySelector('#app');
             console.log('_app',_app);
             //jq获取box节点
             var $box = $('.box');
             console.log('$box',$box);
     
             //原生转jq
             var $app = $(_app);
             console.log('$app',$app);
             //jq转原生
             var _box = $box[0];
             console.log('_box',_box);
         </script>
     </body>

jquery对象的一些其他方法
- 获取元素的兄弟节点
- 获取元素的父节点
- 获取元素在兄弟元素中的排列位置
- 查找元素后代某个节点

     <body>
         <ul>
             <li>1.xxx</li>
             <li>2.xxx</li>
             <li>3.xxx</li>
             <li>4.xxx</li>
             <li>5.xxx</li>
         </ul>
     
         <div class="aa">
             <div class="bb">
                 <div class="cc">
                     <div class="dd">
                         <span class="eee"></span>
                         <span class="fff"></span>
                     </div>
                 </div>
             </div>
         </div>
     
         <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
         <script>
             //获取第一个li的jq对象
             var $first = $('ul li:first-child');
     
             //获取$first的兄弟节点们
             var $sibings = $first.siblings();
     
             //获取父节点
             var $parent = $first.parent();
     
             //dd元素
             var $dd = $('.dd');
             var $parent = $dd.parents();    //所有长辈
             var $parent = $dd.parents('div');   //所有div长辈
     
             //离dd最近的长辈,里面没有元素时，它本身就是最近的一个祖元素
             var $aaa = $dd.closest('div');
             console.log('最近一个祖元素:',$aaa);//dd
             //而有元素的时候，里面的元素就能获取它最近的一个祖元素
             var $eee = $('.eee').closest('div');
             console.log('最近一个祖元素:',$eee);
     
             //获取$first的下标
             var index = $first.index();
     
             //获取第三个li元素的下标
             var $third = $('ul li:nth-child(3)').index();
             console.log('$third',$third);
     
         </script>
     </body>

获取和修改dom节点的内容
- 原生js获取和修改dom节点内容

     <body>
         <span>hello Web</span>
         <div class="box">
             <span>xxxxxxxx</span>
         </div>
         <script>
             var _text = document.querySelector('span').innerText;
             console.log(_text);
             var _span = document.querySelector('.box').innerHTML;
             console.log(_span);
         </script>
     </body>

jquery获取和修改节点内容
- text //获取文本内容
- html //获取文本和标签
- val //获取值(用于输入框)

     <body>
         <div class="box">
             <button>aaa</button>
         </div> 
         <input type="text" value="1380000000000">
     
         <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
         <script>
             // 获取.box的jq对象, 命名为$box
             var $box = $('.box');
             console.log('$box',$box);
           
             // 获取$box的文本 
             var $boxText = $box.text();
             console.log('$boxText',$boxText); 
     
             // 获取$box的内容(包含文本和标签)
             var $boxHtml = $box.html();
             console.log('$boxHtml',$boxHtml);
            
             // 获取输入框的jq对象
             var $input = $('input');
             console.log('$input',$input);
           
             // 获取输入框的值
             var $inputVal = $input.val();
             console.log('$inputVal',$inputVal);
     
             // 修改输入框的值为'我爱codeing'
             $input.val('我爱codeing');
     
             // 修改内容: 找到并修改button的内容为'立即登录'
             $box.find('button').text('立即登录');
             // var $button = $('button').text('立即登录');
     
             // 把$box的内容变成一个列表(多个li)
             $box.html(`
             <li>xxxxxxxx</li>
             <li>xxxxxxxx</li>
             <li>xxxxxxxx</li>
             <li>xxxxxxxx</li>
             <li>xxxxxxxx</li>
             `);
             
         </script>
     </body>

获取和修改dom节点的属性
- 原生js获取和修改dom节点的属性

     <body>
         <a href="http://baidu.com">百度</a>
         
             <script>
                 // 获取a标签节点对象
                 var _a = document.querySelector('a');