使用 JavaScript 的 DOM 操作
如果想要修改元素的样式，就要先获取元素之后再进行下一步操作
获取元素：可以使用等方法获取到需要操作的 HTML 元素。
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.getElementsByName()
document.querySelector()
document.querySelectorAll()
- 添加元素：
- 创建一个新的 HTML 元素，使用
document.createElement()方法 -
用户创建一段文本内容，使用document.createTextNode(‘文本内容’)
-
用于创建一个属性，使用document.createAttribute(‘属性名’)
-
用于给新属性节点添加属性值，使用属性节点.value = ‘属性值’
-
用于给新标签添加新属性，使用标签节点.setAttributeNode(属性节点)
-
用于将新标签添加到子元素列表的末尾，使用标签节点.appendChild(标签节点)
<div id="content"> <p>我是原生 p 标签</p> </div> <script> let p = document.createElement('p'); // 创建一个 p 标签 let pText = document.createTextNode('hello world!'); // 创建一段文本 let pIbute = document.createAttribute("style"); // 创建一个属性 pIbute.value = "color:blue"; // 设置属性值 p.setAttributeNode(pIbute); // 将属性插入 p 标签内 p.appendChild(pText); // 将文本插入 p 标签内 let content = document.getElementById('content'); // 获取页面已有 div content.appendChild(p); // 将新创建的 p 标签插入到 div 中 </script> - 使用
innerHTML属性设置元素的内容 - 使用 元素.属性 = 属性值 修改HTML的元素内容
- 使用 元素.style=样式值 修改HTML元素的样式
<div id="content"> 我是 DIV 标签 <p>我是 P 标签</p> </div> <input type="text" id="inp" value="123" /> <div id="col"> 我是黑色 </div> <script> let content = document.getElementById('content'); content.innerHTML = "<h1>我是 H1 标签</h1>"; let inp = document.getElementById('inp'); inp.value = 456; let col = document.getElementById('col'); col.style.backgroundColor = 'blue'; </script>
- 创建一个新的 HTML 元素，使用
- 添加到文档中：
- 使用
appendChild()放到元素的子集 - 父元素.insertBefore(新节点,子元素)，用于将新标签插入指定子元素的前面
-
父元素.removeChild(要删除的子元素)，用于删除父元素中的子元素
-
父元素.replaceChild(新节点,要替换的子元素)，用于替换父元素中的子元素
let h1 = document.createElement('h1'); // 创建一个 p 标签 let h1Text = document.createTextNode('我是 h1 标签'); // 创建一段文本 h1.appendChild(h1Text); // 将文本插入 h1 标签内 let tag = document.getElementsByTagName('p')[0]; // 获取到原生 p 标签 content.insertBefore(h1,tag); // 将 h1 标签插入原生 p 标签之前 - 替换元素：
- 获取要替换的元素：先使用上述获取元素的方法获取到需要被替换的元素和用于替换的新元素。
- 替换元素：使用
parentNode.replaceChild()方法，如let oldDiv = document.getElementById('oldDiv'); let newDiv = document.createElement('div'); newDiv.innerHTML = '新内容'; oldDiv.parentNode.replaceChild(newDiv, oldDiv);。
- 删除元素：
- 获取要删除的元素：使用获取元素的方法获取到需要删除的元素。
- 删除元素：使用
parentNode.removeChild()通过父级去删除子集的方法，如let elementToRemove = document.getElementById('elementId'); elementToRemove.parentNode.removeChild(elementToRemove);获取元素的拓展
-
用于获取当前元素的父元素，子元素.parentElement
-
用于获取当前元素的子元素，父元素.children
-
用于获取当前元素的下一个同级元素，当前元素.nextElementSibling
使用示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM元素操作示例</title>
</head>
<body>
<div id="parentDiv">
<p id="targetPara">这是一个段落</p>
<p>段落2</p>
<span>这是一个span元素</span>
</div>
<script>
// 获取id为targetPara的元素
let targetPara = document.getElementById('targetPara');
// 使用parentElement获取父元素
let parentElement = targetPara.parentElement;
console.log("目标元素的父元素：", parentElement);
console.log("父元素的id：", parentElement.id);
// 使用children获取父元素的子元素
let childrenElements = parentElement.children;
console.log("父元素的子元素如下：");
//遍历他的所有子集
for (let i = 0; i < childrenElements.length; i++) {
console.log(childrenElements[i]);
}
// 使用nextElementSibling获取目标元素的下一个同级元素
let nextSibling = targetPara.nextElementSibling;
console.log("目标元素的下一个同级元素：", nextSibling);
if (nextSibling) {
console.log("下一个同级元素的id：", nextSibling.id);
}
</script>
</body>
</html>
