18获得触发事件元素节点的方法

最新推荐文章于 2023-12-09 14:25:27 发布

qq_47670443

最新推荐文章于 2023-12-09 14:25:27 发布

阅读量734

点赞数 1

分类专栏：重学前端基础冲击高薪文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_47670443/article/details/124853795

版权

重学前端基础冲击高薪专栏收录该内容

18 篇文章 1 订阅

订阅专栏

1querySelector()和querySelectorAll()

querySelector()方法接受css选择符参数，返回匹配该模式的第一个后代元素，如果没有匹配项则返回null

querySelectorALL() 返回匹配该模式的所有匹配的节点

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

  <script>
    
    const li1=document.querySelector('li')
    console.log(li1);
    const li=document.querySelectorAll('li')
    console.log(li);
  </script>
</body>

querySelector获得<li>1<li>

而querySelector获得的是一个伪数组

通过遍历可以拿到里面的数据或者触发元素

 for(let i=0;i<li.length;i++){
      console.log(li[i].innerHTML); //1  2  3
 li[i].addEventListener('click',function(){
        console.log(111);
      })
    }

通过遍历给多个元素注册点击事件。

2事件委托

同时给多个元素注册事件，除了上述的for循环注册事件，还可以使用事件委托。

事件委托是利用事件流的特征解决一些开发需求的知识技巧

优点：减少注册次数，可以提高程序性能，原理：事件冒泡给父元素注册事件，当我们触发资源的时候，会冒泡到父元素身上，从而触发父元素的事件。

事件对象e.target.tagName可以获得真正触发事件的元素。

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
<script>
const ul =document.querySelector('ul')
// 事件委托给父亲 
// console.dir(e.target) //就是我们需要点击的那个对象 里面有个'LI‘ 来进行判断
//找到真正被触发的事件元素 e.target.tagName

ul.addEventListener('click',function(e){
  console.dir(e.target) //就是需要点击的对象
  if(e.target.tagName ==='LI'){
    e.target.style.color='red'
  }
})

// 事件对象 e.target.tagName才能获取真正被触发的事件元素
</script>

3节点操作

3.1父节点查找

parentNode属性，返回最近一级的父节点找不到返回null

子元素.parentNode

<body>
  <div class="yeye">
    <div class="father">
      <div class="son"></div>
    </div>
  </div>

  <script>
    const son = document.querySelector('.son')
    console.log(son.parentNode);   
  </script>
</body>

查找子节点

childNodes 获得所有子节点，包括文本节点（空格，换行），注释节点等

children属性仅获得所有元素节点，返回的还是一个伪数组

父元素.childNodes
父元素.children

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

  <!-- childNodes 获得全部的子节点，回车换行，注释 空白 -->
  <script>
    const ul = document.querySelector('ul')
    const arr = ul.childNodes
    console.log(arr);

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

<script>
    // children 只获得元素类型的节点，返回一个伪数组，获得的节点是亲儿子，既往下第一层的节点
    const ul =document.querySelector('ul')
    const arr= ul.children
    console.log(arr);
  </script>
</body>

兄弟关系查找

下一个兄弟节点、
nextElementSibling属性
上一个兄弟节点
previousElementSibling属性

<body>
  <ul>
    <li>213</li>
    <li class="box">3244444444</li>
    <li>345555555555</li>
    <li>66666666666666</li>
  </ul>
  <script>
      const ul=document.querySelector('ul')
     
      // console.log( ul.children[2].previousSibling)
      console.log( ul.children[2].previousElementSibling)  //3244444444
      console.log(ul.children[2].nextElementSibling)   //66666666666666
  </script>
</body>

3.2增加节点（创建和追加的综合）

第一步是创建节点，第二步是追加节点

创建节点，
document.createElement('标签名')

追加节点
插入到父元素的最后一个子元素
//插入到这个父元素的最后
父元素.appendChild(要插入的元素)
//插入到父元素中某个子元素的前面
父元素.insertBefore(要插入的元素，在哪个元素前面)

<body>
  <ul>
    <li>节点</li>
  </ul>
<div class="btn">增加节点</div>
  <script>
const btn = document.querySelector('.btn')

btn.addEventListener('click',function(){
//创建节点
  const li=document.createElement('li')
  const ul=document.querySelector('ul')
//增加节点
  ul.appendChild(li)

  li.innerHTML='我是创建出来的'
  li.style.color='green'
})
  </script>
</body>

3.3其他节点操作总结

/ 节点的添加
// node.appendChild() 将一个节点添加到指定父节点的节点列表末尾
// node.appendChild(child)

// node.insertBefore() 将一个节点添加到父节点指定子节点前面
// node.insertBefore(child,指定元素)
// // 将一个节点添加到父节点的子节点最前面
// node.insertBefore(child,node.children[0])

// // 节点的删除
// node.removChild() 删除一个子节点，返回删除的节点

// // 节点的克隆
// node.cloneNode() 返回调用该方法的节点的一个副本，也称为克隆节点
//   如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点
//   如果括号参数为空或false，则是浅拷贝，只克隆复制节点本身，不克隆里面的子节点

</head>
<div class="box">
  <div class="box1">
   <p>123</p> </div>
</div>
<button>克隆</button>
<body>
  <script>
    const box1 =document.querySelector('.box1')
    const box =document.querySelector('.box')
    const button=document.querySelector('button')
    button.addEventListener('click',function(){
      // 默认为false，只克隆元素本身
      const son1 =box1.cloneNode()
      console.log(son1);
      console.log('--------------');
      // 为true的时候，表示除了元素本身被克隆，子孙后代也被克隆
      const son2 =box1.cloneNode(true)
      console.log(son2)
// 追加节点
      box.appendChild(son2)
      console.log(box);
    })
  </script>
</body>

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

  <button>按钮</button>
<script>
const btn = document.querySelector('button')
const ul=document.querySelector('ul')
btn.addEventListener('click',function(){
  // 删除
  console.log(ul.children);
  ul.removeChild(ul.children[0])
  console.log(ul.children);
  console.log(ul);
})
</script>

4自定义属性

如果标签有自定义属性

通过 let i = +e.target.dataset.id可以拿到对应的标签。

<body>
  <div class="tab">
    <div class="tab-nav">
      <h3>每日特价</h3>
      <ul>
        <li><a class="active" href="javascript:;"data-id='0'>精选</a></li>
        <li><a href="javascript:;"data-id='1'>美食</a></li>
        <li><a href="javascript:;"data-id='2'>百货</a></li>
        <li><a href="javascript:;"data-id='3'>个护</a></li>
        <li><a href="javascript:;"data-id='4'>预告</a></li>
      </ul>
    </div>
    <div class="tab-content">
      <div class="item active"><img src="./images/tab00.png" alt="" /></div>
      <div class="item"><img src="./images/tab01.png" alt="" /></div>
      <div class="item"><img src="./images/tab02.png" alt="" /></div>
      <div class="item"><img src="./images/tab03.png" alt="" /></div>
      <div class="item"><img src="./images/tab04.png" alt="" /></div>
    </div>
  </div>
  <script>
    //事件委托 原理就是事件委托
    //采取事件委托的形式来做tab选项卡切换
    //1 获取ul item
    const item = document.querySelector('item')
    const ul = document.querySelector('ul')
    //2 添加点击事件
    ul.addEventListener('click', function (e) {
      console.log(e)
      console.log(e.target)
      console.log(e.target.tagName)
      //3 判断是不是A标签
      if (e.target.tagName === 'A') {
        //consol.log('我选的是a标签')
        //4 排他思想
        //先移除新来的 active remove()
        document.querySelector('.tab-nav .active').classList.remove('active')
        //当前元素添加active add()
        e.target.classList.add('active')
      }
       //下面的大盒子 我们可以采用自定义属性 给html结构添加自定义属性
       console.log(e.target.dataset.id)
       //需要把i转换为数字类型 不然会报错
       const i = +e.target.dataset.id
       //排他思想
       //先移除原来的 active remove()
       document.querySelector('.tab-content .active').classList.remove('active')
       //给对应盒子加active add()
       document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active')
    })
  </script>
</body>