js中级笔记（节点操作）

最新推荐文章于 2022-03-28 23:19:38 发布

Isco也是O型腿

最新推荐文章于 2022-03-28 23:19:38 发布

阅读量207

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_53926719/article/details/115238669

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

JS进阶

现在的内容是可以实现web交互。

API

时微程序员提供的一个接口，帮助实现某种功能。
web API主要针对浏览器提供的接口，主要针对做交互。
web API一般有输入和输出，很多都是方法。

DOM

简介：
文档对象模型，是可拓展HTML的标准编程接口
DOM树
所有标签都是元素，所有内容都是结点。文档，元素，节点都是对象。
在这里插入图片描述

获取元素

根据ID获取
getElementById(‘id’);返回一个匹配id的元素。id必须是字符串。
根据标签名获取
getElementByTagName(‘类型名（div,li…）’);获取元素对象的集合，以伪数组形式存储，如果只有一个这样的元素或没有，还是返回伪数组形式。还可以获取某个元素内部所有指定标签名的子元素。
element.getElementByTagName(‘类型名（div,li…）’); element为父元素的标签名。
根据类名获取
getElementByClassName(’…’);
选择指定选择器
querySelector(’.box’)；返回选择中的第一个选择器，需要加符号，类加.，id加#
选择指定选择器的全部元素
querySelectorAll(’.box’)；‘

获取特殊元素

获取body元素
document.body;，
获取html元素
document.documentElement;

事件三要素
实现交互的关键

   <button id="boom">爆炸</button>
   <script>
       //事件源 事件被触发的对象
      var btn = document.getElementById('boom');
      //事件类型 如何触发 什么时间 比如鼠标点击(onlick)或经过
         btn.onclick = function(){
               alert('fake!!!哈哈哈');
         }
      //事件处理程序 通过函数赋值完成

鼠标常见事件
在这里插入图片描述

操作元素

修改元素内容

改变文本内容

   <button id="time">我是谁</button>
   <div></div>
   <p></p>
   <script>
        var watch=document.getElementById('time');
        var div = document.querySelector('div')
        watch.onclick = function(){
              div.innerText = ('我是你爹')
        }
        //元素也可以不添加事件，即直接触发
        var p= document.querySelector('p');
        p.innerText = ('谁也不是');
   </script>

innerText和innerHTML区别
innerText会去除HTML标签，即遇到HTML标签，会自动转换为文本。

div.innerText = '好开心<br>';
//此时内容为好开心<br>/。

这两个属性都是可读写的，还可以获取里面的内容。
innerText会去除空格和换行，而innerHTML会把标签也读出来，与写相反。

修改元素属性

进行不同操作时，标签元素也更改，如两个按钮控制不同的图片。

   <button id="meinv1">meinv1</button>
   <button id="meinv2">meinv2</button><br>
   <img src="微信图片_20200831202623.jpg" alt="">
   <script>
         //1.获取元素
         var meinv1 = document.getElementById('meinv1');
         var meinv2 = document.getElementById('meinv2');
         var img = document.querySelector('img');
         //2.注册事件
         meinv2.onclick = function(){
             img.src = '微信图片_20200831203202.jpg'
             //也可以更改其他元素title等
         }
         meinv1.onclick = function(){
             img.src = '微信图片_20200831202623.jpg'
         }
   </script>

分时问候案例：

    <img src="微信图片_20200831202623.jpg" alt="">
    <div>上午好</div>
   
   <script>
         //1.获取元素
         var img = document.querySelector('img');
         var div = document.querySelector('div');
         //2.得到当前小时
        var date = new Date();
        var h = date.getHours();
        if(h > 18){
            img.src = '微信图片_20200831203202.jpg';
            div.innerHTML = '晚上好';
        }
        else if (h > 12){
            img.src = '微信图片_20200831203202.jpg';
            div.innerHTML = '晚上好';
        }
   </script>

修改表单元素


   <button>1</button>
   <input type="text" value="123" name="" id="">
   <script>
       var btn = document.querySelector('button');
       var input = document.querySelector('input');
       btn.onclick = function(){
           input.value = '23333'
           //这里不能直接用innerHTML，因为这是属性，不是文本内容
           btn.disabled = true;//按钮禁用
           //this.disabled也可以使用，更方便，this指向当前函数的调用者
       }
   </script>

案例：密码可视化
登陆账号时，密码不可视，可在可视和不可视切换。结合html和css。

    <style>
        .box {
            width: 500px;
            border-bottom: 1px solid pink;
        }

        .box input{
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        img{
            width: 24px;
            height: 100%;
            position: relative;
            top: 8px;
            left: 370px;
        }
    </style>

    <div class="box">
        <label for="">
             <img src="微信图片_20200831202623.jpg" id="eye" alt="">
        </label>
        <input type="password"  name="" id="">

    </div>
   <script>
       var btn = document.querySelector('button');
       var eye = document.getElementById('eye');
       var input = document.querySelector('input');
       var i = 1;
       eye.onclick = function(){
        if(i == 1)   
        {
            input.type = 'text';
            i = 0;
        }
        else {
            input.type = 'password';
            i = 1;
        }
       }
   </script>

样式元素操作

JS修改style样式产生的是行内样式，权重比css高

    <style>
        div {
            width: 500px;
            height: 400px;
            background-color: pink;
            transition: all 1s;
        }
    </style>

    <div></div>
   <script>
       var div = document.querySelector('div');
       div.onclick = function(){
           this.style.backgroundColor = 'red';
           this.style.width = '1000px';
       }
   </script>

案例：通过js修改精灵图。
每个盒子的精灵图的位置不同，可通过循环修改每个盒子对应图的坐标达到目的，而不需要每个样式逐个修改。
在这里插入图片描述

    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
   <script>
       var list = document.querySelectorAll('li');
       for(var i = 0; i<list.length;i++)
       {
           var index = i * x;//x为精灵图中每个不同图片的间距
           list[i].style.backgroundPosition = '0 -'+index+'px';

   </script>

清除文本框默认值

知识点：获得焦点和失去焦点

     <input type="text" value="1223">
     <script>
         var text = document.querySelector('input');
         text.onfocus = function(){
            if(this.value === '1223') {
                this.value = '';
                this.style.color = 'red';
            }
            //加入判断是为了只有为默认值时才会清空
         }
         text.onblur = function(){
            if(this.value == '')
            this.value = '1223';
            this.style.color = '#999';
         }
         //如果不给判断，无论输入任何值，失去焦点时都会清空
     </script>

给元素添加类名

可以在css中写一个样式，需要用时在给元素添加。下拉菜单的思想。

     <div class="old">123</div>
     <script>
         var test = document.querySelector('div');
         test.onclick = function(){
             this.className = 'change';
         }
     </script>

案例：简易切换按钮（几个圆圈点击则变化）


    <div>
        <ul>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
        </ul>
    </div>
    <script>
        var list = document.querySelectorAll('li');
        for(var i = 0;i<list.length;i++)
        {
            list[i].onclick = function(){
            //排他思想，先全部清除，再设定样式    
                for(var j = 0;j < list.length;j++)
                    list[j].style.backgroundColor = 'white';
                this.style.backgroundColor = 'red';
            }
        }
    </script>

注意：如果没有排他思想，每点击一次就会被记录，圆圈一直都是红色，排他就是只有该元素有变化。

案例：全选与多选。选择全选框时，复选框都要被选择，而只有当全部复选框被选择时，全选才被选择，此处用表单做案例，只贴js代码

   <script>
      var j_cbAll = document.getElementById('j_cb');//获取全选按钮
      var j_tbs = document.getElementById('j_cb').getElementsByTagName('input');//获取其他全部复选框
      j_cbAll.onclick = function(){
        for(var i = 0;i<j_tbs.length;i++)
        {
          j_tbs[i].checked = this.checked;
        }
      }
      //全选框全选,复选框全部被选择

      for(var i = 0;i<j_tbs.length;i++)
      {
        //判断如果有其中一个复选框被选择
        j_tbs[i].onclick = function(){
          //flag记录全选框状态
          var flag = true;
          for(var i = 0;i<j_tbs.length;i++){
            if(!j_tbs[i].checked){
              flag = false;
              break;
            }
            //有一个复选没选中,全选就不会被选择
          }
          j_cbAll.checked = flag;
        }
      }
    </script>

自定义属性操作:
获取元素值：getAttribute（‘’）；
设置自定义属性：setAttribute（‘属性’，‘值’）
移除属性：removeAttribute（‘’）
如果属性过多，源代码不方便操作时，可使用

节点操作

每个元素都是一个节点，空格也是节点，属于文本节点，获取节点时要注意这个问题。

父节点

element.parentNode得到离元素最近的父级节点。

子节点

element.childNode得到离元素最近的子节点，包含元素节点，文本节点等等。
children获取所有子元素节点。如：ul.children;

利用节点，可以更快实现下拉菜单

     var nav = document.querySelector('.nav');
     var list = nav.children;//得到全部小li
     for (var i = 0;i<list.length;i++)
     {
       list[i].onmouseover = function(){
         this.children[1].style.display = 'block';
       }
       list[i].onmouseout = function(){
         this.children[1].style.display = 'none';
       }
     }

兄弟节点

nextSibling获取下一个兄弟节点，包括文本节点
nextElementSibling下一个兄弟元素节点。

创建节点

原本没有，动态创建。

appendChild（child）：插入一个节点到末尾，类似于伪元素after

    // 创建节点元素节点
    var li = document.createElement('li');
    // 添加节点
    var ul = document.querySelector('ul');// 获取父节点
    ul.appendChild(li);//添加子节点

insertBefore（child，指定元素）：将节点添加到指定子节点前面。类似于before

    var lili = document.createElement('li');
    ul.insertBefore(lili,ul.children[0]);

案例： 简易留言.原理：每点击按钮，就生成ul中的li，且将文本域的内容赋给li

    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>
        <li>你好</li>
        <li>宝贝</li>
    </ul>
    <script>
        var btn = document.querySelector('button');
        var thing = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        btn.onclick = function(){
            // 判断文本框是否有输入内容
            if(thing.value == ''){
                alert('玩我呢');
                return false;
            }else{
               var li1 = document.createElement('li');
            ul.insertBefore(li1,ul.children[0]);
            li1.innerHTML = thing.value; 
            //文本域内容赋值
            thing.value = '';
            // 清空文本框
            }
        }
    </script>

在这里插入图片描述

删除节点

removeChild（child）：从DOM中删除一个节点，返回删除的节点。

//接上文简易留言
            var as = document.querySelectorAll('a');
            for(var i = 0;i<as.length;i++){
                as[i].onclick = function(){
                    ul.removeChild(this.parentNode);
                }
            }

js阻止链接跳转：href：“javascript:;”，如果想要空链接，可以这么做，不用#做地址，可以避免引发不明错误

复制节点

cloneNode（）；只是复制内容，还需要添加
注意：如果括号参数为空或为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点

案例： 动态生成表格，可进行删除操作
在这里插入图片描述

    <table cellspacing='0'>
        <thead>
          <tr>
              <th>姓名</th>
              <th>科目</th>
              <th>成绩</th>
              <th>操作</th>
          </tr>
      </thead>
    <tbody>

    </tbody>
    </table>

<script>
var data = [
         {
             name:'james',
             subject: 'math',
             score:100
         },
         {
             name:'james',
             subject: 'math',
             score:1
         },
         {
             name:'james',
             subject: 'math',
             score:10
         } ];

         var tbody = document.querySelector('tbody');
         for(var i = 0;i<data.length;i++)
         {
             //1.创建行
             var tr = document.createElement('tr');
             tbody.appendChild(tr);
             //2.行里面创建单元格 td 单元格数量取决于对象里的属性个数

             for(var k in data[i]){//遍历循环
                //创建单元格
                var td = document.createElement('td')
                //3. 把对象里的属性值赋给td，即单元格填充
                td.innerHTML = data[i][k];
                tr.appendChild(td)
             }
            //  创建删除表格
                var td = document.createElement('td')
                td.innerHTML = '<a href="javascript:;">删除</a>'
                tr.appendChild(td)
         }
        //  注册删除事件
         var as = document.querySelectorAll('a')
         for(var i = 0;i<data.length;i++){
              as[i].onclick = function(){
                  //删除的是行，但鼠标点击的是链接，行是链接的父亲的父亲
                  tbody.removeChild(this.parentNode.parentNode)
              }
         }
    </script>

三种动态创建元素的区别

在这里插入图片描述

Isco也是O型腿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js中级笔记（节点操作）

JS进阶现在的内容是可以实现web交互。API时微程序员提供的一个接口，帮助实现某种功能。web API主要针对浏览器提供的接口，主要针对做交互。web API一般有输入和输出，很多都是方法。DOM简介：文档对象模型，是可拓展HTML的标准编程接口DOM树所有标签都是元素，所有内容都是结点。文档，元素，节点都是对象。获取元素根据ID获取getElementById(‘id’);返回一个匹配id的元素。id必须是字符串。根据标签名获取getElementByTagN
复制链接

扫一扫