《JavaScript》DOM和BOM中的节点操作之子节点

最新推荐文章于 2024-03-16 22:41:32 发布

原创最新推荐文章于 2024-03-16 22:41:32 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

这篇博客探讨了如何使用DOM API来获取HTML文档中的元素和节点。通过`querySelector`和`querySelectorAll`方法选取了`ul`元素及其子`li`元素，并利用`childNodes`和`children`属性分别获取所有子节点和子元素节点。示例代码展示了控制台输出结果，展示了不同节点类型的区分。

<body>
	<div>我是div</div>
	<span>我是span</span>
	<ul>
			<li>我是ki</li>
			<li>我是ki</li>
			<li>我是ki</li>
			<li>我是ki</li>
		</ul>
    <ol>
	    <li>我是ki</li>
		<li>我是ki</li>
		<li>我是ki</li>
		<li>我是ki</li>
</ol>
<div class="dome">
	<div class="box">
		<span class="erweima">x</span>
	</div>
</div>
<script>
var ul  =  document.querySelector('ul');
var lis = ul.querySelectorAll('li');
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
console.log(ul.children);
</script>

使用DOM 提供的方法（API）获取

var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');

子节点的方式

：console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);

使用children 获取所有的子元素节点也是我们实际开发常用的

console.log(ul.children);

下面是页面输出结果