day31-33关于parentNode,parentElement,childNodes,children

最新推荐文章于 2021-12-24 17:45:52 发布
最新推荐文章于 2021-12-24 17:45:52 发布
阅读量176 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 初学前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/RealRecall/article/details/111178857
本文详细介绍了在DOM操作中，如何区分节点查找的方法。重点讨论了childNodes属性和children属性的不同，前者包括所有子节点（包括文本节点），后者仅包含元素节点。同时，解释了parentNode和parentElement的区别，前者适用于所有节点，而后者只针对元素节点，且在遇到document时的特殊性。了解这些差异对于精确地操作DOM至关重要。

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

找节点和找元素是不同的。
childNodes和children区别在于，childNodes可能会找到文本节点，而children只会找到元素节点。
parentNode和parentElement区别在于，存在document的节点，而不存在document元素。

day44-47 JavaScript
gaosong0623的博客
11-07 251
JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完...
牛客前端大挑战62-73
cuixueying521123的博客
07-20 1266
62.表格排序 描述 系统会在tbody中随机生成一份产品信息表单，如html所示。 请完成 sort 函数，根据参数的要求对表单所有行进行重新排序。 1、type为id、price或者sales，分别对应第1 ~ 3列 2、order为asc或者desc，asc表示升序，desc为降序 3、例如 sort(‘price’, ‘asc’) 表示按照price列从低到高排序 4、所有表格内容均为数字，每一列数字均不会重复 5、不要使用第三方插件 function sort(type, order) {
Js-parentNode、parentElement，childNodes、children 它们有什么区别呢？
weixin_30536513的博客
10-03 206
原文：http://www.it130.cn/Article/FAQ/Web-kaifa/JavaScript/2007-3-20/2007032017013900.html 所属分类：Web 开发 JavaScript ---------------------------------------------------------------------- parentNode、pa...
parentNode、parentElement，childNodes、children 区别
清风小阁
05-14 1185
 parentElement         获取对象层次中的父对象。parentNode               获取文档层次中的父对象。children                      获取作为对象直接后代的 DHTML 对象的集合。childNodes                 获取作为对象直接后代的 HTML 元素和 TextNode 对象的集合。parentNode和
深入了解parentNode,parentElement,childNodes,children的区别，一看就懂
weixin_44206561的博客
08-26 3424
今天是准备面试的第七天，js是由ECMAScript、文档对象模型（DOM）和浏览器对象模型（BOM）组成，我们今天就了解下与DOM有关的常用接口parentNode,parentElement,childNodes,children。 parentNode，parentElement，childNodes和children都是对节点的操作，因此我们需要对dom树有一定的了解，在文档对象模型中，每一部分都是由节点组成（包括document都是一个节点），节点的类型一共有三种：元素节点，属性节点，文本节点，
parentNode,parentElement,childNodes,children最经典讲解
热门推荐
qq_36010298的博客
11-26 2万+
首先了解parentNode,parentElement,childNodes,children四大属性之前，必须对Dom树有一定的了解，在Dom文档结构中，HTML页面每一部分都是由节点组成的，节点的类型一共有3种，元素节点，文本节点，属性节点，从图中可以看出属性节点属于元素节点的分支，一般不常考虑， 下来详细介绍，childNodes，childern， childNodes指的是返
Js中parentNode,parentElement,childNodes,children之间的区别
farxix的博客
05-29 942
parentElement 获取对象层次中的父对象。 parentNode 获取文档层次中的父对象。 childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。 children 获取作为对象直接后代的 DHTML 对象的集合。 ...
day29-DOM（下）
HAI6545的博客
12-24 491
DOM DOM 就是我们 html 结构中一个一个的节点构成的。不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点。 DOM节点分三种：元素节点、文本节点、属性节点。 元素节点就是我们获取到的标签元素；标签里面的文本就是文本节点、标签上的属性就是属性节点。 元素节点 就是我们各种获取方法获取到的标签元素 document.getElementById(); document.querySeletor(); docum...
day19---DOM
XinPeiYing的博客
12-03 160
DOM—Document Object Model DOM定义了表示和修改文档所需的方法。DOM对象即为宿主形象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。DOM不能改变CSS(通过行间样式间接改变)也有人称DOM是对HTML以及XML的标准编程接口。 通过JS改变HTML代码 我们在HTML文件中定义几个标签 <div id="sex">male</div...
javascript基础知识完整笔记--------权威指南基础篇
斗师——Ace
10-11 1103
（一）JS初次使用； 1.搭建JS开发环境； （1）在控制后台输出：console.log()。 （2）在HTML页面输出： 1）.html页面元素事件中输出，如onclick=""； 2) .通过<script>在这里输出JS代码</script>,并且script可存在html任意标签位置。 ...
DOM知识点总结
m0_47224321的博客
10-26 1829
一、DOM初识 1、DOM—文档对象模型 操作页面元素的 2、DOM又被称为文档树模型 （1）文档：把一个html页面文件可以看成一个文档，由于万物皆对象，所以可以把这个文档看成一个对象。 （2）文档中的所有的标签都可以看成是一个对象 （3）页面中的每个标签都是一个元素（element）,每个元素都可以看成是一个对象。 （4）标签中可以嵌套标签，标签中有标签，元素中有元素 （5）一个html页面都有一个根标签—》html---->根元素，里面有很多个标签（元素）—》很多个对象 ========
parentNode,parentElement,childNodes,children的区别
我的技术博客
10-11 3312
从字面上我们可以知道一个是parent的节点,一个是parent的元素,实际上在很多时候它们的返回的内容是相同的,比如有这么一段代码: 节点 item1 item i item ii item iii item2 item3    var item1 = document.ge
复习一下HTML和CSS
RealRecall的博客
11-01 929
html和css还差最后一个作业，做倒数第二个作业用了太长时间，我对于知识掌握不牢。我今天开始复习了day1到day8的自学内容。 时间有限，只复习了选择器，列表。
day31-33阻止默认事件的方法
RealRecall的博客
12-14 522
代码如下： var input = document.querySelector("input"); input.onclick = function (e) { if (input.checked == false) { e.preventDefault(); } }; 这样的话，checkbox就无法取消了。因为当checked的值想要变成false时，input的默认事件，即“改变checkbox的状态”这个默认
day25-27 递归和setTimeout
RealRecall的博客
12-05 472
递归 程序调用自身的编程技巧称为递归（ recursion）。递归做为一种算法在程序设计语言中广泛应用。 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法，它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解，递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算，大大地减少了程序的代码量。递归的能力在于用有限的语句来定义对象的无限集合。一般来说，递归需要有边界条件、递归前进段和递归返回段。当边界条件不满足时，递归前进；当边界条件满足时，递归返回。 使用setTime
day34-36 一种使用innerHTML增加内容的方法
RealRecall的博客
12-17 432
代码如下： outerHTML这个属性和innerHTML差不多，前者还额外设置（或获取）对象的标签。
day28-30使用querySelectorAll和for遍历
RealRecall的博客
12-12 399
代码如下： for (i = 0; i < tips.length; i++) { var li = document.querySelectorAll("li"); } 另外提一下，使用for循环的死后，第二个参数中若存在变量，可能会由于for循环的改变而改变，无法达到预期。因此最好不要直接在第二个变量里写参数，而是要在第一个参数里定义一个新变量，再把新变量写到第二个参数里，以保证for循环执行条件不变。 ...
day20-21使用opacity制作渐变
RealRecall的博客
11-29 395
对于淡入有两种方法： 一、利用法 <html> <body> <div id="fade-obj" style="width: 300px; height: 300px; background: #000" ></div> <button id="fade-btn">淡出</button> <script> let div = document.quer
JavaScript中parentNode,childNodes,children属性深度解析
`parentNode`, `childNodes`和`children`是三个非常重要的属性，它们帮助我们理解和操作元素之间的关系。 1. `parentNode` `parentNode`属性用于获取当前元素的直接父节点。在HTML文档中，每个元素都有一个父节点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值