firstElementChild&&firstChild

【firstElementChild&&firstChild】的更多相关文章

js下firstElementChild firstChild 以及childNodes和children方法

一. <div> <p>123</p> </div> 在上面这段代码中,如果使用以下js代码 var oDiv=document.getElementByTagName("div")[0]; alert(oDiv.firstChild.nodeName) 在ie9以下,alert出来的是p(p标签名字),但是在现代浏览器下,比如Chrome,FF,ie11等等,由于会把<div> <p>两个标签之间的空白节点也…

firstElementChild&&firstChild

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box"> <p>p1</p> <p>p2</p> <p>p3</p> <p>p4</p…

DOM编程的性能问题

用脚本进行DOM操作的代价很昂贵,它是富Web应用中最常见的性能瓶颈. 浏览器中的DOM:天生就慢 DOM(文档对象模型)是独立于语言的,但在浏览器中的接口是用JavaScript实现的.两个相互独立的功能只要通过接口彼此连接,就会产生消耗. 访问DOM元素是有代价的,修改元素则更甚. function innerHTMLLoop(){ for(var count = 0; count < 15000; count++){ document.getElementById('here').inne…

高性能javascript学习笔记系列(3) -DOM编程

参考高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和javascript独立实现,这意味着当我们通过javascript操作DOM的时候势必的产生性能上的开销,因此提升页面性能的的思路是尽可能的减少DOM操作或者优化DOM操作 DOM的访问与修改 (1)减少频繁的读取DOM元素 (1)for(var i = 0;i < 10;i++) { documen…

DOM: 如何获取元素下的第一个子元素

Element.firstChild ?,是的,这是第一种方法,当然,通常来说支持 W3C 规范的浏览器,如 Firefox 等取到的应该是 TEXT_NODE.很早之前,或者说现在最流行的方法可能是: // 让我们假设要将它抽象出来,变成一个 util 对象的方法 var util = {}; util.first = function(element) { if(!element) return; var first= element.firstChild; // 处理 w3c 浏览器中第一…

javascript各种兼容性问题，不断更新

ie6-ie8 不支持textContent支持innerTextchrome 支持textContent innerTextfireFox 仅支持textContent不支持innerText <body> <div id="s1"> <p>ceshi </p> </div> </body> <script> var s1=document.getElementById('s1'); con…

[妙味DOM]第一课：DOM基础概念、操作

知识点总结 childNodes.children子节点列表集合.nodeType节点类型.nodeName.nodeValue.attributes属性列表集合 childNodes和children都只包含子节点,不包含孙节点. 区别: childNodes-- 标准下:包含元素和文本节点,也会包含非法嵌套的子节点非标准下:只包含元素节点,IE7以下不会包含非法嵌套的子节点(IE6) children-- 标准模式下和非标准模式下:只包含元素节点(推荐使用此方法) nodeType 为节点…

Dom2016/4/20

childNode:标准情况下:包括文本节点和元素节点非标准下:只包括元素节点在标准情况下:包含非法嵌套的子节点. 非标准下:ie7一下的版本不包含非法嵌套的子节点 DOm的节点类型:12种元素节点 1 属性节点 2 文本节点 3 元素.nodeType表示当前节点的元素类型元素.attributes<ul id='div1' type=''>里面的id以及type就是属性 oul.attribute[0].name为:id oul.attribute[0].value为:dive…

JavaScript高级程序设计-10.11: DOM及其扩展

什么是DOM? DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 文档节点(document)是每个文档的根节点.文档元素是文档的最外层元素,文档中的其他所有元素都包含在文档元素之中.在HTML页面中,文档元素始终都是元素.在 XML 中,没有预定义的元素,因此任何元素都可能成为文档元素. 每一段标记都可以通过树中的一个节点来表示: HTML 元素通过元素节点表示,特性(att…

性能优化之数据存储&DOM编程

多读书多看报数据存储 ·在javascript中,数据存储的位置会对代码整体性能产生重大的影响. ·数据存储共有4种方式:字面量.变量.数组.对象成员. ·要理解变量的访问速度,就要理解作用域.由于局部变量处于作用域的起始位置,因此访问速度比访问跨域作用域变量(即除起始位置之外的外层作用域变量)更快.即变量处在作用域的位置越深,访问速度越慢.这也就说明,访问全局变量的速度是最慢的. 总的来说,字面量和局部变量的访问速度快于数组和对象成员的访问速度. 因此,常见的一些提高数据访问速度的方…

高性能javascript笔记

----------------------------------------------------------- 第一章加载和执行 -------------------------------------1.脚本位置浏览器在遇到<script>标签时会等待脚本下载完并执行完才会继续渲染页面因为js代码有可能会改变dom结构,所以需要等待js的执行完成遇到<script>标签 -> 下载脚本 -> 执行脚本 -> 继…

JavaScript 操作DOM对象

1)JavaScript 操作DOM對象 1.DOM:是Document Object Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 CSS-DOM 1.DOM Core DOM Core 不是JavaScript的专属品,任何一种支持DOM的编辑器语言都可以使用它它的用途不仅限于处理一种使用标记语言编写出来的文档如HTML文档 getElementById()/getElementByTagName()等方法都是 DOM C…

js模态窗口返回值(table)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ…

js与jQuery方法对比

javascript与jQuery方法对比jquery对象转dom对象 // 方式一(推荐使用) $("input")[0] // 方式二 $("input").get(0) // 方式三 $("input").eq(0)[0] // 方式四 $("input:eq(0)")[0] var getObjectByJs = document.getElementById("test"); var getO…

Cross-Browser, Event-based, Element Resize Detection(转)

DOM Elements! Y U No Resize Event? During your coding adventures, you may have run into occasions where you wanted to know when an element in your document changed dimensions – basically the window resize event, but on regular elements. Element size…

javascript中children,childNodes等节点属性

1.children与childNodes children: 获取子元素节点,无兼容问题 childnNodes: IE:获取子元素节点非IE(chrome,Firefox等):获取子节点,包括元素节点和文本节点 2.firstChild与firstElementChild firstChild: IE6,7,8:获取第一个子元素节点非IE6,7,8:获取第一个子节点,元素节点/文本节点 firstElementChild: IE6,7,8:不支持非IE6,7,8: 获取第一个子元素节点…

高性能JS-DOM

用脚本进行DOM操作的代价是很昂贵的,它是富web应用中最常见的性能瓶颈.主要有以下三种问题: 访问和修改DOM元素修改DOM元素的样式导致repaint和reflow 通过DOM事件处理与用户进行交互浏览器中的DOM DOM是(Document Object Model)一个与语言无关的.用来操作XML和HTML文档的应用程序接口(Application Program Interface). 尽管DOM与语言无关,但是在浏览器中的接口却是用JavaScript来实现的. 一个前端小知识…

学习总结--Dom

节点(每个元素都会有的3个nodeValue nodeType nodeName:) 1 元素节点 nodeName 元素节点名 nodeType 1 nodeValue null或者undefined 2属性节点 nodeName 属性节点名 nodeType 2 nodeValue 属性节点的值 3 文本节点 nodeName #text nodeType 3 nodeValue 文本值 2 创建元素节点 document.createElement('li') 3创建文本节点docum…

【JS】328- 8个你不知道的DOM功能

最近一直在关注工具,从 React 和 npm-install-everything 中休息一下,看看一些原生的 DOM 和 Web API 的功能,他们可以在没有任何依赖库的浏览器中直接运行. 这篇文章将介绍八个鲜为人知的 DOM 功能,浏览器已经支持了这些功能.为了帮助解释每个功能的工作原理,我将为您用代码来演示这些功能. 这些方法没有陡峭的学习曲线,并且可以为你的项目所用. 你肯定习惯于使用 addEventListener() 将事件添加到Web中的元素,一般情况下, addEventL…

Javascript性能优化阅读笔记

第一章加载和执行大多数浏览器都是用单一进程处理UI界面的刷新和JavaScript的脚本执行,所以同一时间只能做一件事,Javascript执行过程耗时越久,浏览器等待响应的时间就越长. 所以,HTML页面在遇到无阻塞的脚本尽管减少Javascript文件的大小并限制HTTP请求次数仅仅只是第一步,下载单个较大的Javascript脚本执行也许要锁死大量的事件,所以无阻塞的脚本的意义在于页面加载完成之后再下载脚本. 延迟的脚本 <script defer> 这是告知,延迟脚本内的内容不…

关于firstChild,firstElementChild和children

<div> <p>123</p> </div> 在上面这段代码中,如果使用以下js代码 var oDiv=document.getElementByTagName("div")[0]; alert(oDiv.firstChild.nodeName) 在ie9以下,alert出来的是p(p标签名字),但是在现代浏览器下,比如Chrome,FF,ie11等等,由于会把<div> <p>两个标签之间的空白节点也解析出…

兼容firstChild和firstElementChild

1.nextSibling和nextElementSibling 顾名思义,就是找下一个节点 nextSibling在低版本浏览器中可以顺利找到下一个元素节点,而在正常浏览器中找到的包含中间空格. nextElementSibling恰恰相反,低版本不认识,正常浏览器顺利找到下一兄弟节点. 封装nextNode(): function nextNode(obj){ if (!obj.nextSibling) { return false; }; return obj.nextElementSib…