改变HTML元素的方式有哪些？如何在HTML中添加/替换或删除元素？

使用 JavaScript 的 DOM 操作

如果想要修改元素的样式，就要先获取元素之后再进行下一步操作

获取元素：可以使用等方法获取到需要操作的 HTML 元素。

javascript 复制代码

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.getElementsByName()
document.querySelector()
document.querySelectorAll()

添加元素 ：

创建一个新的 HTML 元素，使用document.createElement()方法
用户创建一段文本内容，使用document.createTextNode('文本内容')
用于创建一个属性，使用document.createAttribute('属性名')
用于给新属性节点添加属性值，使用属性节点.value = '属性值'
用于给新标签添加新属性，使用标签节点.setAttributeNode(属性节点)

用于将新标签添加到子元素列表的末尾，使用标签节点.appendChild(标签节点)

javascript 复制代码

<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元素的样式

javascript 复制代码

<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>

添加到文档中：
使用appendChild()放到元素的子集
父元素.insertBefore(新节点,子元素)，用于将新标签插入指定子元素的前面
父元素.removeChild(要删除的子元素)，用于删除父元素中的子元素

父元素.replaceChild(新节点,要替换的子元素)，用于替换父元素中的子元素

javascript 复制代码

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()方法，如
  javascript 复制代码
```
let oldDiv = document.getElementById('oldDiv');
let newDiv = document.createElement('div');
newDiv.innerHTML = '新内容';
oldDiv.parentNode.replaceChild(newDiv, oldDiv);。
```
删除元素 ：
- 获取要删除的元素：使用获取元素的方法获取到需要删除的元素。
删除元素 ：使用parentNode.removeChild()通过父级去删除子集的方法，如
javascript 复制代码
```
let elementToRemove = document.getElementById('elementId');
elementToRemove.parentNode.removeChild(elementToRemove);
```
获取元素的拓展
用于获取当前元素的父元素，子元素.parentElement
用于获取当前元素的子元素，父元素.children
用于获取当前元素的下一个同级元素，当前元素.nextElementSibling

使用示例：

javascript 复制代码

<!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>