childNodes.length与children.length的区别

因为childNodes包含的不仅仅只有html节点，所有属性，文本等都包含在childNodes里面,你可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才使元素节点，2是属性节点，3是文本节点。而children.length只计算节点的数量。
包括进行节点长度的计算，节点的移动时都要注意这一点。
要获得一个元素的文本，比如要获得一个P节点的文本，有的人喜欢使用innerHTML，更改也是一样，其实这不太好，因为使用innerHTML浏览器会认为你要插入的东西是一段标签文本，而你只想插入一段纯文本，这就导致浏览器试图去解析你的那段纯文本，这会造成不必要的资源浪费。所以建议使用element.firstChild.nodeValue,为什么是firstChild呢？因为childNodes[0]就是文本节点，不信你可以看看它的nodeType。

赞 (0)

相关推荐

  • Js中parentNode,parentElement,childNodes,children之间的区别

    parentElement 获取对象层次中的父对象.  parentNode 获取文档层次中的父对象.  childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合.  children 获取作为对象直接后代的 DHTML 对象的集合. -------------------------------------------------------- parentNode和parentElement功能一样,childNodes和children功能一样.但是

  • javascript中parentNode,childNodes,children的应用详解

    "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 例: <div id="parent"><b id="child">My text</b></div> 在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的文字部分. 如果你打算用getElementBy

  • childNodes.length与children.length的区别

    因为childNodes包含的不仅仅只有html节点,所有属性,文本等都包含在childNodes里面,你可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才使元素节点,2是属性节点,3是文本节点.而children.length只计算节点的数量.包括进行节点长度的计算,节点的移动时都要注意这一点.要获得一个元素的文本,比如要获得一个P节点的文本,有的人喜欢使用innerHTML,更改也是一样,其实这不太好,因为使用innerHTML浏览器会认为你要插入的东西是一段标

  • 谈谈Jquery中的children find 的区别有哪些

    精华:find方法能找子孙,children方法只能找儿子 一.Jquery中children 语法 .children(selector) 说明 expr是表达式,可选参数,所有选择器中的表达式都可以用在这,比如按标签名"div",按类名".class",按序号":first"等等,如果表达式为空,那么返回的是所有的孩子,返回的结果仍为jQuery对象. 二.Jquery中find find() 方法获得当前元素集合中每个元素的后代,通过选择器

  • Java中length,length(),size()详解及区别

    Java中length,length(),size()区别 length属性:用于获取数组长度. eg: int ar[] = new int{1,2,3} /** * 数组用length属性取得长度 */ int lenAr = ar.length;//此处lenAr=3 System.out.println("Arr length:"+lenAr); length()方法:用于获取字符串长度. String str = "Hello World Java"; /

  • jQuery初学:find()方法及children方法的区别分析

    jQuery初学:find()方法及children方法的区别分析

    首先看看英文解释吧: children方法:find方法:通过以上的解释,可以总结如下: 1:children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样. 2:children方法获得的仅仅是元素一下级的子元素,即:immediate children. 3:find方法获得所有下级元素,即:descendants of these elements in the DOM tree 4:children方

  • 深入理解Vue官方文档梳理之全局API

    深入理解Vue官方文档梳理之全局API

    Vue.extend 配置项data必须为function,否则配置无效.data的合并规则(可以看<Vue官方文档梳理-全局配置>)源码如下: 传入非function类型的data(上图中data配置为{a:1}),在合并options时,如果data不是function类型,开发版会发出警告,然后直接返回了parentVal,这意味着extend传入的data选项被无视了. 我们知道实例化Vue的时候,data可以是对象,这里的合并规则不是通用的吗?注意上面有个if(!vm)的判断,实例化

  • 如何使用proxy实现一个简单完整的MVVM库的示例代码

    前言 MVVM 是当前时代前端日常业务开发中的必备模式(相关框架如react,vue,angular 等), 使用 MVVM 可以将开发者的精力更专注于业务上的逻辑,而不需要关心如何操作 dom.虽然现在都 9012 年了,mvvm 相关原理的介绍已经烂大街了,但出于学习基础知识的目的(使用 proxy 实现的 vue3.0 还在开发中), 在参考了之前 vue.js 的整体思路之后,自己动手实现了一个简易的通过 proxy 实现的 mvvm. 本项目代码已经开源在github,项目正在持续完善

  • 常用的前端JavaScript方法封装

    目录 1.输入一个值,返回其数据类型** 2.数组去重 3.字符串去重 4.深拷贝 浅拷贝 5.reverse底层原理和扩展 6.圣杯模式的继承 7.找出字符串中第一次只出现一次的字母 8.找元素的第n级父元素 9. 返回元素的第n个兄弟节点 10.封装mychildren,解决浏览器的兼容问题 11.判断元素有没有子元素 12.我一个元素插入到另一个元素的后面 13.返回当前的时间(年月日时分秒) 14.获得滚动条的滚动距离 15.获得视口的尺寸 16.获取任一元素的任意属性 17.绑定事件的

  • Vue编程三部曲之模型树优化示例

    Vue编程三部曲之模型树优化示例

    目录 前言 为什么要做优化? optimize isStaticKey isPlatformReservedTag HTML 保留标签 SVG 保留标签 标记静态节点 判断节点状态并标记 基础元素节点的处理 标记静态根 什么节点会成为静态根? 为什么子节点不能仅为一个文本节点? 标记静态节点和静态根节点有什么区别? 总结 前言 对编译过程的了解会让我们对 Vue 的指令.内置组件等有更好的理解.不过由于编译的过程是一个相对复杂的过程,我们只要求理解整体的流程.输入和输出即可,对于细节我们不必抠太

  • React之虚拟DOM的实现原理

    目录 React虚拟DOM机制 React diff 算法 1. 传统 diff 算法 2. react diff 算法 总结 最后 React虚拟DOM机制 虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象 状态变更时,记录新树和旧树的差异 最后把差异更新到真正的dom中 React引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API. 基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,Reac

随机推荐