获取节点
1层级节点
<ul>
<li id="li1">1</li>
<li>2</li>
<li id="li3">3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
//获取id名为li1的元素赋值给li1
let li1=document.getElementById(li1)
//返回父节点:parentNode
let par=li1.parentNode
//给父节点添加1像素红色实线边框
par.style.border='1px solid red'
//获取所有子节点的集合:childNodes
let nodes=par.childNodes
// 第一个子节点文本颜色改为红色
nodes[1].style.color='red'
//第一个子节点:firstChild
let frist=par.firstChild
//最后一个节点:lastChild
let last=par.lastChild
//上一个:previousSibling
let li3=document.getElementById('li3')
console.log(li3.previousSibling)
//下一个:nextsibling
console.log(li3.nextsibling)
</script>
通过获取父节点修改第一个子节点和最后一个子节点元素
<ul>
<li id="li1">1</li>
<li>2</li>
<li id="li3">3</li>
<li>4</li>
<li>5</li>
</ul>
<Script>
// 获取父节点
let p=document.getElementsByTagName('ul')[0]
p.firstElementChild.style.border='1px solid blue'
p.lastElementChild.style.border='1px solid blue'
</script>
2通过点击单选按钮，实现图片的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="radio" name="book" value="图书1">图书1
<input type="radio" name="book" value="图书2">图书2
<br>
<img src="" alt="" height="300px" width="500px">
<p></p>
<script>
let img=document.querySelector('img')
let p=document.querySelector('p')
document.getElementsByName('book')[0].onchange=function(){
img.setAttribute('src','img/1.jpg')
let val=document.getElementsByName('book')[0].value
p.innerHTML=val
}
document.getElementsByName('book')[1].onchange=function(){
img.setAttribute('src','img/2.jpg')
let val=document.getElementsByName('book')[1].value
p.innerHTML=val
}
</script>
</body>
</html>
3追加元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="radio" name="book" value="图书1">图书1
<input type="radio" name="book" value="图书2">图书2
<br>
<!-- <img src="" alt="" height="300px" width="500px"> -->
<p></p>
<script>
let p=document.querySelector('p')
document.getElementsByName('book')[0].onchange=function(){
// 创建一个node
let img=document.createElement('img')
img.setAttribute('src','img/1.jpg')
img.style.height='200px'
// 追加元素
p.appendChild(img)
}
document.getElementsByName('book')[1].onchange=function(){
// 创建一个node
let img=document.createElement('img')
img.setAttribute('src','img/2.jpg')
img.style.height='200px'
// 追加元素
p.appendChild(img)
}
</script>
</body>
</html>
4通过父元素删除子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除</title>
</head>
<body>
<img src="img/1.jpg" alt="">
<script>
document.querySelector('img').onclick=function(){
let img=document.querySelector('img')
// 需要通过父元素,才能删除
img.parentNode.removeChild(img)
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
