JavaScript 中嵌套元素？

本文将讨论 JavaScript 中嵌套元素，并提供相应的示例。

在 JavaScript 中，要访问另一个元素内的元素（即内部元素），我们使用“.”属性。我们还可以使用 `contains()` 方法检查元素是否存在于另一个元素中。此方法返回 true 或 false。

让我们在本文中进一步探讨检查元素是否嵌套在另一个元素中的几种方法，并提供相应的示例。

语法

访问嵌套元素的语法如下：

document.getElementById(‘IDname’).getElementsByTagName(‘Tag’)[i].innerHTML;

其中：

  • **IDname** 是特定 ID 标签的名称。

  • **Tag** 是标签类型，可以是“p”、“a”、“span”、“strong”等。

  • **i** 是指定要访问的元素的索引。

返回元素内部的内容。

示例 1

这是一个访问 JavaScript 中嵌套元素的示例程序。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>An element inside another element in JavaScript</title>
</head>
<body style="text-align: center;">
   <h3>An element inside another element in JavaScript</h3>
   <div id="main">
      <p id="sub">Hello!</p>
      <p id="sub2">Hope you are doing well?</p>
   </div>
   <script>
      var x = document.getElementById('main').getElementsByTagName('p')[0].innerHTML = 'Bye'; // Accessing an element with in an element and changing the value.
      var y = document.getElementById('main').getElementsByTagName('p')[1].innerHTML = 'See you soon';
  </script>
</body>
</html>

执行上述代码后，将生成以下输出。

示例 2

这是一个访问 JavaScript 中嵌套元素并更改其值的示例程序。

<!DOCTYPE html>
<html>
<head>
   <meta charset = "UTF-8">
   <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
   <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
   <title>An element inside another element in JavaScript</title>
</head>
<body style="text-align: center;">
   <h3>Accessing an element which is inside another element in JavaScript using getElementsByClassName()
    method.</h3>
   <div id="main">
      <p id="sub" class="child1-main">LinkedIn</p>
      <p id="sub2" class="child2-main">Facebook</p>
   </div>
   <script>
      var x = document.getElementById('main').getElementsByClassName('child1-main'); // Accessing an element which is inside another element using getElementsByClassName() method.
      x[0].innerHTML = "Twitter"; // Instead of innerHTML, you can also use textContent// The element LinkedIn is changed to Twitter
   </script>
</body>
</html>

执行上述代码后，将生成以下输出。

语法

检查元素是否嵌套在另一个元素中的语法：

document.getElementById(‘MainID’).contains(document.getElementById(‘subID’));

其中：

  • **MainID** 是父 ID 标签名称。

  • **subID** 是子 ID 标签名称。

如果 subID 元素位于 MainID 元素内，则此函数返回 true；如果 subID 元素不在 MainID 元素内，则返回 false。

示例 3

这是一个使用 JavaScript 中的 `contains()` 方法检查元素是否嵌套在另一个元素中的示例程序。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>An element inside another element in JavaScript</title>
</head>
<body style="text-align: center;">
   <h3>To check an element is inside another element or not in JavaScript using contains() method.
   <div id="main">
      <p id="sub">Hello!</p>
      <p id="sub2">Hope you are doing well?</p>
   </div>
   <p id="result"></p>
   <script>
      var x = document.getElementById('sub');
      var y = document.getElementById('main').contains(x);
      document.getElementById('result').innerHTML = 'The element with id "main" contains the element with id "sub" : '+y;
   </script>
</body>
</html>

执行上述代码后，将生成以下输出。

更新于：2022年12月9日

9K+ 浏览量

启动您的职业生涯

完成课程后获得认证

开始学习
广告