从element与node看node.childNodes和node.children 区别

于 2023-06-08 20:34:32 发布
阅读量231 收藏 1
点赞数 1
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuanggenhua/article/details/131115498
版权

node.childNodes和node.children 区别

  1. children返回HTMLCollection，是一个动态集合，随dom树更新。childNodes返回的NodeList不会
  2. children返回的只是元素节点，childNodes还包括文本节点等等
  3. 即children得到的是Element的属性，childNodes得到的是Node的属性

引申：element和node的区别

  • Node(节点)是DOM层次结构中的任何类型的对象的通用名称，Node有很多类型，如元素节点，属性节点，文本节点，注释节点等，通过NodeType区分
  • Element继承了Node类，也就是说Element是Node多种类型中的一种，即当NodeType为1时Node即为ElementNode，另外Element扩展了Node，Element拥有id、class、children等属性。

引申：对于getElementById与getElementByClassName

  • getElementById返回element对象
  • getElementByClassName返回动态的HTMLCollection

疑惑：getElementByClassName同样可以处理动态元素，却几乎看不到使用的案例，都是用的事件委托，难道有什么特殊的原因吗？

_时侍
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
childNodes.length与children.length的区别
09-05
childNodes.length与children.length的值常不一样。
js dom node.children与node.childNodes区别
weixin_30597269的博客
11-07 185
不同点：node.children不会取到节点下面的TextNode但是node.childNodes会取到 共同点：两者都是集合类数组，可以通过索引的方式取到值也可以用for循环遍历 转载于:https://www.cnblogs.com/ppphs/p/7799093.html...
$children:父访子 $parent:子访父 $root:访根
沧海一粟
03-27 335
node与Elment以及子节点childrenNode与children的区别
09-30 347
测试代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul id="ul1"> <li>x</li> <li>x</li> <li>x
节点操作.
acsweetest的博客
12-22 354
节点操作的相关内容以及案例
JS--JavaScript访问节点（childNodes、parentNode、firstChild、lastChild、nextSibling、previousSibling）
吴声子夜歌的博客
09-25 2971
访问节点 通过节点之间的树形关系，可以定位文档中的每个节点。DOM为Node类型定义如下属性，以方便JavaScript对文档树中每个节点进行遍历。 ownerDocument：返回当前节点的根元素（document对象） parentNode：返回当前节点的父节点。所有的节点都仅有一个父节点 childNodes：返回当前节点的所有子节点的节点列表 firstChild：返回当前节点的首个子节...
js -- childNodes
03-05
`childNodes`与`children`属性的区别在于，`children`仅返回元素节点，忽略了文本节点和注释节点。这使得`children`在处理元素级遍历时更为方便，因为它提供了一个只包含元素节点的“干净”列表。 在实际编程中，...
PHP children()函数讲解
10-17
如果你正在处理的是DOMDocument对象，那么你应该使用`DOMElement::childNodes`来获取子节点。 在实际开发中，结合其他XML处理函数，如`simplexml_load_file()`、`simplexml_load_string()`和`xpath`查询，`children...
DOM（二）.pdf
12-16
2. `childNodes`属性返回一个包含所有子节点的实时NodeList，包括元素、文本和空白节点。 3. `children`属性返回一个只包含元素子节点的静态NodeList。 4. `firstChild`和`lastChild`属性分别返回第一个和最后一个子...
DOM.chm
05-07
例如，可以使用`childNodes`属性获取所有子节点，包括文本节点，而`children`属性则只返回元素子节点。 在实际开发中，DOM操作通常涉及性能问题。频繁的DOM操作可能导致页面重绘，影响用户体验。因此，推荐使用文档...
编写兼容IE和FireFox的脚本
09-05
var children = element.children || Array.prototype.filter.call(element.childNodes, function(node) { return node.nodeType === Node.ELEMENT_NODE; }); ``` 五、removeChild与removeNode Firefox不支持`node...
JS树结构操作:查找、遍历、筛选、树结构和列表结构相互转换
weixin_42069147的博客
04-08 5045
JS树结构操作:查找、遍历、筛选、树结构和列表结构相互转换 经常有同学问树结构的相关操作，在这里总结一下JS树形结构一些操作的实现思路，并给出了简洁易懂的代码实现。 本文内容结构大概如下： 遍历树结构 1. 树结构介绍 JS中树结构一般是类似于这样的结构： let tree = [ { id: '1', title: '节点1', children: [ { id: '1-1', title: '节点1-1' },
Js中childNode与children的区别
qq_43690370的博客
06-16 3440
childNodes: 标准的，它返回指定元素的子元素集合，包括html节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。如果代码中有换行、空格就会增加文本节点，这样用它来返回真正的子节点就会不准确，具体见下面的例子。 除了IE9和Firefox，其他浏览器都支持通过childNodes[i]获取第i个子节点。 children: 非标准的，它返回指定元素的子元素集合。经测试，它只返回html节点，甚至不返回文本节点
children()和children以及childrenNode的区别
长河落日的博客
10-21 3790
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;遍历节点&lt;/title&gt; &lt;script src="js/Jquery.min.js" type="text/javascript"
JavaScript之childNodes 和 children 区别
LVXIANGAN的专栏
07-24 7494
 1、先让我们来看看childNodes的用法，以及是如何计算节点数量：   为什么输出是7而不是3呢？原来Internet Explorer 会忽略节点之间生成的空白文本节点（比如换行字符），而 Mozilla 不这么做。   2、两者区别： children() 方法返回被选元素的所有直接子元素。因此上面直接输出3。 注意：children()在...
JavaScript中Element与Node的区别，children与childNodes的区别
weixin_30338743的博客
09-04 113
　　本文首发博客园：http://jscode.cnblogs.com，转载请注明出处。 　　关于Element跟Node的区别，cilldren跟childNodes的区别很多朋友弄不清楚，本文试图让大家明白这几个概念之间的区别。 　　Node(节点)是DOM层次结构中的任何类型的对象的通用名称，Node有很多类型，如元素节点，属性节点，文本节点，注释节点等，通过NodeType区分，常见的...
js node.children与node.childNodes与node.firstChild,node,lastChild之间的关系
weixin_30443895的博客
11-06 94
博客搬迁，给你带来的不便，敬请谅解！ http://www.suanliutudousi.com/2017/11/06/js-node-children%e4%b8%8enode-childnodes%e4%b8%8enode-firstchildnodelastchild%e4%b9%8b%e9%97%b4%e7%9a%84%e5%85%b3%e7%b3%bb/ 转载于:https://www...
获取子类元素，FirstElementChild、children和ChildNode等等
weixin_40722928的博客
12-17 1815
目的是想要获得第一个div里面的“111”和“123”这个元素，作为字符串输出。 1、使用firstElementChild var ad=document.getElementsByTagName('div')[0].firstChild; console.log(ad); 获得的是text类型的111
有错误，parseXml参数为const QDomNode& node，你传入的是qdomelement
最新发布
07-15
非常抱歉，我犯了一个错误。你是正确的，`parseXml`函数的参数应该是`const QDomNode&`类型而不是`QDomElement`类型。以下是修正后的代码： ```cpp #include <QtXml> struct xm { QString name; QList<xm> xlist; }; xm parseXml(const QDomNode& node) { xm result; if (node.isElement()) { QDomElement element = node.toElement(); result.name = element.tagName(); } QDomNodeList children = node.childNodes(); for (int i = 0; i < children.count(); i++) { QDomNode childNode = children.at(i); if (childNode.isElement()) { result.xlist.append(parseXml(childNode)); } } return result; } xm readXmlFile(const QString& filePath) { QFile file(filePath); if (!file.open(QIODevice::ReadOnly | QIODevice::Text)) { // 处理文件打开失败的情况 return xm(); } QDomDocument doc; if (!doc.setContent(&file)) { // 处理XML解析失败的情况 file.close(); return xm(); } file.close(); QDomElement root = doc.documentElement(); return parseXml(root); } int main() { QString filePath = "path_to_your_xml_file.xml"; xm xmlData = readXmlFile(filePath); // 使用读取到的xmlData进行后续操作 return 0; } ``` 谢谢你的指正，希望这次的代码对你有帮助。如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值