<!-- 1.元素节点之间的关系
父节点 parentNode
子节点 children
上一个兄弟 previousElementSibling
下一个兄弟 nextElementSibling
2.移动元素节点-->
点击那个li标签 哪个li标签 就会变红色
<body>
<!-- 1.元素节点之间的关系
父节点
子节点
上一个兄弟
下一个兄弟
2.移动元素节点-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
const list = document.querySelectorAll('li');
//for循环开始绑定点击事件
for (let index = 0; index < list.length; index++) {
list[index].addEventListener('click',function(){
//this 表示被点击元素本身
list[index].style.backgroundColor='red'
})
}
</script>
</body>
被点击的上一个元素变红色
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
const list = document.querySelectorAll('li');
//for循环开始绑定点击事件
for (let index = 0; index < list.length; index++) {
list[index].addEventListener('click',function(){
//this 表示被点击元素本身
//被点击的上一个元素变红色
this.previousElementSibling.style.backgroundColor='red'
})
}
</script>
</body>
被点击的下一个元素变绿色
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
const list = document.querySelectorAll('li');
//for循环开始绑定点击事件
for (let index = 0; index < list.length; index++) {
list[index].addEventListener('click',function(){
//this 表示被点击元素本身
//被点击的下一个元素变绿色
this.nextElementSibling.style.backgroundColor='green'
})
}
</script>
</body>
给被点击的父元素 设置成黄色
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
const list = document.querySelectorAll('li');
//for循环开始绑定点击事件
for (let index = 0; index < list.length; index++) {
list[index].addEventListener('click',function(){
//this 表示被点击元素本身
//给被点击的父元素 设置成黄色
this.parentElement.style.backgroundColor='yellow'
})
}
</script>
</body>
点击一下li标签 设置所有的里标签 都拥有边框
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
const list = document.querySelectorAll('li');
//for循环开始绑定点击事件
for (let index = 0; index < list.length; index++) {
list[index].addEventListener('click',function(){
//点击一下li标签 设置所有的里标签 都拥有边框
for (let i = 0; i < list.length; i++) {
list[i].style.border='1px solid #000'
}
})
}
</script>
</body>
2.移动元素节点-->
appendChild 把目标元素插到父容器的最后一个子元素的位置
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
const list = document.querySelectorAll('li');
//for循环开始绑定点击事件
for (let index = 0; index < list.length; index++) {
list[index].addEventListener('click',function(){
// 设置被点击的元素插到末尾去
// 目标元素=this
// 父元素 this.parentNode
this.parentNode.appendChild(this)
})
}
</script>
</body>