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

最新推荐文章于 2024-03-16 22:41:32 发布
最新推荐文章于 2024-03-16 22:41:32 发布
阅读量1.3k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/glglgl1/article/details/123723617
这篇博客探讨了如何使用DOM API来获取HTML文档中的元素和节点。通过`querySelector`和`querySelectorAll`方法选取了`ul`元素及其子`li`元素，并利用`childNodes`和`children`属性分别获取所有子节点和子元素节点。示例代码展示了控制台输出结果，展示了不同节点类型的区分。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<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);

下面是页面输出结果

 这个是控制台的输出结果图：

 

glglgl1
关注
bom结构,查找节点下所有子节点
通往新世界
05-07 625
--bom结构，查找节点下所有子节点：create table os(id int,parentid int,desn varchar(10))insert into os select 1,0,体育用品insert into os select 2,0,户外运动insert into os select 3,1,篮球insert into os select 4,1,足球in
JS中DOM和BOM
最新发布
qq_56101688的博客
10-31 889
DOM（文档对象模型）是一个跨平台和语言独立的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。在网页浏览器中，DOM 通常表示 HTML 或 XML 文档的对象模型。DOM 将网页内容视为节点树，其中每个节点都是文档中的对象，例如元素、属性、文本等。：在 Web 浏览器中，文档通常是指网页，即 HTML 或 XML 文件。：对象模型是将文档内容表示为对象集合的一种方式，这些对象可以由程序代码进行操作。：DOM 将文档结构表示为节点树，树中的每个节点代表文档的一部分。
JavaScript DOM 获取子节点
MW
04-02 462
childNodes 访问当前节点下所有的子节点 firstChild 访问子节点中的首位 lastChild 访问子节点中的最后一位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取子节点</t...
js DOM子节点
weixin_44154094的博客
01-17 553
DOM元素节点各个方法 各个方法 childNodes属性会获取包括文本节点在呢的所有节点,根据DOM标签标签间空白也会当成文本节点 firstChild可以获取到当前元素的第一个子节点，包括空白文本。 firstElementChild获取当前元素的第一个子元素,不支持IE8及以下的浏览器，如果需要兼容他们 尽量不要使用 previousSibling获取前一个兄弟节点，有可能获取到空白文本 previousElementSibling获取前一个兄弟元素，IE8及以下不
JavaScript节点-子节点的使用
weixin_43729412的博客
07-26 225
因为节点包含元素节点、属性节点、文本节点等等，但实际开发中用到的基本就是元素节点，因此若只想要获得子元素节点，还需要专门处理。parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回。parent.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。虽然children 是一个非标准，但得到各个浏览器的支持，可以放心使用。一、parentNode.childNodes;二、parentNode.children;
JavaScript删除子节点
Mint___的博客
05-01 428
removeChild：(childName)删除由childName指定的节点nodeName：当前节点的名字parentNode：当前节点的父节点效果：
DOM和BOM的使用
01-08
元素节点对象是指 DOM 中的元素节点对象，它提供了许多方法和属性，开发者可以通过这些方法和属性来操作文档的内容和结构。 innerHTML innerHTML 是指 DOM 中的 innerHTML 属性，它允许开发者通过 JavaScript 修改...
从零学前端第九讲：JavaScript的Dom和Bom
IT修真院：初学者转行到互联网的聚集地
10-29 575
修真院Web工程师零基础全能课 本节课内容： JavsScript的Dom和Bom 主讲人沁修 项目经验丰富，擅长H5移动项目、敏捷开发。 直播录屏版 传送门：https://v.qq.com/x/page/q0732gi60q6.html 1、什么是DOM DOM就是文档对象模型，什么是文档对象模型？这就需要好好说说了。 HTML的文档docume...
Javascript之BOM与DOM讲解
02-09
JavaScript是Web开发中不可或缺的一部分，主要由三个组成部分构成：ECMAScript、DOM（文档对象模型）和BOM（浏览器对象模型）。这三个部分协同工作，使开发者能够创建动态、交互式的网页。 1. ECMAScript： ...
javascript bom是什么及bom和dom的区别
11-22
总的来说，BOM和DOM都是JavaScript在Web开发中不可或缺的部分，BOM用于浏览器环境下的交互和控制，而DOM则是处理和操作页面内容的关键工具。理解并熟练运用这两个模型，是成为一个合格的前端开发者所必需的技能。
javascript 子节点删除
u011724185的博客
08-28 585
1.删除子节点的时候其余子节点的下标索引也会发生变化。 如删除了第一个子节点，则下一子节点会变为第一个。 x=document.getElementById("ret"); list=x.getElementsByTagName("a"); len = list.length; for(i=0;ilist.length也是动态的，则事先以其他变量加以保存 x.r
JavaScript-DOM-基础：节点查找与节点操作(1)
m0_60635321的博客
03-16 715
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】为了避免影响到大家的阅读体验，在此只以截图展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
JavaScript 节点概述 、父节点 parentNode、子节点children、兄弟节点、创建节点 添加节点、删除节点、复制拷贝节点 ★案例★
MDR_0820的博客
10-22 2286
一般 节点至少拥有nodeType(节点类型）.nodeName(节点名称）和nodeValue(节点值）这三个基本属性 元素节点 nodeType 为 1 属性节点 nodeType 为 2 文本节点 nodeType 为 3（文本节点包含文字、空格、换行等） 开发中 节点操作主要操作的是元素节点 父节点 parentNode 获得里元素最近的父级节点 <body> <div class="nav"> <div class="jiedian"&gt
BOM子节点汇总数据
TravyLee的专栏
12-06 1912
---------------------------------------------------------------- -- Author :TravyLee(物是人非事事休,欲语泪先流!) -- Date :2012-12-06 10:44:59 -- Version: -- Microsoft SQL Server 2012 - 11.0.2100.60 (Int
DOM BOM篇二 节点操作
qq_39165819的博客
06-06 125
节点层级 利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。 使用children可以获取到当前元素子节点元素 举例新浪下拉菜单 效果 得到兄弟节点 使用createElement可以创建节点，使用appendChild可以添加元素 举例 效果...
JavaScript 关于节点(记录学习)
qq_73451489的博客
04-07 1296
在DOM中，每个容器，独立的元素或文本块都被看作为一个节点，节点是W3C DOM的基本构建块。当一个容器包含另一个容器时，对应节点之间有父子关系(父节点，子节点)。同时该节点数遵循HTML的结构化本质，如<html>元素包含<head>、<boyd>,前者又包含<title>，后者包含各种块元素等。DOM中定义了HTML文档中6中相关节点类型。所有支持W3C DOM的浏览器(IE5+,Mozl和Safari等)都实现了前三种常见的类型，其中Mozl实现了所有类型。节点类型表节点类型数值节点类型附加说明。
JS获取子节点、父节点和兄弟节点的若干种方式
热门推荐
laok_的博客
07-22 29万+
一、js获取子节点的方式1.通过获取dom方式直接获取子节点其中test的父标签id的值，div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。var a = document.getElementById("test").getElementsByTagName("div"); 2.通过childNodes获取子节点使用child
js获取子节点的方法
Utopian_x的博客
09-20 2万+
1、通过获取DOM方式直接获取子节点 其中price为父标签id的值，div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候按数组的形式访问即可，如vara=document.getElementById("price").getElementsByTagName("div")[0] 返回的是数组里面的第一个元素。 vara=document.getElementById("price").getElementsByTagName("div"...
js获取页面中元素
人生就像旅程
01-08 673
本文摘自于：http://www.jb51.net/article/19705.htm   在Web应用程序特别是Web2.0程序开发中，经常要获取页面中某个元素，然后更新该元素的样式、内容等。 - 如何获取要更新的元素，是首先要解决的问题。令人欣慰的是，使用JavaScript获取节点的方法有很多种，这里简单做一下总结（以下方法在IE7和Firefox2.0.0.11测试通过）：
DOM与BOM进阶：ID与CLASS、节点操作与事件绑定
本文主要探讨了DOM（Document Object Model）和BOM（Browser Object Model）在Web开发中的应用，以及ID和CLASS的区别。DOM是HTML和XML文档的结构化表示，而BOM则涉及浏览器窗口的交互。 ID和CLASS是CSS选择器中的两...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值