js DOM节点的操作

DOM节点的操作

创建节点

格式：

var 新的元素节点 = document.createElement("标签名")

插入节点

插入节点有两种不同的形式，一种是追加元素在参考节点后面，另一种是在参考节点之前插入元素。

1.追加元素

步骤：

  1. 创建元素
  2. 设置元素内容
  3. 找到被插入的元素
  4. 追加子元素

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="d1">hello1</div>
<div class="d2">hello2</div>
<script>
    //1.创建元素
    var h1=document.createElement("h1") //创建什么元素写什么元素标签
    console.log(h1)
    //2.设置元素内容
    h1.innerHTML="早上好"
    //3.插入元素，首先要找到被插入的元素
    var d1=document.querySelector(".d1")
    //4.追加子元素
    d1.appendChild(h1)
</script>
</body>
</html>

2.在参考节点之前插入元素

步骤：

  1. 创建图片元素（img）
  2. 设置img的src属性
  3. 找到被插入的父元素
  4. 在参考元素前插入内容

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="d1">hello1</div>
<div class="d2">hello2</div>
<!--插入图片的位置-->
<div class="d3">hello3</div>
<script>
    //1.创建img元素
    var imgs=document.createElement("img")
    //2.设置img的src属性
    imgs.src="img/img1.jpg"
    console.log(imgs)
    //3.找到被插入的父元素 body
    var body=document.querySelector("body")
    //4.在body的d3前插入内容
    var d3=document.querySelector(".d3")
    body.insertBefore(imgs,d3)
	/*补充
    d3.parentElement.insertBefore(imgs,d3) parentElement直接获取父元素，效果与上面方法等同*/
</script>
</body>
</html>

删除节点

步骤：

  1. 找到被删除的父元素
  2. 找到被删除的元素
  3. 删除 父元素.removeChild(删除元素)

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="d1">hello1</div>
<div class="d2">hello2</div>
<div class="d3">hello3</div>
<script>
    //1.找到被删除的父元素
    var body=document.querySelector("body")
    //2.找到被删除的元素
    var d2=document.querySelector(".d2")
    //3.删除，父元素.removeChild(删除元素)
    body.removeChild(d2)
	/*补充
    d2.parentElement.removeChild(d2) parentElement直接获取父元素，效果与上面方法等同*/
</script>
</body>
</html>

复制节点（克隆）

格式：

要复制的节点.cloneNode() //括号中不带参数和false是一样的
要复制的节点.cloneNode(true)
  • 括号中不带参数或false：只复制节点本身，不复制子节点
  • 括号中为true：既复制节点本身，又复制子节点
posted @ 2020-04-11 16:57  。，_456  阅读(78)  评论(0)    收藏  举报