目录
查
获取子节点: 父元素.Children
<ul>
<li>我是班长1</li>
<li id="li2">我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
</ul>
<script>
let li2 = document.querySelector('#li2')
// 查找父节点: 元素.parentNode
console.log(li2);// li
console.log(li2.parentNode);//ul
console.log(li2.parentNode.parentNode);//body
console.log(li2.parentNode.parentNode.parentNode);//html
</script>
获取兄弟节点
上一个兄弟元素:元素.previousElementSibling
下一个兄弟元素:元素.nextElementSibling
<ul>
<li>我是班长1</li>
<li id="li2">我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
</ul>
<script>
// 兄弟节点
let li2 = document.querySelector('#li2')
// 上一个 元素.previousElementSibling
console.log(li2.previousElementSibling) //班长1
// 下一个 元素.nextElementSibling
console.log(li2.nextElementSibling) //班长3
</script>
获取父节点:元素.parentNode
<ul>
<li>我是班长1</li>
<li id="li2">我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
</ul>
<script>
let li2 = document.querySelector('#li2')
// 查找父节点: 元素.parentNode
console.log(li2);// li
console.log(li2.parentNode);//ul
console.log(li2.parentNode.parentNode);//body
console.log(li2.parentNode.parentNode.parentNode);//html
</script>
增
document.createElement('标签名')
新增节点三要素:
1.创建空标签
2.设置内容
3.追加到页面
<ul>
<li>我是班长1</li>
<li id="li2">我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
</ul>
<script>
let ul = document.querySelector('ul')
// 创建空标签
let newli = document.createElement('li')
// 设置内容
newli.innerText = '我是程鹏飞, 我是毛毛'
// 追加到页面
ul.appendChild(newli)
</script>
新增节点追加到指定位置
追加到最后面: 父元素.appendChild(子元素)
追加指定元素前面: 父元素.insertBefore(子元素,哪个元素的前面)
<button class="btn1">添加到最后面</button>
<button class="btn2">添加到li2前面</button>
<button class="btn3">添加到li2后面</button>
<button class="btn4">添加到最前面</button>
<ul>
<li>我是班长1</li>
<li id="li2">我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
</ul>
<script>
// 创建空标签
// 设置内容
// 追加到页面
let ul = document.querySelector('ul')
let li2 = document.querySelector('#li2')
document.querySelector('.btn1').onclick = function(){
// 添加到最后面
let li = document.createElement('li')
li.style.color = 'pink'
li.innerText = '我是新的li'
ul.appendChild(li)
}
document.querySelector('.btn2').onclick = function(){
// 添加到li2前面
let li = document.createElement('li')
li.innerText = '我是新的li'
li.style.color = 'pink'
ul.insertBefore(li,li2)
}
document.querySelector('.btn3').onclick = function(){
// 添加到li2后面
let li = document.createElement('li')
li.innerText = '我是新的li'
li.style.color = 'pink'
ul.insertBefore(li,li2.nextElementSibling)
}
document.querySelector('.btn4').onclick = function(){
// 添加到最前面
let li = document.createElement('li')
li.innerText = '我是新的li'
li.style.color = 'pink'
ul.insertBefore(li,ul.children[0])
}
</script>
克隆节点
克隆自己+后代 : 元素.cloneNode(true)
只克隆自己 : 元素.cloneNode(false)
克隆节点只是将节点在内存中克隆 还需要将节点追加到页面
<button class="btn1">点我克隆节点true</button>
<button class="btn2">点我克隆节点false</button>
<div class="box">
<a href="我是链接"></a>
<p>我是p标签</p>
<ul>
<li>我是毛毛1</li>
<li>我是毛毛2</li>
</ul>
</div>
<script>
// 克隆自己+后代 : 元素.cloneNode(true)
// 只克隆自己 : 元素.cloneNode(false)
document.querySelector('.btn1').onclick = function(){
let boxs = document.querySelector('.box').cloneNode(true)
// 克隆节点只是将节点在内存中克隆 还需要将节点追加到页面
document.body.appendChild(boxs)
}
document.querySelector('.btn2').onclick = function(){
let boxs = document.querySelector('.box').cloneNode(false)
document.body.appendChild(boxs)
}
</script>
删除节点
删除节点: 父元素.removeChild(子元素) 元素只能移除自己的子元素