前言 我们平常说的查找元素 和 节点到底有什么区别？为什么有时候返回HTMLCollection ，有时候返回NodeList？ HTMLCollection 和 NodeList 的区别又是什么？...DOM提供两种集合对象，用于实现这种节点的集合：NodeList和HTMLCollection。 HTMLCollection 是表示 HTML 元素的集合。...对象 HTMLCollection只能包含 元素节点(ElementNode)类型的节点, 以下方法返回HTMLCollection对象 document.getElementsByClassName...(element.childNodes.length); // 5 HTMLCollection与NodeList区别 HTMLCollection 是表示 HTML 元素的集合，元素也是节点的一种...，也就是元素节点，NodeList 是表示节点的集合 我们可以理解为 HTMLCollection 是 Nodelist 集合的一种。
拷贝一个节点相当于将一个节点作为对象存放在内存中，这个对象可以被其他的诸如 appendChild 等操作来使用。...而节点删除则只能通过一个 removeChild 来实现，所以要删除某个元素，首先要获取这个元素的父节点。...我们使用以下方法来实现，参考代码： 代码实现 // 复制一个节点追加给另外一个节点 var shan = document.getElementById("north").childNodes[1];...shan.cloneNode(true); var south = document.getElementById("south"); south.appendChild(copy_li); // 节点删除...shan.parentNode.removeChild(shan); 节点内容 山东 吉林 辽宁 </
第四个 第五个 //ul的父级节点...console.log(my$("uu").parentNode); //ul的父级元素 console.log(my$("uu").parentElement); //ul的所有子级节点...console.log(my$("uu").childNodes); //ul的所有的子元素 console.log(my$("uu").children); //ul中第一个子节点...); //某个li的后一个兄弟节点 console.log(my$("three").nextSibling); //某个li的后一个兄弟元素 console.log(my$("three...").nextElementSibling); //总结:获取节点的代码,谷歌是获取节点,获取元素的代码,谷歌是获取元素 //但是,到了IE8中,获取节点的代码是获取元素,获取元素的代码,不支持
它也是一个可以在你的“家庭私有云”中使用的很好的工具，可以为你的家庭实验室的虚拟机和物理机的初始设置和配置添加一点自动化 —— 并了解更多关于大型云提供商是如何工作的信息。...关于更多的细节和背景，请看我之前的文章《在你的树莓派家庭实验室中使用 Cloud-init》。...你还将学习如何审查客户端从 Web 服务中请求的内容，并修改 Web 服务的容器，以提供基本的、静态的 Cloud-init 服务。...它可以包含在树莓派和单板计算机的磁盘镜像中，也可以添加到用于 配给(provision)虚拟机的镜像中。...在数据源稍显复杂的情况下，将新的物理（或虚拟）机器添加到家中的私有云中，可以像插入它们并打开它们一样简单。
Node类型 JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。 （1）nodeType属性：用于表明节点的类型。...技巧：由于跨域安全限制，来自不同子域的页面无法通过JavaScript通信。而通过将每个页面的document.domain设置为相同的值，这些页面就可以互相访问对方包含的JavaScript对象了。...动态脚本 在元素添加到页面之前，是不会下载外部文件的。...动态样式 同动态加载脚本类似，添加到页面之后才会加载资源。...元素的指针 tHead (若有)保存着对元素的指针 tFoot (若有)保存着对元素的指针 tBodies 一个所有元素的HTMLCollection
节点的分类 元素节点 属性节点 文本节点 节点的操作 元素节点操作 通过元素的id来获取相应的节点 document.getElementById(""); 通过元素的标签名来获取节点 document.getElementsByTagName...注意：除了通过id选择节点的方式拿到的是一个确定的节点，其余的方式拿到的都会是一个数组，那么获取数组里面对应的节点需要用索引来取并且在Elements后面有s 例如：var body = document.ElementsByTagName...javascript"> var div = document.getElementById("div"); div.innerHTML = "hello</h1...innerText var div = document.getElementById...把这里搞清楚剩下的就是靠大家的细心了，有一些操作是针对父级节点的，例如node.appendChild()，还有很多，一定要分清楚父级节点和子级节点的关系，才能玩转DOM节点操作。
第1章 文档对象模型 (DOM) 1.1 基本概念 DOM是JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。...它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作(增删改查)。...JavaScript是一门编程语言，而DOM是浏览器对HTML文档结构化后的一个模型; 严格地说，DOM不属于JavaScript，但是我们最常用的就是使用JavaScript操作DOM; ?...，返回值是一个类似数组的HTMLCollection对象；匹配失败，返回[] 参数是想要获取节点的具体节点名称，就是 标签名； var p = document.getElementsByTagName...如果没有发现匹配的节点，则返回null； document.querySelectorAll方法与querySelector用法类似， 区别是返回一个类似数组的HTMLCollection对象，包含所有匹配给定选择器的节点
Node类型 JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。 （1）nodeType属性：用于表明节点的类型。...技巧：由于跨域安全限制，来自不同子域的页面无法通过JavaScript通信。而通过将每个页面的document.domain设置为相同的值，这些页面就可以互相访问对方包含的JavaScript对象了。...动态脚本 在元素添加到页面之前，是不会下载外部文件的。...动态样式 同动态加载脚本类似，添加到页面之后才会加载资源。...cells()一个保存着元素中的单元格的HTMLCollection
1.概述 1.1DOM DOM是JavaScript操作网页的接口，全称为“文档对象模型”（Document Object Model）。文档对象模型 (DOM) 是HTML和XML文档的编程接口。...要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。...document对象包含了文档的基本信息，我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。 1.3节点 DOM的最小组成单位叫做节点（node）。...children：非标准属性，它返回指定元素的子元素HTMLCollection集合，该集合只包含HTML节点，不包含文本节点。...返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
Author：Mr.柳上原 付出不亚于任何的努力 愿我们所有的努力，都不会被生活辜负 不忘初心，方得始终 不常用的东西很快就找不到了 不常写的方法很快就忘记了 字符串和数组的方法 大家还记的几个 <!...("box"); // childNodes兼容性：在低版本IE下只返回元素节点 console.log(box.childNodes); // box的所有子节点（包括注释，文本） // children...返回元素节点 console.log(box.children); // box的所有子元素节点 // nodeType 返回节点类型：元素节点type值为1，文本节点type值为3 // nodeName...返回节点名字（大写） console.log(box.children[0].nodeName.toLowerCase() === "div"); // box的第一个元素节点的名字 // tagName...返回元素节点名字（大写） // getAttributeNode 返回元素的属性节点 console.log(box.getAttributeNode("id")); // box的id属性节点
16个工程必备的JavaScript代码片段，听过这样起博客标题可以提高阅读量。 1....下载后端返回的流 数据是后端以接口的形式返回的,调用1中的download方法进行下载 download('http://111.229.14.189/gk-api/util/download?...这个方法的实现是从Lodash库中copy的 /** * * @param {*} func 要进行debouce的函数 * @param {*} wait 等待时间,默认500ms * @param...，可以自己在代码中试一下 7 节流 多次调用方法，按照一定的时间间隔执行 这个方法的实现也是从Lodash库中copy的 /** * 节流，多次触发，间隔时间段执行 * @param {Function...个在这里： 8个工程必备的JavaScript代码片段（建议添加到项目中） 以上代码片段都经过项目检测，可以放心使用在项目中。
") getElementsByClassName() class 通过页面元素的class属性定位元素 HTMLCollection getElementsByClassName("pElements...") getElementsByTagName() 元素名 通过元素的元素名定位元素 HTMLCollection getElementsByTagName("p") querySelector() css...元素 images 获取HTML页面中的元素 NodeList与HTMLCollection的区别 二者都是集合 NodeList又称静态NodeList，就是就是对文档对象模型的任何改动都不会影响集合的内容...HTMLCollection又成动态NodeList，所谓动态的 Nodelist集合，就是如果文档中的节点树发生变化，则已经存在的 Nodelist对象也可能会变化。...将创建的元素节点添加到页面中去 select.appendChild(optionElement) 第二种 // 1.
利用节点间的层次关系获取节点： 上一节讲了3中获取的方式： * ※※一、绝对获取，获取元素的3种方式：—Element * 1、getElementById(): 通过标签中的id属性值获来取该标签对象...对于表格，还要注意有一个隐含的父节点。...="text/html; charset=utf-8" /> /* * ※※一、绝对获取，获取元素的3种方式：---Element...//上面是偷懒写法，如果想写得兼容性好些，应该还用for循环遍历strNodes[x]的所有孩子节点且过滤掉#text节点，获取第一个非空白子节点的innerText for..." value="克隆替换节点" onclick="updateNode2()" /> //添加一个文本节点
dotted #999; } #img{ margin-left: 10px; margin-top: 0px; } //保存位置的状态值 var pos={ parent_top:0, parent_left:0, cur_top:0, cur_left:0 } function...allowDrop(ev){ //ev是事件对象 ev.preventDefault(); //取消事件已经关联的默认活动 } function drag(ev){ /.../dataTransfer是一个媒介，将目标对象放入媒介 //dataTransfer对象用来保存被拖动的数据，仅在拖动事件有效 //这里将被拖动元素的id保存为名为Text的键值对中...ev.dataTransfer.getData("Text"); //从媒介中获取目标对象 var elem=document.getElementById(data); //这里不能这样使用，因为offset*的值是只读的
集合HTMLCollection[1], 整个文件结构都会被搜索，包括根节点。...HTMLCollection 还有一点需要注意： HTMLCollection 对象是一种类数组对象，可以通过位置来访问。...请注意，虽然可以通过方括号语法来访问 HTMLCollection 的值，而且这个对象也有length属性，但是它并不是Array的实例。...6 入门 - 字符串的新增方法[2] JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。...s.startsWith('world', 6) // true s.endsWith('Hello', 5) // true s.includes('Hello', 6) // false map JavaScript
） 松散耦合： HTML 或者 CSS 与 JavaScript 的解耦（如 CSS 仍然保留样式信息，通过改变类名来改变样式）； 事件监听器和应用逻辑的解耦（监听器只发挥监听作用，而将应用逻辑独立成可以复用的函数...根据作用域链查找的原理，访问全局变量速度会较慢 避免 with 语句。会延长作用域链长度 避免多次的属性查找。...对于已经加载出来的 dom 的直接操作（现场更新）会影响性能，可以考虑在新建的 fragment 文档片段中进行修改，之后只进行一次现场更新。...innnerHTML 比普通的创建 dom 节点的方法更快 同胞节点有相同的事件时利用事件委托冒泡给父节点，父节点的事件监听器里结合 switch 进行 event.target 判断 访问 HTMLCollection...的属性或者方法时，都是在文档上进行查询，这个过程会有性能开销，应该最小化访问 HTMLCollection 的次数。
这意味着IE中的DOM对象与原生JavaScript对象的行为或活动特点并不一致。 DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。...javascript中所有的节点类型都继承自Node类型，所有节点类型都共享着相同的基本属性和方法。 1....方法： hasChildNodes() 在包含一个或多个子节点的情况下返回true 2) Document类型 javascript通过使用Document类型表示文档。...form对象，返回HTMLCollection类数组对象 links 获取文档中所有带href属性的元素 2....getElementsByTagName() 参数为要取得元素的标签名，返回包含0个或者多个元素的NodeList，在HTML文档中该方法返回的是HTMLCollection对象，与NodeList非常类似
，返回类型为HTMLCollection。...=0,n=t2List.length;i<n;++i) console.log(t2List[i]); // HTMLCollection的prototype中没有forEach方法，遍历需要使用...// HTMLCollection的prototype中没有map方法，也需要使用Array的prototype中forEach通过call绑定对象实例并传参 Array.prototype.map.call...(v) ); getElementsByTagName 通过标签的名字来定位，返回文档中指定标签的元素的引用，返回类型为HTMLCollection。...t2List,v => console.log(v) ); // HTMLCollection的prototype中没有map方法，也需要使用Array的prototype中forEach通过
仅仅是表面填补泥而已，返回的为节点数组并非HTMLCollection类型对象，因此缺失只读、实时同步、item和namedItem等特性。...，但又引入了新的问题，那就是getElementsByName的返回值不再是HTMLCollection类型，因此失去了与文档节点信息实时同步、只读、item成员方法、namedItem成员方法的特性。...而在IE5678下，通过调试工具发现DOM树中依然包含嵌套的form元素节点，但其下的子节点被提取到上一级。...而IE9下的嵌套form节点在DOM树中被完整的构建，因此不仅DOM中包含嵌套的form节点，而且其子节点并没有被提取到上一级。...0 2. form节点下表单节点的差异 通过 form元素.length 可获取其下的 input节点 个数，通过 form元素[{Number} 索引] 获取指定位置的 input元素 。
document.createElement('div'); for(let i=0;i<divs.length;i++){ divs[i].appendChild(btn); } 表面上这段代码为每个 class属性为 test的元素添加一个...这其实是因为一个元素只能有一个父元素，上面这段代码试图将 btn添加到多个元素中。 而这与一个元素只能有一个父元素相矛盾，自然就添加不了。...解决办法也很简单，就是将 btn的声明语句放到循环里面去，这样每次添加的 btn都是不同的元素，自然也就没有上面的问题了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
