首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我使用for of循环修改innerText时,为什么span元素的innerText没有改变?

当使用for of循环修改innerText时,span元素的innerText没有改变的原因可能是因为for of循环遍历的是一个类数组对象,而不是真正的数组。类数组对象是一种类似数组的对象,它具有类似数组的结构和特性,但不具备数组的所有方法和属性。

在JavaScript中,类数组对象通常是由DOM方法返回的,比如querySelectorAll返回的是一个NodeList对象,getElementsByClassName返回的是一个HTMLCollection对象。这些对象虽然可以通过下标访问元素,但它们并不具备数组的方法,比如push、pop、forEach等。

而innerText是一个可写属性,当我们使用for of循环遍历类数组对象时,实际上是遍历了对象的属性,而不是数组的元素。因此,直接修改遍历的属性并不会改变原始的DOM元素。

为了解决这个问题,我们可以将类数组对象转换为真正的数组,然后再使用for of循环进行遍历和修改。可以使用Array.from方法或者扩展运算符(...)来实现类数组对象到数组的转换。

以下是一个示例代码:

代码语言:txt
复制
const spans = document.querySelectorAll('span');
const spanArray = Array.from(spans);

for (const span of spanArray) {
  span.innerText = '新的文本';
}

在上述代码中,我们首先使用querySelectorAll方法获取所有的span元素,并将其转换为数组spanArray。然后,我们使用for of循环遍历spanArray,并修改每个span元素的innerText属性。

需要注意的是,上述代码只是解决了for of循环修改innerText时span元素没有改变的问题,并没有涉及到云计算、IT互联网领域的知识和腾讯云产品。如果需要了解更多关于云计算和腾讯云产品的内容,请提供相关问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

MutationObserver接口-2-观察范围

MutationObserver接口(二) 观察范围 观察范围 上一节,我们使用MutationObserver,都只是观察节点属性。.../ 没有效果,因为文本节点没有innerText属性 差异: innerText属性不会获取display为none隐藏元素,而textContent会获取...innerText没有格式,而textContent有格式 文本节点没有innerText属性 从上面可以看到,innerText属性不会获取display为none隐藏元素,而textContent...当我们观察节点修改innerText,而不是textContent的话,会引发不一样情况(个人认为算bug了,如果有了解原因小伙伴,可以评论交流) 另外红宝书不建议使用innerText,但是...,添加节点没有被观察到,那是不是观察子树不能观察节点添加和移除呢?

40220

JavaScript DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素改变元素里面的内容、属性等

1.操作元素 JavaScript DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素改变元素里面的内容、属性等。(注意:这些操作都是通过元素对象属性实现) 2....和innerHTML区别 获取内容区别: innerText会去除空格和换行,而innerHTML会保留空格和换行 设置内容区别: innerText不会识别html,而innerHTML...常用元素属性操作 1. innerText、 innerhTML 改变元素内容 2. src、href 3. id、alt、title 获取属性元素对象.属性名 设置属性元素对象....2. class因为是个保留字,因此使用className来操作元素类名属性 className 会直接更改元素类名,会覆盖原先类名。...使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单情况下使用 var test = document.querySelector('div');

2.8K41

操作元素

操作元素   JavaScript DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素改变元素里面的内容、属性等。(注意:这些操作都是通过元素对象属性实现) 1.1....改变元素内容(获取或设置) ?...和innerHTML区别 获取内容区别: innerText会去除空格和换行,而innerHTML会保留空格和换行 设置内容区别: innerText不会识别html,而innerHTML...2. class因为是个保留字,因此使用className来操作元素类名属性 3. className 会直接更改元素类名,会覆盖原先类名。...使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单情况下使用 var test = document.querySelector('div');

1.6K20

「Web编程API」- 01

获取元素 为什么要获取页面元素?例如:我们想要操作页面上某部分(显示/隐藏,动画),需要先获取到该部分对应元素,再对其进行操作。 1.3.1....操作元素 JavaScript DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素改变元素里面的内容、属性等。(注意:这些操作都是通过元素对象属性实现) 1.5.1....改变元素内容(获取或设置) innerText改变元素内容 显示当前系统时间 某个时间 1123<...和innerHTML区别 获取内容区别:innerText会去除空格和换行,而innerHTML会保留空格和换行 设置内容区别:innerText不会识别html,而innerHTML会识别...使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单情况下使用 var test = document.querySelector('div');

64550

前端成神之路-WebAPIs01

能够修改元素内容 能够区分innerText和innerHTML区别 能够修改像div这类普通元素属性 能够修改表单元素属性 能够修改元素样式属性 1.1....获取元素 为什么要获取页面元素? 例如:我们想要操作页面上某部分(显示/隐藏,动画),需要先获取到该部分对应元素,再对其进行操作。 1.3.1....和innerHTML区别 获取内容区别: ​ innerText会去除空格和换行,而innerHTML会保留空格和换行 设置内容区别: ​ innerText不会识别html,而innerHTML...案例:循环精灵图背景 ? 案例:显示隐藏文本框内容 ? 方式2:通过操作className属性 元素对象.className = 值; 因为class是关键字,所有使用className。...使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单情况下使用 var test = document.querySelector('div');

80710

事件基础及操作元素

网页中每个元素都可以产生某些可以触发 JavaScript 事件,例如,我们可以在用户点击某按钮产生一个 事件,然后去执行某些操作。 1.2....常见鼠标事件 ? 2. 操作元素 JavaScript DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素改变元素里面的内容、属性等。...(注意:这些操作都是通过元素对象属性实现) 2.1. 改变元素内容(获取或设置) ?...innerText和innerHTML区别 获取内容区别: innerText会去除空格和换行,而innerHTML会保留空格和换行 设置内容区别: innerText不会识别...使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单情况下使用        var test = document.querySelector('div');

1.4K20

Vue3, setup语法糖、Composition API全方位解读

本文章以Vue2角度学习Vue3语法,让你快速理解Vue3Composition Api本文章第十四节为状态库 Pinia 安装、使用讲解一、文件结构Vue2中, 标签中只能有一个根元素...,在Vue3中没有此限制 // ......获取多个子组件实例:在 v-for 中获取子组件实例这种情况仅适用于 v-for 循环数是固定情况 ,因为如果 v-for 循环数 在初始化之后发生改变,那么就会导致 childRefs 再一次重复添加...获取多个子组件实例:动态 v-for 获取子组件实例通过下标来向 childRefs 添加/修改,初始化之后,动态修改 v-for 循环数,会自动根据下标重新修改该下标对应数据...) {}, // 在绑定元素父组件 // 及他自己所有子节点都更新后调用 updated(el, binding, vnode, prevVnode) {}, // 绑定元素父组件卸载前调用

3K40

从简单中窥见高端,彻底搞懂任务可中断机制与任务插队机制

例如,现在我有一个任务,往父级元素中插入 10 万个子节点 1,然后我们可以随便写这样一个函数来完成这个逻辑 btn.onclick = () => { let i = 0...for (; i < 100000; i++) { let span = document.createElement('span') span.innerText = 1...container.appendChild(span) } } 然后这个时候,我们就发现一个问题,当我们点击之后,页面上并不会立即显示插入内容,而是会卡顿一会儿,才会显示 原因是因为 10 万个节点插入逻辑是一个同步过程...因此当我们通过上面的 deadline 发现没有剩余时间执行更多任务了,那我们就中断遍历过程 3 代码实现 实现起来非常简单,我们用 while 循环来遍历 queueTask,然后根据 deadline...,每当我点击插队任务按钮,就会执行一个优先级更高任务 代码非常简单,不过理解可能需要稍微思考一下。

17510

JavaScript笔记(12)之事件基础

) 操作元素 JavaScriptDOM操作可以改变网页元素,结构和样式,我们可以利用DOM操作元素改变元素里面的内容,属性等.注意以下都是属性....改变元素内容 element.innerText 从起始位置到终止位置内容,但它去除html标签,同时空格和换行也会去掉 element.innerHTML 起始位置到终止位置内容,包括html...晚上: 修改表单属性 表单属性,如value.是要采用其他方式设置,假如我们现在想要按下按钮就让输入框中文字发生变化,我们使用input.innerText是不生效....:none,修改了这个属性罢了 做法很简单,就不展示css部分了: 循环精灵图 现在我们学习非常重要循环精灵图,以往我们都要一个一个自己写,现在可以利用JS循环写出来啦....如果样式修改比较多,可以采取操作类名方式更改元素样式 class因为是个保留字,因此使用className来操作元素类名属性 className 会直接更改元素类名,会覆盖原先类名 但是我们想要在保留原来类名基础上再新增我们类名也是可以

62920

【javaScript案例】之类似购物车效果实现

重点其实在于js部分: 这个效果实现基本功能如下: 勾选/不勾选第一列框,对应第五列小计中价格会改变,下方合计价格会改变 选择第一行第一列全选按钮,下方所有的复选框都会被选中,对应小计和合计中价格都会发生改变...我们可以通过parentNode来选出复选框对应父节点,再在该父节点中选出对应小计中innerText修改其内容(要对应前面的单价)=======这样第一点就完成啦,其实还要多研究细节,有很多需要在注意细节...关于全选实现效果,我们可以和复选框修改内容使用部分相同代码,(具体可见下面的代码),要记住我们还是需要记录一个变量来判断复选框是否被全选->判断对应价格是否要发生变化。...关于通过加减来修改选购物品数目,需要多加思考,因为涉及选购数目、小计价格、总计价格改变,但是大概思路跟第一点类似,就是通过该节点找到其父节点,然后修改该父节点下不同子节点innerText(但是在修改之前要判断一下对应复选框是否被选中...,若未被选中,就不需要改变相关价格了~) 最后一点,其实就简单啦,点击删除按钮时候,我们需要修改只有两点:一是display:none,二是如果复选框被选中,需要修改对应合计价格 好啦,大概思路就是以上几点啦

85510

你这磨人小妖精——选中文本并标注实现过程

因为你修改时候展示到页面的肯定是字符串本身,修改后需要做字符串diff,再根据diff结果去同步这个带magic-highlight字符串,这个过程极其繁琐,case很多。...先拿innertext再把第index个变成span包裹,然后渲染innerhtml,最后拿到这个spangetboundingclientrect,就是准确位置了 function getTextOffset...当选择完成,渲染了container,拿到它ref引用,再setstate(当前container元素) 页面内操作完全没问题,但问题来了,当props改变,需要删除元素时候,立刻报错了。...react元素 // 现在全部换成原生js字符串拼接 + 原生dom操作 aside.innerHTML = ` xxxxx ...挂钩 react下使用原生js,react操作和原生jsdom操作严格分开,不可夹杂着一起使用 标注

1.9K30

使用 HTML、CSS、JavaScript 创建一个简单井字游戏

在本节中,我们有 9 个 div,它们将充当板内瓷砖。 第四部分将负责公布最终比赛结果。默认情况下它是空,我们将从 javascript 修改内容。...在这个函数中,我们将接收一个索引作为参数,并将棋盘数组中相应元素设置为我们当前玩家符号。...接下来,我们将使用三元表达式来更改当前玩家值。如果是X,它将是O否则它将是X。现在,我们改变了我们用户价值,我们需要更新innerTextplayerDisplay,并应用新播放器类。...= 'Player X Won'; break; case TIE: announcer.innerText...在循环之后,我们将检查roundWon变量值,如果为真,我们将宣布获胜者并将游戏设置为非活动状态。如果我们没有获胜者,我们将检查棋盘上是否有空牌,如果我们没有获胜者并且没有空牌,我们将宣布平局。

1.9K21

Vue2剥丝抽茧-响应式系统之nextTick

dom ,然后执行一个死循环。...只更新最后一次结果 在 js 线程中如果修改同一个 dom 元素,无论修改多少次,最终轮到渲染线程时候,渲染线程当前读到 dom 是啥就会是啥。...第一次宏任务时候 dom 被修改成了 hello ,但此时还没有执行渲染线程。 接着执行微任务,将 dom 修改为 promise 。 接着执行第一次渲染线程,页面展示出 promise 。...平常 Vue 开发中,我们如果想要拿到更新后 dom 值,就需要使用 nextTick 了,当然此刻只是 dom 更新了,页面还没有渲染。...留一个问题,如果在 nextTick 再改变响应式数据 data 中值,那么是先渲染之前值再渲染改变值,还是只渲染一次改变值,思考过后相信会对 nextTick 有更深刻理解。

31130
领券