js中级笔记(节点操作)

JS进阶

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

API

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

DOM

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

获取元素

  1. 根据ID获取
    getElementById(‘id’);返回一个匹配id的元素。id必须是字符串。

  2. 根据标签名获取
    getElementByTagName(‘类型名(div,li…)’);获取元素对象的集合,以伪数组形式存储,如果只有一个这样的元素或没有,还是返回伪数组形式。还可以获取某个元素内部所有指定标签名的子元素。
    element.getElementByTagName(‘类型名(div,li…)’); element为父元素的标签名。

  3. 根据类名获取
    getElementByClassName(’…’);

  4. 选择指定选择器
    querySelector(’.box’);返回选择中的第一个选择器,需要加符号,类加.,id加#

  5. 选择指定选择器的全部元素
    querySelectorAll(’.box’);‘

获取特殊元素

  1. 获取body元素
    document.body;,
  2. 获取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>

三种动态创建元素的区别

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Isco也是O型腿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值