深入理解 NodeList

【深入理解 NodeList】的更多相关文章

在web前端编程中,我们通常会通过document.getElementsByTagName的方法取出一组相同标签的dom元素,比如: var list = document.getElementsByTagName("li"); for (i = 0; i < list.length; i++) { var lis = list[i];//取某一个元素 //more code } 首先说明:通过这种方法获取的这一组dom元素,不是数组(Array),而是NodeList,Nod…

怎样理解NodeList的动态集合与静态集合

NodeList 有两种, 一种是动态集合, 一种是静态集合, 所谓动态集合, 主要是 Node.prototype.childNodes; 返回的子节点集合对文档的节点增删改会即时改变; 而静态集合则不会, 比如document.querySelectorAll(); 动态集合: 静态集合: …

使用NodeList

理解NodeList.NamedNodeMap和HTMLCollection是整体透彻理解DOM的关键. 这三个集合都是“动态”的,也就是说:每当文档结构发生变化时,他们都会得到更新,他们始终保存的都是最新最准确的信息. 从本质上说:所有NodeList对象都是在访问DOM文档时实时运行的查询. //下面代码会无限循环 var divs = document.getElementsByTagName('div'); var i, div; for(i=0;i<divs.length;i++){…

DOM中的NodeList与HTMLCollection

最近在看<Javascript高级程序设计>的时候,看到了这样一句话:“理解NodeList和HTMLCollection,是从整体上透彻理解DOM的关键所在.”,所以觉得应该写一篇关于NodeList和HTMLCollection的博客来好好了解和总结下这方面的知识点. NodeList NodeList是一个节点的集合(既可以包含元素和其他节点),在DOM中,节点的类型总共有12种,通过判断节点的nodeType来判断节点的类型. 我们可以通过Node.childNodes和documen…

js复制对象和节点类型和NodeList

1. myList.cloneNode(true); 在参数为true的情况下,执行深复制,也就是复制节点及其整个子节点树,包括属性 2. myList.cloneNode(false); 在参数为false 的情况下,执行浅复制,即只复制节点本身,包括属性 cloneNode()方法不会复制添加到DOM 节点中的JavaScript 属性,例如事件处理程序等.这个方法只复制特性.(在明确指定的情况下也复制)子节点,其他一切都不会复制.IE 在此存在一个bug,即它会复制事件处理程序,所以我们建…

Js杂谈-DOM

前言对jQuery的依赖.导致js的原生方法的淡忘,如果是封装自己的库,那势必要用到js的许多原生方法.从Jquery强大的dom处理开始,我们开始回顾javascript那些古老而坚挺的DOM方法.先从0级DOM入手. 1 节点类型 nodeType name 1 element_node 2 attribute_node 3 text_node 4 cdata_section_node 5 entity_reference_node 6 entity_node 7 processing_i…

DOM之操作技术

1.1 动态脚本动态加载的外部JS文件能够立即运行.难点在于如何知道脚本加载完成了?可以通过事件来检测.IE对待<script>元素特殊性,不允许DOM访问其子节点.使用元素的text属性来指定JS代码. 1.2 动态样式 IE对待<style>元素特殊性,不允许DOM访问其子节点.使用元素的styleSheet属性来指定代码.小心IE的styleSheet属性,在重复设置和设置为空时,可能导致浏览器崩溃. 1.3 操作表格为了方便创建表格,HTMLDOM为<table&…

JavaScript 闯关记

DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API.DOM 描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 节点层次 DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息及(或)标记.每个节点都拥有各自的特点.数据和方法,另外也与其他节点存在某种关系.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构.以下面的 HTML 为例: <html>…

JavaScript高级程序设计26.pdf

DOM操作技术动态脚本指得是页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本,跟操作HTML元素一样,创建动态脚本也有2种方式:插入外部文件和直接插入JavaScript代码 var script=document.createElement("script"); script.type="text/javascript"; script.src="client.js"; document.body.appendChild(sc…

《JavaScript 闯关记》之 DOM（下）

Element 类型除了 Document 类型之外,Element 类型就要算是 Web 编程中最常用的类型了.Element 类型用于表现 XML 或 HTML 元素,提供了对元素标签名.子节点及特性的访问.Element 节点具有以下特征: nodeType 的值为1: nodeName 的值为元素的标签名: nodeValue 的值为 null: parentNode 可能是 Document 或 Element: 其子节点可能是 Element.Text.Comment.Proces…