给定一个HTML文档, 任务是选择一个特定的元素, 并借助JavaScript获得父元素的所有子元素。
方法1：
- 选择要选择其子元素的元素。
- 采用.children属性以访问element的所有子级。
- 根据索引选择特定的子级。
示例1：本示例实现了上述方法。
<!DOCTYPE HTML>
<html>
<head>
<title>
Finding child element of parent with pure JavaScript.
</title>
<style>
.parent {
background: green;
color: white;
}
.child {
background: blue;
color: white;
margin: 10px;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;">
lsbin
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<div class = "parent" id = "parent">
Parent
<div class = "child">
Child
</div>
</div>
<br>
<button onclick = "GFG_Fun()">
click here
</button>
<p id = "GFG_DOWN" style =
"font-size: 24px; font-weight: bold; color: green;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
up.innerHTML = "Click on the button select the child node.";
function GFG_Fun() {
parent = document.getElementById('parent');
children = parent.children[0];
down.innerHTML = "Text of child node is - '"
+ children.innerHTML + "'";
}
</script>
</body>
</html>输出如下：
在单击按钮之前：
单击按钮后：
方法二：
- 选择要选择其子元素的父元素。
- 采用.querySelector()方法在父母身上。
- 使用child的className选择特定的孩子。
示例2：本示例实现了上述方法。
<!DOCTYPE HTML>
<html>
<head>
<title>
How to get the child element of
a parent using JavaScript ?
</title>
<style>
.parent {
background: green;
color: white;
}
.child1 {
background: blue;
color: white;
margin: 10px;
}
.child2 {
background: red;
color: white;
margin: 10px;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;">
lsbin
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<div class = "parent" id = "parent">
Parent
<div class = "child child1">
Child1
</div>
<div class = "child child2">
Child2
</div>
</div>
<br>
<button onclick = "GFG_Fun()">
click here
</button>
<p id = "GFG_DOWN" style =
"font-size: 24px; font-weight: bold; color: green;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
up.innerHTML = "Click on the button select the child node.";
function GFG_Fun() {
parent = document.getElementById('parent');
children = parent.querySelectorAll('.child');
down.innerHTML = "Text of child node is - '"
+ children[0].innerHTML + "' and '"
+ children[1].innerHTML + "'";
}
</script>
</body>
</html>输出如下：
在单击按钮之前：
单击按钮后：
