数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究JavaScript 中特定节点的第一个和最后一个子节点？
在本文中，我们将学习 JavaScript 中特定节点的第一个和最后一个子节点，并附带合适的示例。
要获取特定节点的第一个和最后一个子节点，可以使用名为 firstChild、lastChild、firstElementChild 和 lastElementChild 的现有属性。
firstChild 和 firstElementChild 属性之间的区别在于，与 firstElementChild 相比，firstChild 将 HTML 元素中包含的文本和注释都视为子节点。firstChild 还会考虑文本中的空格。lastChild 和 lastElementChild 也是如此。
获取列表的第一个子节点
获取列表第一个子节点的语法如下：
Node.firstChild; Or Node.firstElementChild;
其中，Node 可以是任何 HTML 元素，可以使用 id 名称或类名访问。返回特定节点的第一个子节点。
示例 1
这是一个使用firstChild 和firstElementChild 属性在 JavaScript 中获取特定节点的第一个和最后一个子节点的程序。说明了 firstChild 和firstElementChild 之间的区别。
在 id 为“car-list”的 ul 列表中，如果我们在第一个元素之前放置注释，并在每个列表项之间放置空格，那么当我们使用 firstChild 属性访问第一个子节点时，它将返回未定义。因此，在使用firstChild 属性时避免使用空格，并且始终优先使用firstElementChild。lastChild 和 lastElementChild 也是如此。
<!DOCTYPE html>
<html>
<head>
<title>A program to get the first child node of a specific node in JavaScript</title>
</head>
<body style="text-align: center ;">
<p> A program to get the first and last child node of a specific node in JavaScript using firstChild and firstElementChild property.</p>
<ul id="car-list">
<li>BMW</li>
<li>AUDI</li>
<li>RANGE ROVER</li>
<li>ROLLS ROYCE</li>//These are the top branded cars
</ul>
<ul id="top-selling-mobiles">
//Top selling mobiles
<li>iPhone</li>
<li>Samsung</li>
<li>One plus</li>
</ul>
<p id="first-last"></p>
<script>
let first_child = document.getElementById('car-list').firstChild.innerHTML;
let first_element_child = document.getElementById('top-selling-mobiles').firstElementChild.innerHTML;
document.getElementById('first-last').innerHTML = 'First child for the list "car-list" : '+first_child + '<br/>' + 'First Element child for the list "top-selling mobile" : '+first_element_child;
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
获取列表的最后一个子节点
获取列表最后一个子节点的语法如下：
Node.lastChild; Or Node.lastElementChild;
其中，Node 可以是任何 HTML 元素，可以使用 id 名称或类名访问。返回特定节点的最后一个子节点。
示例 2
这是一个使用lastChild 和lastElementChild 属性在 JavaScript 中获取特定节点的第一个和最后一个子节点的程序。说明了lastChild 和lastElementChild 之间的区别。
<!DOCTYPE html>
<html>
<head>
<title>A program to get the first child node of a specific node in JavaScript</title>
</head>
<body style="text-align: center ;">
<p> A program to get the first and last child node of a specific node in JavaScript using lastChild and lastElementChild property.</p>
<ul id="car-list">
//Top Branded Cars<li>BMW</li>
<li>AUDI</li>
<li>RANGE ROVER</li>
<li>ROLLS ROYCE</li>
</ul>
<ul id="top-selling-mobiles">
//Top selling mobiles
<li>iPhone</li>
<li>Samsung</li>
<li>One plus</li>
</ul>
<p id="last"></p>
<script>
let last_child = document.getElementById('car-list').lastChild.innerHTML;
let last_element_child = document.getElementById('top-selling-mobiles').lastElementChild.innerHTML;
document.getElementById('last').innerHTML = 'Last child for the list "car-list" : '+last_child + '<br/>' + 'Last Element child for the list "top-selling mobile" : '+last_element_child;
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
606 次查看
