js碎片

function getByClass(oParent,nClass){
    var eLe = oParent.getElementsByTagName(‘*‘); /* 获取oParent这个父级元素的所有子集 */
    var aRrent  = [];  /* 创建一个数组 */
    for(var i=0; i<eLe.length; i++){  /* 遍历子集 */
        if(eLe[i].className == nClass){ /* 元素的classname与方法传入参数做对比 */
            aRrent.push(eLe[i]); /* 符合条件则在数组的末尾添加该元素,并返回新的长度 */
        }
    }
    return aRrent;
}

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。它直接修改 arrayObject,而不是创建一个新的数组。

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。直接修改原数组对象。注释:unshift() 方法无法在 Internet Explorer 中正确地工作!

pop() 方法用于删除并返回数组的最后一个元素。pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。

scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中,FireFox差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

时间: 2024-11-05 22:38:46

js碎片的相关文章

js碎片节点

//文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素提高页面效率 var d1 = new Date(); //创建十个段落,常规的方式 for(var i = 0 ; i < 1000; i ++) { var p = document.createElement("p"); var oTxt = document.createTextNode("段落" + i); p.appendChild (oTxt); doc

Vue.js优雅的实现列表清单

    一.Vue.js简要说明 原文章链接 http://www.cnblogs.com/zjf-1992/p/7834797.html Vue.js (读音 /vju?/) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时,会自动更新到ViewModel.反之亦然,View与ViewModel之间通过数据双向绑定(data-binding)建立联系,如下图所示 Vue.js通过MVVM模式将视图与数据分成两部分(

crawler 使用jQuery风格实现

以前写过java版的crawler,最近看了Groovy的XmlSlurper,效果还是不太满意,直到这篇文章启发了我:how-to-make-a-simple-web-crawler-in-javascript-and-node-js.于是就想到使用jQuery风格的js来解析html并获取数据,把这样的js碎片逻辑作为配置从而支持更灵活的自定义. crawler的原始构思及说明: crawlConfig,配置crawler:crawl=code.js,新配置的js脚本需要人工审核之后才能用于

js节点使用 碎片节点

js节点,都知道3大类: 元素节点 属性节点 文本节点 常用的呢元素节点,属性节点.还有俩方法,setAttribute()  getAttribute(),设置和获取属性值 在实际工作中呢,长长我们从后台拿到一串数据,要在前台页面展示.我们写好一个html母版后,用for循环,在母版中加入数据,最后插入页面.这个呢就是思路! 为了快捷方便,常常这么干, var str=""; for(var i=0;i<data.length;i++){ str+="<div&

JS——普通添加li元素和文件碎片添加li元素

创建10000个li元素案例,把普通方法和碎片化方法进行比较 (1)普通添加li元素案例,代码如下图: 运行结果见链接: https://ytraister.github.io/js-text/js%E4%BB%A3%E7%A0%81%E6%BC%94%E7%A4%BA/JS%E2%80%94%E2%80%94%E6%99%AE%E9%80%9A%E6%B7%BB%E5%8A%A0li%E5%85%83%E7%B4%A0%E5%92%8C%E6%96%87%E4%BB%B6%E7%A2%8E%E

【JS学习笔记】DOM操作应用-创建、插入和删除元素;文档碎片

一.创建.插入和删除元素 (1)创建DOM元素 createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点 例子:为ul插入li <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="htt

js文档碎片

今天看视频发现个有意思的东西,叫做文档碎片?文档碎片是什么呢?先卖个关子. 平常我们在向文档中插入节点的时候可能创建了节点就马上插入父元素,因此浏览器会一直渲染.插入的数量少可能还没影响,可是当插入的节点成千上万的时候,会发现浏览器卡顿了......如何解决这种问题呢?这里我们就要用到文档碎片了.在创建节点之后我们可以先把节点append在文档碎片上,在将所有的节点append之后再将文档碎片append在父元素上,理论上会快一些.经测试,有些时候要快一点^_^...... 1.普通插入 <in

js性能优化篇创建文档碎片

大家都知道,大量的操作DOM会引起页面的渲染变慢,文档碎片是指一个临时的文档,把创建的dom放到文档里面,不要每次操作都操作DOM,提高页面的效率.下面我们就来看一下如何运用创建文档碎片. 首先,我们了解下向页面创建dom发生了什么. for(var i=0;i<5000;i++){ var oSpan=document.createElement('span') document.body.appendChild(oSpan) } 如果我们向以上代码一样,向页面插入很多dom元素,这种渲染的过

JS JavaScript中的文档碎片 DocumentFragement JS性能优化

文档碎片是什么: 如果我们要在一个ul中添加100个li,如果不使用文档碎片,那么我们就需要使用append经常100次的追加,这会导致浏览器一直不停的渲染,是非常消耗资源的.但是如果我们使用文档碎片了,我们可以先将100个li添加到文档碎片中,然后直接把这个文档碎片追加到ul中即可.所以文档碎片其实就是一个临时的仓库. 如下代码在document.body中添加5个span for(var i=0;i<5;i++) { var op = document.createElement("s