下一个节点与下一个
nextSibling
:获得下一个节点,有可能是元素、注释、文本节点
nextElementSibling
:获得下一个元素节点
<!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>
<div>
<p id="text">这是文本</p>
<!-- 注释文本 -->
<p>元素</p>
</div>
<script>
let pBox = document.getElementById('text');
console.log(text.nextSibling);
console.log(text.nextElementSibling);
</script>
</body>
</html>
上一个节点与上一个元素节点
previousSibling
:获得上一个节点,可能获得元素、文本、注释…节点previousElementSibling
:获得上一个元素节点
<!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>
<div>
<p>我是一个元素节点</p>
<!-- 我是一个注释 -->
<p id="text">测试文字</p>
</div>
</body>
<script>
let text = document.getElementById('text');
console.log(text.previousSibling);
console.log(text.previousElementSibling);
</script>
</html>
第一个子节点与第一个子元素节点
firstChild
: 获得第一个子节点,大概率都是回车
firstElementChild
:获得第一个子元素节点
<body>
<div id='divBox'>
<!-- 我是注释节点 -->
<p>我是第一个元素节点1</p>
<p>我是第一个元素节点2</p>
<p>我是第一个元素节点3</p>
</div>
</body>
<script>
let divBox =document.getElementById('divBox');
console.log(divBox.firstChild);
console.log(divBox.firstElementChild);
</script>
最后一个节点与最后一个元素子节点
lastChild
:最后一个节点lastElementChild
:最后一个元素子节点
<body>
<div id='divBox'>
<!-- 我是注释节点 -->
<p>我是第一个元素节点1</p>
<p>我是第一个元素节点2</p>
<p>我是第一个元素节点3</p>
</div>
</body>
<script>
let divBox = document.getElementById('divBox');
console.log(divBox.lastChild);
console.log(divBox.lastElementChild);
</script>
获取父节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function () {
let pbox1 = document.getElementById('pbox1');
let pbox2 = document.getElementById('pbox2');
let pbox3 = document.getElementById('pbox3');
console.log(pbox1.parentElement);
console.log(pbox2.parentElement);
console.log(pbox3.parentElement);
}
</script>
</head>
<body>
<div name="我是他们的爹爹">
<p id="pbox1">你是我爹爹吗?</p>
<p id="pbox2">你是我爹爹吗?</p>
<p id="pbox3">你是我爹爹吗?</p>
</div>
</body>
</html>
克隆节点
cloneNode()
:浅克隆
–只克隆标签本身并没有内容cloneNode(true)
: 深克隆
克隆的时候会将所有的属性一起复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function () {
let clone = document.getElementById('clone');
let pbox = document.getElementById('pbox1');
let i = 2;
clone.onclick = function () {
let newBox = pbox.cloneNode(true);
newBox.id = 'pbox'+i;
i++;
document.body.appendChild(newBox);
}
}
</script>
</head>
<body>
<button id="clone">开始克隆</button>
<hr>
<p id="pbox1">
测试文本
</p>
</body>
</html>
元素的增删插换
createElement()
:创建一个元素(只有document可以创建新的元素)appendChild()
:追加一个元素
<body>
<button id="create">开始造起来</button>
<script>
let createBtn = document.getElementById('create');
let index = 1;
createBtn.onclick = function () {
let newBox = document.createElement('div');
newBox.innerText = '这是一个寂寞的' + index + '天';
index++;
document.body.appendChild(newBox);
}
</script>
</body>
removeChild(删除元素):
如果要删除某个元素,必须由父元素来删除
<!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>
<div id="box">
<p>测试文本0</p>
<p>测试文本1</p>
<p>测试文本2</p>
<p>测试文本3</p>
<p>测试文本4</p>
<p>测试文本5</p>
</div>
<br>
<button id="remove">删除元素</button>
<script>
let removeBtn = document.getElementById('remove');
let pArr = document.getElementsByTagName('p');
let box = document.getElementById('box');
removeBtn.onclick = function () {
}
</script>
</body>
</html>
- 插入元素
insertBefore(要插入的元素, tag)
:在tag之前插入- 在元素之后插入先找到它下个元素,在其下个元素之前插入
- 替换元素
replaceChild(新元素, 旧元素)
:
<body>
<div id="box">
<p id="tag">
这是要替换的文本
</p>
</div>
<hr>
<button id="replace">替换元素</button>
</body>
<script>
let replace = document.getElementById('replace');
let pBox = document.getElementById('tag');
let box = document.getElementById('box');
replace.onclick = function () {
let newBox = document.createElement('div');
newBox.innerText = '替换后的文本';
box.replaceChild(newBox, pBox);
}
</script>
<!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>
<div id="box">
<p>文本一</p>
<p id="tag">文本二</p>
<p>文本三</p>
<hr>
<button id="before">在前面补充</button>
<button id="after">在前面补充</button>
</div>
<script>
let tag = document.getElementById('tag');
let before = document.getElementById('before');
let after = document.getElementById('after');
let box = document.getElementById('box');
before.onclick = function () {
let newBox = document.createElement('p');
newBox.innerText = '创建的文本1';
new.insertBefore(newBox, tag);
}
after.onclick = function () {
let newBox = document.createElement('p');
newBox.innerText = '创建的文本二';
let nextElm = tag.nextElementSibling;
box.insertBefore(newBox, nextElm);
}
</script>
</body>
</html>
动态获取与静态获取
get获取的元素
:动态获取,当文档结构发生改变,获取的内容也会改变(地址引用)query获得的元素
,静态获取,当文档结构发生改变,对已经改变的内容没有影响(值引用)
<!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>
<div id="box">
<p>这是一个寂寞的天0</p>
<p>这是一个寂寞的天1</p>
<p>这是一个寂寞的天2</p>
<p>这是一个寂寞的天3</p>
<p>这是一个寂寞的天4</p>
<p>这是一个寂寞的天5</p>
</div>
<br>
<button id="remove">删除元素</button>
<script>
let removeBtn = document.getElementById('remove');
let pArr1 = document.getElementById('p');
let pArr = document.querySelectorAll('p');
let box = document.getElementById('box');
removeBtn.onclick = function () {
let num = pArr.length;
for (let i = 0; i < pArr1.length; i++) {
box.removeChild(pArr1[0])
}
for (let i = 0; i < pArr.length; i++) {
box.removeChild(pArr[i]);
}
}
</script>
</body>
</html>