对于 Web 开发者来说，获取一个元素下的所有子元素是非常常见的需求。下面将从以下几个方面阐述如何获取一个元素下的所有子元素:
一、使用JavaScript的childNodes属性
<!DOCTYPE html>
<html>
<head>
<title>获取子元素</title>
</head>
<body>
<div id="parent">
<p>第一段文字</p>
<p>第二段文字</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
const parent = document.getElementById('parent');
const children = parent.childNodes;
console.log(children);
</script>
</body>
</html>
childNodes 属性返回一个 NodeList 对象，其中包含了指定元素的所有子元素。值得一提的是，NodeList 对象不仅包含 Element 元素，还包括其他类型的节点——例如 Text 节点和 Comment 节点。
二、使用JavaScript的children属性
<!DOCTYPE html>
<html>
<head>
<title>获取子元素</title>
</head>
<body>
<div id="parent">
<p>第一段文字</p>
<p>第二段文字</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
const parent = document.getElementById('parent');
const children = parent.children;
console.log(children);
</script>
</body>
</html>
children 属性返回一个 HTMLCollection 对象，其中包含了指定元素的所有子元素。与 childNodes 属性不同的是，HTMLCollection 对象只包含 Element 元素。
三、使用JavaScript的querySelectorAll方法
<!DOCTYPE html>
<html>
<head>
<title>获取子元素</title>
</head>
<body>
<div id="parent">
<p>第一段文字</p>
<p>第二段文字</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
const parent = document.getElementById('parent');
const children = parent.querySelectorAll('*');
console.log(children);
</script>
</body>
</html>
querySelectorAll 方法返回一个 NodeList 对象，其中包含了符合指定 CSS 选择器的所有元素。使用 “*” 作为选择器，可以匹配所有元素。
四、使用jQuery的find方法
<!DOCTYPE html>
<html>
<head>
<title>获取子元素</title>
</head>
<body>
<div id="parent">
<p>第一段文字</p>
<p>第二段文字</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
const parent = $('#parent');
const children = parent.find('*');
console.log(children);
</script>
</body>
</html>
jQuery 的 find 方法返回一个包含了符合指定选择器的所有子元素的 jQuery 对象。使用 “*” 作为选择器，可以匹配所有元素。
原创文章，作者：BRXP，如若转载，请注明出处：https://www.506064.com/n/137177.html
微信扫一扫 
支付宝扫一扫 