資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究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+ 瀏覽量
廣告