讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

javascript 变态的节点集合_javascript技巧

php中文网
发布： 2016-05-16 18:31:04
原创
1225人浏览过

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

如果预先将nodeList转换为数组就没有问题！
复制代码 代码如下:

window.onload = function(){
var d = document.createDocumentFragment();
var div = document.getElementById("aaa");
var c = div.childNodes;
var arr = [];
for(var i=0,n=c.length;iarr.push(c[i])
}
for(var i=0,n=arr.length;ialert(arr[i] + " "+ i)
d.appendChild(arr[i])
}
div.parentNode.replaceChild(d,div)
}


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

很显然nodeList还一些奇怪的特性是数组没有的。从运行框2中，我们可以看到把节点appendChild到文档碎片时，其实会把它从DOM树中剥离出来，nodeList一定是跟踪这变化，动态改变了它自身，而直线递加的i是无法对应正确的节点的索引！因此我们每次取得它的firstChild就行了。
复制代码 代码如下:

window.onload = function(){
var d = document.createDocumentFragment();
var div = document.getElementById("aaa");
var c = div.childNodes;
while(c.length) d.appendChild(c[0])//每次只取它第一个节点，直到取空
div.parentNode.replaceChild(d,div)
}


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

顺便一提，由getElementsByTagName取得的HTMLCollection也是这个样子，因此处理这类节点集合要打起十二分精神了！

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这两种节点集合在各浏览器还实现得不太一样，如标准浏览器我们可以用Array.prototype.slice.call将它们转换为原生数组，IE则报错。标准浏览器的它们有hasOwnProperty与valueOf，而IE是没有的……

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法_extjs 下一篇：ExtJS TabPanel beforeremove beforeclose使用说明_extjs
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
什么是javascript代码规范_ESLint如何配置？ JavaScript代码规范是通过ESLint等工具落地的工程实践，非语法强制；ESLint可自动检查潜在bug与风格问题，支持环境配置、规则继承、解析器与插件协同，并集成至编辑器、Git钩子及CI流程。
2025-12-20 19:12:08
930
JavaScript中什么是防抖和节流_应用场景区别 防抖是“等你停下来再执行”，节流是“固定节奏匀速执行”；防抖只响应最后一次操作，适用于搜索框输入、resize等；节流按固定间隔执行，适用于scroll、拖拽等需感知过程的场景。
2025-12-20 19:09:08
160
javascript如何实现加密_在前端进行加密是否真的安全 前端JavaScript加密不能真正保障数据安全，因其运行在用户可控环境，密钥与逻辑易被窃取或绕过；它仅适用于防抓包明文、临时签名及本地存储混淆等场景，且须配合HTTPS、后端校验等措施。
2025-12-20 19:05:32
878
javascript如何实现缓存策略_Service Worker如何管理离线资源 ServiceWorker是JavaScript实现缓存策略的核心，通过拦截请求、自定义响应及持久化存储支持离线访问；需HTTPS注册，经历install（预缓存）和activate（清理旧缓存）生命周期，并依资源类型选用Cache-First、Network-First或Stale-While-Revalidate策略。
2025-12-20 19:02:31
725
为什么需要学习JavaScript_掌握JavaScript能带来哪些职业机遇 JavaScript是现代前端开发的基石且日益成为全栈及跨领域岗位的硬性要求，支撑网页交互、主流框架、构建工具、Node.js服务端开发、自动化测试、数据可视化及浏览器插件等全场景应用。
2025-12-20 19:01:47
467
javascript的Node.js是什么_如何构建后端应用？ Node.js是基于ChromeV8引擎的JavaScript运行时，支持事件驱动、非阻塞I/O的单线程模型，适合I/O密集型后端服务；通过npm集成丰富生态，可快速构建API服务，并扩展数据库、中间件、环境配置等能力。
2025-12-20 18:59:02
748
javascript类型转换如何发生_隐式转换和显式转换是什么 JavaScript类型转换分隐式（自动）和显式（主动）两种：隐式易致bug，如+号拼接或==宽松比较；显式用String()/Number()/Boolean()等更安全；应优先使用===、显式转换和明确判断避免陷阱。
2025-12-20 18:58:14
256
什么是展开运算符_Javascript中它有什么用 展开运算符（...）用于将可迭代对象或对象打散为独立元素，支持数组复制合并、函数调用传参、对象浅拷贝与属性合并，但仅限一层浅拷贝，不支持null、undefined及非可迭代对象。
2025-12-20 18:57:43
733
什么是javascript响应式编程_RxJS基础是什么？ RxJS是JavaScript响应式编程主流库，以“数据流”为核心思维模型，将异步事件等视为随时间推送值的流，通过Observable、Observer、Subscription三大基石和管道式操作符实现声明式处理。
2025-12-20 18:57:07
226
Javascript如何实现语音识别_Web Speech API怎么用？ JavaScript语音识别主要依靠WebSpeechAPI的SpeechRecognition接口，仅Chromium内核浏览器原生支持，无需后端、不传语音至服务器；需HTTPS环境、用户授权麦克风，支持中文但精度有限。
2025-12-20 18:52:02
941
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部