jQuery和原生js获取DOM节点

jQuery地址

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

一、获取节点

1. js获取节点

document.querySeletor(); 获取一个
document.querySeletorAll(); 获取多个
document.getElementById();
document.getElementsByClassName();

<body>
    <div id="app">appppppppppppp</div> 
    <div class="box">appppppppppppp</div> 
    <script>
       var _app = document.getElementById('app');
       var _app = document.getElementsByClassName('box');
       var _app = document.querySelector('.box');
       var _app = document.querySelector('#app');
    </script>
</body>

2.jQ获取节点

<body>
    <div id="aa">appppppppppppp</div> 
    <div class="bb">boxxxxxxxxx</div>
 
    <ul class="list">
        <li class="item">1xxxx</li>
        <li class="item">2xxxx</li>
        <li class="item">3xxxx</li>
    </ul>

     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script>
        // 获取第一个div对象
        var $aa = $('#aa');
        // 获取第二个div对象
        var $bb = $('.bb');

      // 获取所有li节点
        var $list = $('.list .item');

    </script>
</body>

二、原生js dom节点对象和jquery节点对象互转

只有jquery对象才可以使用jquery提供的方法, 所以有些时候需要将原生js dom对象转成jquery dom对象
原生转jq: $(原生dom节点对象);
jq转原生 jq对象[0];

<body>
    <div id="aa">appppppppppppp</div> 
    <div class="bb">boxxxxxxxxx</div>

     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script>
        //js转jQ
        var $aa = $('#aa');
        var _aa = $aa[0];
        //jQ转js
        var _bb = document.querySelector('.bb');
        var $bb = $(_bb);
    </script>
</body>

三、 jquery对象获取元素节点

$('ul li:first-child')获取第一个li元素节点
siblings()获取元素的所有兄弟节点
parent()获取元素的父节点
parents()获取元素的所有长辈节点
closest('xx')获取元素最近的某个长辈节点
index() 获取元素的下标
find('xx')查找元素的某个后代节点

 <body>
  <ul>
    <li>1.xxx</li>
    <li>2.xxx</li>
    <li class="item">3.xxx</li>
    <li>4.xxx</li>
    <li>5.xxx</li>
  </ul>

  <div class="cc xx">
    <div class="aa">
      <div class="bb">
        <div class="cc yy">
          <div class="dd">dd</div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    // 获取第一个li的jq对象, 命名为$first
    var $first = $('ul li:first-child');
    console.log('$first', $first);

    // 获取$first的所有兄弟节点
    var $siblings = $first.siblings();
    console.log('$siblings', $siblings);

    // 获取$first的某个兄弟节点
    var $siblings = $first.siblings('.item');
    console.log('$siblings', $siblings);

    // 获取$first的父节点
    var $parent = $first.parent();
    console.log('$parent', $parent);

    // dd元素
    var $dd = $('.dd');
    var $parents = $dd.parents(); // 所有长辈
    var $parents = $dd.parents('div'); // 所有div长辈
    console.log('$parents', $parents);

    var $aaa = $dd.closest('.cc'); // 离$dd最近的.cc长辈
    console.log('$aaa', $aaa);


    // 获取$first的下标
    var index = $first.index();
    console.log('index', index); 

    // 获取第三个li元素的下标
    var $second = $('ul li:nth-child(3)');
    console.log($second.index());
  </script>
</body>

四、获取和修改dom节点的内容

1.原生js获取和修改内容

innerText 获取文本内容
innerHtml 获取全部内容（包括文本和标签）
value 获取输入框内容
document.querySelector('input').value = '11' 修改内容

<body>
    <div class="box">
        <button>aaa</button>
    </div> 
    <div class="box2">
        qqqqqq
    </div>
    <input type="text" value="1380000000000">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        //获取box标签
        var _box = document.querySelector('.box');
        console.log(_box);

        //获取box里面的文本
        var _boxText = _box.innerText;
        console.log(_boxText);

        //修改box2内容
        document.querySelector('.box2').innerText = 'aaaaa';

        //获取box里面的元素（包含标签和文本)
        var _boxHtml= _box.innerHTML;
        console.log(_boxHtml);

        //获取输入框的内容
        var a = document.querySelector('input').value;
        console.log(a);

        //修改输入框的内容
        document.querySelector('input').value = '11111111111111';
    </script>
</body>

2.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');
      
        // 获取$box的文本  
        var text = $box.text();
        console.log('text',text);
      
        // 获取$box的内容(包含文本和标签)  
        var htmlText = $box.html();
        console.log('htmlText',htmlText);
       
        // 获取输入框的jq对象
        var $input = $('input');
      
        // 获取输入框的值
        var value = $input.val();
        console.log('输入框的值',value);
      
        // 修改输入框的值为'我爱codeing'
        $input.val('我爱codeing');

        // 修改内容: 找到并修改button的内容为'立即登录'
        $box.find('button').text('立即登录');

        // 把$box的内容变成一个列表(多个li)
        $box.html(`
          <li>xxxxxx</li>
          <li>xxxxxx</li>
          <li>xxxxxx</li>
          <li>xxxxxx</li>
          <li>xxxxxx</li>
        `); 
    </script>
</body>

五、获取和修改dom节点的属性

1.原生js获取和修改节点属性

<body>
    <a href="http://baidu.com">百度</a>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 获取a标签节点对象
        var _a = document.querySelector('a');
        // 获取a标签的属性href方法1
        var href1 = _a.href;
        // 获取a标签的属性href方法2
        var href2 = _a.getAttribute('href');
        console.log('href2', href2);
        // 修改a标签的href属性为'http://sina.com' (两种方法)
        _a.href = 'https://www.jianshu.com/'; // 方法1
        _a.setAttribute('href','https://www.jianshu.com/');
    </script>
</body>

2.jQuery获取和修改节点属性

<body> 
    <a href="http://baidu.com">百度</a>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 获取a标签的jq对象
        var $a = $('a');
        // 获取a标签的属性href
         var href = $a.attr('href');
         console.log('href', href);
        // 修改a标签的属性href和文本
        $a.attr('href','https://www.jianshu.com/');
        $a.text('简书');
    </script>
</body>

六、获取和修改dom节点样式

1.原生js获取和修改节点样式

_box.style.color 获取样式的颜色(行内样式)
window.getComputedStyle 获取样式的颜色(非行内样式)

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            color: red;
            font-size: 20px;
        }
    </style>
</head> 
<body>
    <div class="box">
        boxxxxxxxxxxxxxxxxxxx
    </div>
    <script>
         var _box = document.querySelector(".box");
         // 只能获取内联样式
         var fontSize = _box.style.fontSize; // 获取不到
         console.log('fontSize1',fontSize);
         //元素.style.样式名称操作行内样式,非行内样式需要使用window.getComputedStyle来操作
         var _boxStyle = window.getComputedStyle(_box); 
         var fontSize2 = _boxStyle.fontSize;
         console.log('fontSize2',fontSize2);
    </script>
</body> 
</html>

2. jQuery获取和修改节点样式

css('fontSize') 获取节点样式
css('fontSize','25px') 修改节点样式
show() 显示
hide() 隐藏
addClass()增加类
removeClass()去除类
toggleClass()没有添加类的元素添加类

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            color: red;
            font-size: 20px;
        }
        .red {
            color: red;
        }
        .bred {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        boxxxxxxxxxxxxxxxxxxx
    </div>
    <hr>
    <h3 class="box2">隐藏</h3>
    <hr>
    <div class="text-box">
        <p>我爱codeing</p>
        <p>我爱codeing</p>
        <p>我爱codeing</p>
        <p>我爱codeing</p>
    </div>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 获取.box的jq对象
        var $box = $('.box');
        // 获取颜色和字体
        var color = $box.css('color');
        var fontSize = $box.css('font-size');
        console.log('color', color);
        console.log('fontSize', fontSize);
        // 修改背景样式
        $box.css('background-color', 'gray');
        // 链式调用
        $box.css('border', '1px solid red').css('font-size', '30px').css('color', '#fff');

        // 添加事件, 实现text-box的显示和隐藏
        // 显示时, 给.box标签添加类red, 隐藏时移除类red
        // 显示时, 给hr标签添加类bred, 隐藏时移除类bred
        $('.box2').on('click', function () {
            // .box使用toggleClass
            $('.box2').toggleClass('red');
            var display = $('.text-box').css('display');
            if (display === 'block') {
                //隐藏状态
                $('.text-box').hide();
                $('.box2').text('显示');
                //不使用toggleClass,使用这个也可以
                // $('.box').removeClass('red');
            } else {
                // 显示的状态
                $('.text-box').show();
                $('.box2').text('隐藏');
                //不使用toggleClass,使用这个也可以
                // $('.box').addClass('red');
            }
        })
    </script>
</body>
</html>

七、增加和删除节点

1. 原生js添加和删除节点

<body>
  <ul>
    <li>1.xxx</li>
    <li>2.xxx</li>
    <li>3.xxx</li>
  </ul>
  <script>
    //获取li节点
    var li = document.createElement('li');
    //给li节点添加内容和样式
    li.innerText = '4.xxxx';
    //获取ul节点
    var _ul = document.querySelector('ul');
    //创建li节点//把li节点插入到ul里
    _ul.appendChild(li);

    // 获取第2个li节点
    var _second = document.querySelector('ul li:nth-child(2)');
    // 删除
    _second.remove();
  </script>
</body>

给没有jQuery的网站添加jQuery.js

var script = document.createElement('script'); 
script.src = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js';
'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'
document.body.appendChild(script);

2. jq添加,删除,移动,克隆节点

append()
- 内部最后添加一个元素 (作为子代元素添加)
- 移动元素
prepend() 内部前面添加一个元素 (作为子代元素添加)
before() 外部前面添加一个元素 (作为兄弟元素添加)
after() 外部后面添加一个元素 (作为兄弟元素添加)
clone() 克隆一个元素

添加删除

<body>
    <ul>
        <li>1.xxx</li>
        <li>2.xxx</li>
        <li>3.xxx</li>
    </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var $ul = $('ul');

        // 在ul的底部添加一个li节点
        $ul.append('<li>4.xxx</li>');

        // 在ul的顶部添加一个li节点
        $ul.prepend('<li>0.xxx</li>');

        // 在ul后面添加兄弟节点div.box
        $ul.after('<div>box</div>');

        // 在ul后前面添加兄弟节点p.box 
        $ul.before('<p>p.box</p>');

        // 删除第二个li元素
        $ul.find('li:nth-child(2)').remove();
    </script>
</body>
</html>

移动克隆

<!DOCTYPE html>
<html lang="en"> 
<head>
    <style>
        .box{
            border: 1px solid;
        }
    </style>
</head> 
<body> 
     <ul>
         <li>1.xxx</li>
         <li>2.xxx</li>
         <li>3.xxx</li>
         <li>4.xxx</li>
     </ul>

     <div class="box"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 获取第一个li节点
        var $li1 = $('li:first-child');
      
        // 把第一个li节点移动到.box内
        $('.box').append($li1);

        // 克隆最倒数第二个li节点
        var $li2 = $('ul li').eq('-2').clone();
        $('ul').append($li2);

        // 把节点插入到.box内
        $('.box').append($li2);
    </script>
</body> 
</html>

jQuery和原生js获取DOM节点

jQuery和原生js获取DOM节点

jQuery地址

一、获取节点

二、原生js dom节点对象和jquery节点对象互转

三、 jquery对象获取元素节点

四、获取和修改dom节点的内容

五、获取和修改dom节点的属性

六、获取和修改dom节点样式

七、增加和删除节点

相关阅读更多精彩内容

友情链接更多精彩内容