当网页被加载时，浏览器会创建页面的文档对象模型DOM（Document Object Model），在DOM中，每个东西都是节点。

DOM四大操作：查找、更新、添加、删除
通过DOM，JavaScript 可创建动态的 HTML：
        能够改变页面中的所有 HTML 元素
        能够改变页面中的所有 HTML 属性
        能够改变页面中的所有 CSS 样式
        能够对页面中的所有事件做出反应
前提：首先找到相关元素，前面一篇博客，详细的说明了，如何查找相关的元素

https://blog.csdn.net/m0_64346035/article/details/124404065

整理主要阐述更新、添加、删除

一、DOM操作属性

通过我们各种获取元素的方式获取到页面中的标签以后，我们可以直接操作 DOM 元素的属性，就能直接把效果展示在页面上

1、innerHTML

功能

a、获取元素内部的HTML结构

b、设置元素内容

<body>
  <div>
    <p>
      <span>hello</span>
    </p>
  </div>

  <script>
    var div = document.querySelector('div');
    console.log(div.innerHTML);
	div.innerHTML = '<p>hello</p>';
   	//设置完后，页面中的div元素里面就会嵌套一个 p 元素
  </script>
</body>

2、innerText

功能：

a、获取元素内部的文本（只能获取到文本内容，获取不到html标签）

b、可以设置元素内部的文本

<body>
  <div>
    <p>
      <span>hello</span>
    </p>
  </div>

  <script>
    var div = document.querySelector('div');
    console.log(div.innerText);	//hello
    div.innerText = '<p>hello</p>';
//设置完毕以后，会把`<p>hello</p>`当做一个文本出现在div元素里面，而不会把 p 解析成标签
  </script>
</body>

3、getAttribute

获取元素的某个属性（包括自定义属性）

4、setAttribute

给元素设置一个属性（包括自定义属性）

5、removeAttribute

直接移除元素的某个属性

<body>
  <div a="100" class="box"></div>

  <script>
    var div = document.querySelector('div');
    console.log(div.getAttribute('a'));	//100
    console.log(div.getAttribute('class'));	//box

    div.setAttribute('a',100);
	div.setAttribute('class','box');
	console.log(div);	// <div a="100" class="box"></div>

    div.removeAttribute('class');
    console.log(div); // <div a="100"></div>


  </script>
</body>

6、style

专门用来给元素添加 css 样式的
添加的都是行内样式

<body>
  <div></div>

  <script>
    var div = document.querySelector('div');
    div.style.width = '100px';
    div.style.height = '100px';
    div.style.backgroundColor = 'pink';
    console.log(div); 
    // <div style="width: 100px; height: 100px; background-color: pink;"></div>
  </script>
</body>

7、className

专门用来操作元素的类名的

<body>
  <div class="box"></div>

  <script>
    var div = document.querySelector('div');
   	console.log(div.className); // box
     div.className = 'test';
    console.log(div); // <div class="test"></div>
    // 在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖

  </script>
</body>

二、DOM创建

1、创建一个节点

createElement

用于创建一个元素节点

// 创建一个 div 元素节点
var oDiv = document.createElement('div');
console.log(oDiv);	// <div></div>

createTextNode

用于创建一个文本节点

// 创建一个文本节点
var oText = document.createTextNode('我是一个文本');
console.log(oText);	// "我是一个文本"

三、DOM增加

1、appendChild

向一个元素节点的末尾追加一个节点

语法：父节点.appendChild(要插入的子节点);

// 创建一个 div 元素节点
var oDiv = document.createElement('div');
var oText = document.createTextNode('我是一个文本');

// 向 div 中追加一个文本节点
oDiv.appendChild(oText);
console.log(oDiv);	// <div>我是一个文本</div>

2、insertBefore

向某一个节点前插入一个节点

语法：父节点.insertBefore(要插入的节点，插入在哪一个节点的前面);

<body>
  <div>
    <p>我是一个 p 标签</p>
  </div>
  
  <script>
  	var oDiv = document.querySelector('div');
    var oP = oDiv.querySelector('p');
    
    // 创建一个元素节点
    var oSpan = document.createElement('span');
    
    // 将这个元素节点添加到 div 下的 p 的前面
    oDiv.insertBefore(oSpan, oP);
    
    console.log(oDiv);
    /*
    	<div>
    		<span></span>
    		<p>我是一个 p 标签</p>
    	</div>
    */
  </script>
</body>

四、DOM删除

removeChild

移除某一节点下的某一个节点

语法：父节点.removeChild(要移除的字节点);

<body>
  <div>
    <p>我是一个 p 标签</p>
  </div>
  
  <script>
  	var oDiv = document.querySelector('div')
    var oP = oDiv.querySelector('p')
    
    // 移除 div 下面的 p 标签
    oDiv.removeChild(oP)
    
    console.log(oDiv) // <div></div>
  </script>
</body>

五、DOM修改

replaceChild

将页面中的某一个节点替换掉

语法：父节点.replaceChild(新节点，旧节点);

<body>
  <div>
    <p>我是一个 p 标签</p>
  </div>
  
  <script>
  	var oDiv = document.querySelector('div')
    var oP = oDiv.querySelector('p')
    
    // 创建一个 span 节点
    var oSpan = document.createElement('span')
    // 向 span 元素中加点文字
    oSpan.innerHTML = '我是新创建的 span 标签'
    
   	// 用创建的 span 标签替换原先 div 下的 p 标签
    oDiv.replaceChild(oSpan, oP)
    
    console.log(oDiv)
    /*
    	<div>
    		<span>我是新创建的 span 标签</span>
    	</div>
    */
  </script>
</body>

六、获取元素的非行间样式

我们在操作 DOM 的时候，很重要的一点就是要操作元素的 css 样式，那么在操作 css 样式的时候，我们避免不了就要获取元素的样式，之前我们说过可以用元素.style.xxx来获取，但是这个方法只能获取到元素 行间样式，也就是写在行内的样式

1、getComputedStyle（非IE使用）

语法：widow.getComputedStyle(元素,null).要获取的属性

<style>
  div {
    width: 100px;
  }
</style>
<body>
  <div style="height: 100px;">
    <p>我是一个 p 标签</p>
  </div>

  <script>
    var oDiv = document.querySelector('div')
		console.log(window.getComputedStyle(oDiv).width) // 100px
    console.log(window.getComputedStyle(oDiv).height) // 100px
  </script>
</body>

- 这个方法获取行间样式和非行间样式都可以

2、currentStyle（IE使用）

语法：元素.currentStyle.要获取的属性

<style>
  div {
    width: 100px;
  }
</style>
<body>
  <div style="height: 100px;">
    <p>我是一个 p 标签</p>
  </div>

  <script>
    var oDiv = document.querySelector('div')
		console.log(oDiv.currentStyle.width) // 100px
    console.log(oDiv.currentStyle.height) // 100px
  </script>
</body>