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

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  3li[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.tagNameul.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.childNodesconsole.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.childrenconsole.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)  //3244444444console.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 itemconst 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>