dom的HTMLCollection和length不一致

2024-09-05

HTMLCollection 对象详解，以及为什么循环获取的dom合集操作可能会出现下标不正确的情况？

有时候循环dom合集,然后操作其中的某些dom之后,发现下标不正确了比如我们要删除一个dom合集的时候: var selectDom = document.getElementsByClassName("active"); for(var i=0; i<selectDom.length; i++){ content.removeChild(selectDom[i]); } 上面代码中,我们获取了选中项(class为active),然后循环进行删除,但是最后发现,只能删除一部分d

DOM中XMLDOMnodelist的length属性的表示是：（选择1项）

DOM中XMLDOMnodelist的length属性的表示是:(选择1项) A. 该对象中文本字符的长度 B. 该对象中元素节点的数量 C. 该对象中节点的数量 D. 该对象中文档对象的数量解答:A length 属性返回注释节点中的文本长度,以字符数计.

js中DOM集合的动态特性

先引出一个问题:通过调用getElements*()这样的方法返回来类(伪)数组,能对其本身的元素进行排序吗? 答案是不能,因为这些对象的都是NodeList . NamedNodeMap 或 HTMLCollection的实例.他们都是“动态的”.所谓动态就是每次调用实例上的方法,都会运行一次基于文档的查询.下面的代码会造成死循环 1 var oDivs = document.getElementsByTagName("div"); 2 for (var i = 0; i <

浅谈JavaScript和DOM中的类数组对象

JavaScript是一门弱类型语言,它的数据类型分为两大类:简单数据类型(5种:Undefined.Null.Boolean.Number.String)和复杂数据类型(1种:Object).Object是ECMAScript中使用最多的一个类型,所有的引用类型的值都是Object类型的实例.引用类型,本质上是一种数据结构,用于将数据和功能组织在一起.对象是某个特定引用类型的实例. 在JavaScript中,有一种特殊的对象,被称为类数组(array-like)对象,其在书中的定义为: 拥有l

(85)Wangdao.com第十八天_JavaScript NodeList 接口，HTMLCollection 接口

NodeList 接口 HTMLCollection 接口节点都是单个对象,有时需要一种数据结构,能够容纳多个节点 DOM 提供两种节点集合,用于容纳多个节点:NodeList 和 HTMLCollection 这两种集合都属于接口规范. 许多 DOM 属性和方法,返回的结果是 NodeList 实例或 HTMLCollection 实例. 主要区别是 NodeList 可以包含各种类型的节点 HTMLCollection 只能包含 HTML 元素节点. NodeList 接口

JavaScript参考DOM部分

目录 DOM完整版 DOM 介绍节点节点树 Node接口属性方法 NodeList 接口,HTMLCollection 接口介绍 NodeList.prototype.length NodeList.prototype.forEach() NodeList.prototype.item() NodeList.prototype.keys(),NodeList.prototype.values(),NodeList.prototype.entries() HTMLCollection 接

Dom中的一些接口

节点都是单个对象,有时需要一种数据结构,能够容纳多个节点.DOM 提供两种节点集合,用于容纳多个节点:NodeList和HTMLCollection.这两种集合都属于接口规范.许多 DOM 属性和方法,返回的结果是NodeList实例或HTMLCollection实例.主要区别是,NodeList可以包含各种类型的节点,HTMLCollection只能包含 HTML 元素节点. NodeList 接口 NodeList实例是一个类似数组的对象,它的成员是节点对象.通过以下方法可以得到NodeLi

HTML DOM 教程

HTML DOM DOM 教程 DOM 简介 DOM 节点 DOM 方法 DOM 属性 DOM 访问 DOM 修改 DOM 内容 DOM 元素 DOM 事件 DOM 导航一,HTML DOM 简介 DOM即文档对象模型(Document Object Model). DOM 定义了访问 HTML 和 XML 文档的标准:“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式.” HTML DOM 是关于如何获取.修改.添加或删除 H

HTML,javaScript,DOM详解

HTML DOM 教程 DOM 教程 DOM 简介 HTML DOM 定义了访问和操作 HTML 文档的标准方法. DOM 将 HTML 文档表达为树结构. HTML DOM 树 HTML DOM 简介 HTML DOM 定义了访问和操作 HTML 文档的标准. 您应该具备的基础知识在您继续学习之前,您需要对以下内容拥有基本的了解: HTML CSS JavaScript 什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: “W3

读Zepto源码之操作DOM

这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本本文阅读的源码为 zepto1.2.0 .remove() remove: function() { return this.each(function() { if (this.parentNode != null) this.parentNode.removeChild(this) }) }, 删除当前集合中的元素. 如果父

HTML DOM - 导航

HTML DOM 节点列表长度 length 属性定义节点列表中节点的数量. 您可以使用 length 属性来循环节点列表: x=document.getElementsByTagName("p"); for (i=0;i<x.length;i++) { document.write(x[i].innerHTML); document.write("<br />"); } <script> x=document.getElementBy

day4 DOM，BOM

1. BOM编程 1.1. BOM编程基础全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的. 为了便于对浏览器的操作,javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器. 1.2. BOM对象: 1.3. window 对象 Window 对象是 JavaScript 层级中的顶层对象. Window 对象代表一个浏览器窗口或一个框架.

【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装

// DOM框架(选择器框架) (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现有的元素集合中添加元素节点(修改this的内容) * @param dom * @return {add} */ add: function (dom) { // 1. 项伪数组中添加元素 this[this.length] = dom; // 2. 数组的长度也需要改变了 this.length+

DOM导航与DOM事件

HTML DOM 导航通过 HTML DOM,能够使用节点关系在节点树中导航. ㈠HTML DOM 节点列表 getElementsByTagName() 方法返回节点列表.节点列表是一个节点数组. 示例:下面的代码选取文档中的所有 <p> 节点: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>

jQuery 第二章实例方法 DOM操作选择元素相关方法

进一步选择元素相关方法: .get() .eq() .find() .filter() .not() .is() .has() .add()集中操作 .end()回退操作 .get() $(".class").get() 可以填 $()选择器选出来的dom 索引, 0 1 2 3 -1 -2 , 不填取全部dom, 但是取出来的dom 不再是jquery的对象,而是原生dom, 用get()取出来的 dom 都为原生dom: 现在会用了,但是咱们不能单

面试题<初级>

INTERVIEW .markdown-body ul pre code { background:red; font-size:40px; } @code-char:"```" code:before,code:after{ concent:@code-char; background:red; } JavaScript的typeof返回的数据类型 object number function boolean underfind string typeof isNaN => f

IE6 Must Die

最近 Twitter 上很多人在推一个名为 IE6 Must Die 的活动, 参与的朋友可以通过头像转换服务在自己的头像上加上一个禁止 IE6 的图标, 很是拉风. Internet Explorer 6 是曾经浏览器的霸主, 击垮 Netscape 并最终占据 95% 的浏览器市场. 但如今已经功能性能落后, 还需要特殊照顾, 被称为阻碍网络技术向前发展的障碍. 为了推动 IE6 的灭亡, NeoEase 即日起, 会为 IE6 用户进行更新提示, 提示信息会显示在页面的右下方, 每星期一次

Javascript performance

I just went through some vedio related to javascript performance which is great, Here is the notes I made: Scope management 1. Identifier Resolution Every time the function is executed, the execution context is created. The scope chain in the executi

JavaScript基础笔记（十四）最佳实践

最佳实践一)松散耦合 1.解耦HTML/JavaScript: 1)避免html种使用js 2)避免js种创建html 2.解耦CSS/JS 操作类 3.解耦应用逻辑和事件处理以下是要牢记的应用和业务逻辑之间松散耦合的几条原则:勿将 event 对象传给其他方法:只传来自 event 对象中所需的数据:任何可以在应用层面的动作都应该可以在不执行任何事件处理程序的情况下进行:任何事件处理程序都应该处理事件,然后将处理转交给应用逻辑.牢记这几条可以在任何代码中都获得极大的可维护性的改进,并且为进

性能（js）

1.避免全局查找: <script type="text/javascript"> function updateUI(){ var imgs=document.getElementsByTagName("img"); for(var i=0,len=imgs.length;i<len;i++){ imgs[i].title=document.title+"image"+i; } var msg=document.getElem

getElementsByClassName的原生实现

DOM 提供了一个名为 getElementById() 的方法,这个方法将返回一个对象,这个对象就是参数 id 所对应的元素节点.另外,getElementByTagName() 方法会返回一个对象的数组,每一个对象分别对应着文档里有给定标签的一个元素.这个方法的参数是 html 标签的名字.现在我们考虑一个问题,能不能通过标签的类名class name来获取该对象呢?下面是这个猜想的程序实现(支持多个class查询和在某个范围内进行查询): /* * 根据元素clsssName得到元素集合

dom的HTMLCollection和length不一致

热门专题