DOM操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_55673399/article/details/126548894

注意：以下四个方法都需要父节点对象进行调用

1.appendChild

接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。返回值就是插入文档的子节点

<script>
  // 创建元素节点p
  var p = document.createElement('p');
  // 向p标签插入内容
  p.innerHTML = '我是一个p标签';
  // 将节点插入到body中
  document.body.appendChild(p);
</script>

2.insertBefore

将某个节点插入父节点内部的指定位置

语法：var 自定义名称=parentNode.insertBefore(newNode,referenceNode)；

newNode：所要插入的节点

referenceNode：父节点内部的一个子节点

作用：newNode将插在referenceNode这个子节点的前面

返回值：插入的新节点newNode

  <div id="parent">
    <span id="child">我是本来就有的span</span>
  </div>
  <script>
    // 创建一个新的、普通的<span>元素
    var el1 = document.createElement('span')
    // 向span标签插入内容
    el1.innerHTML = '我是新插入的span'
    // 插入节点前，要获得节点的引用
    var el2 = document.getElementById('child')
    // 获取父节点的引用
    var fujiedian = el2.parentNode;
    // 在DOM中在el2之前插入一个新的元素
    fujiedian.insertBefore(el1, el2)
  </script>

3.removeChild

接收一个子节点作为参数，用于从当前节点移除该子节点

返回值：移除的子节点

<body>
  <div id="parent">
    我是父元素节点
    <div id="child">我是子元素div</div>
  </div>
  <script>
    var childDiv = document.getElementById('child')
    childDiv.parentNode.removeChild(childDiv)
  </script>
</body>

4.replaceChild

用于将一个新的节点替换当前的节点

语法：var 自定义的名称=parentNode.replaceChild(newChild,oldChild)

newChild:新的节点

oldChild：要被替换的节点

<div id="d1">
  <span id="s1">我是span标签</span>
</div>
<script>
  var span1 = document.getElementById('s1');
  //创建一个新的div标签
  var div1 = document.createElement("div");
  // 向div标签插入内容
  div1.innerHTML = '我是div1标签';
  // 节点替换
  span1.parentNode.replaceChild(div1, span1);
</script>

5.cloneNode

方法返回调用该方法的节点的一个副本

语法：var dupNode = node.cloneNode(deep)

node：将要被克隆的节点

dupNode ：克隆生成的父节点

deep：可选，如果是true，则该节点的所有后代节点也会被克隆，如果是false，则只克隆该节点本身

var p = document.getElementById("para1"),
var p_prime = p.cloneNode(true);

查找元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

添加元素

document.createElement(element)

写入

document.write()

向文档写入文本或 HTML 表达式或 JavaScript 代码

<script>
document.write("<p>Hello world!</p>");
document.write("<span>Hello DOM!</span>");
document.write("Hello Weekend!");
</script>

常用方法

方法	例子	描述
element.innerHTML = new html content		改变元素的 innerHTML
element.attribute = value	直接将已经存在的属性进行修改 d1.id = 'div2'; d1.className='div21'	修改属性的值
element.getAttribute()	console.log(div.getAttribute('id'))	返回元素节点的指定属性值。
element.setAttribute(attribute, value)	// 设置div1的class为divCla d1.setAttribute('class', 'divCla')	设置或改变 HTML 元素的属性值
element.style.property = new style	d1.style.backgroundColor = 'red'	改变 HTML 元素的样式

element.innerHTML

属性设置或获取HTML语法表示的元素的后代

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 获取
  console.log(d1.innerHTML);
  // 设置
  d1.innerHTML = '我是新的内容'
</script>