js parent父级元素|极客笔记

js parent父级元素

在网页开发中，常常会涉及到操作 DOM 元素的父级元素。通过 JavaScript 可以轻松地获取父级元素、添加子元素、删除子元素等操作。本文将详细介绍如何通过 JavaScript 获取父级元素，并进行一些常见的操作。

获取父级元素

要获取一个元素的父级元素，可以使用 parentNode 属性。该属性指向当前元素的父级元素。

// 获取父级元素
let childElement = document.getElementById("child");
let parentElement = childElement.parentNode;
console.log(parentElement);

上面的代码中，我们首先通过 getElementById 方法获取了一个子元素 child，然后通过 parentNode 属性获取了该子元素的父级元素，并将其输出到控制台。

除了使用 parentNode 属性，还可以使用 parentElement 属性来获取父级元素，它们的功能类似。

操作父级元素

一旦获取到了父级元素，我们可以对其进行一系列操作，包括添加子元素、删除子元素等。

添加子元素

要向一个元素添加子元素，可以使用 appendChild 方法。该方法接受一个参数，即要添加的子元素。

// 添加子元素
let parentElement = document.getElementById("parent");
let childElement = document.createElement("div");
childElement.textContent = "这是一个新的子元素";
parentElement.appendChild(childElement);

上面的代码中，我们首先获取了父级元素 parent，然后创建了一个新的子元素 div，设置了其内容为 “这是一个新的子元素”，最后使用 appendChild 方法将子元素添加到父级元素中。

删除子元素

要从一个元素中删除子元素，可以使用 removeChild 方法。该方法接受一个参数，即要删除的子元素。

// 删除子元素
let parentElement = document.getElementById("parent");
let childElement = document.getElementById("child");
parentElement.removeChild(childElement);

上面的代码中，我们首先获取了父级元素 parent 和要删除的子元素 child，然后使用 removeChild 方法将子元素从父级元素中删除。

示例应用

下面是一个简单的示例应用，演示了如何通过 JavaScript 操作父级元素。

<!DOCTYPE html>
<html>
<head>
  <title>JS父级元素</title>
</head>
<body>
  <div id="parent">
    <div id="child">子元素</div>
  </div>

  <button onclick="addChild()">添加子元素</button>
  <button onclick="removeChild()">删除子元素</button>

  <script>
    function addChild() {
      let parentElement = document.getElementById("parent");
      let childElement = document.createElement("div");
      childElement.textContent = "这是一个新的子元素";
      parentElement.appendChild(childElement);
    }

    function removeChild() {
      let parentElement = document.getElementById("parent");
      let childElement = document.getElementById("child");
      parentElement.removeChild(childElement);
    }
  </script>
</body>
</html>

在上面的示例中，我们首先在页面中创建了一个父级元素 parent 和一个子级元素 child。然后通过两个按钮分别添加子元素和删除子元素的功能。点击按钮后，页面上的子元素会发生相应的变化。