文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

JavaScript高级程序设计-性能整理（二）

比如，jQuery 就完全以 CSS 选择符查询 DOM 获取元素引用，而不是使用 getElementById()和 getElementsByTagName()。...在 document 上调用getElementsByClassName()返回文档中所有匹配的元素，而在特定元素上调用 getElementsByClassName()则返回该元素后代中匹配的元素。...元素在页面上的视觉空间由其高度和宽度决定，包括所有内边距、滚动条和边框（但不包含外边距）。以下 4 个属性用于取得元素的偏移尺寸。...对于使用 CSS 布局的简单页面，这两个函数是很精确的。而对于使用表格和内嵌窗 格的页面布局，它们返回的值会因浏览器不同而有所差异，因为浏览器实现这些元素的方式不同。...在 JavaScript 中，页面中事件处理程序的数量与页面整体性能直接相关。原因有很多。首先，每个函数都是对象，都占用内存空间，对象越多，性能越差。

1.1K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    JS魔法堂：追忆那些原始的选择器

    } 索引); // 获取第一个元素(指定索引值的元素) // IE567下，获取id属性值或name属性值匹配的所有元素，返回一个有函数功能的[object Object]对象 document.all...九、隐藏的武士刀一： document.forms   无论是在w3c还是其他渠道查阅都被告知该函数用于获取页面上所有form元素，当然这点说得一点都没有错，但不够深入。那么如何深入呢？...')和document.getElementsByTagName('link')获取的是HTMLStyleElement类型对象是不同的，在IE5678中是一个类函数，Webkit和Molliza中是一个...该方法在IE5678下返回的是一个类函数，在Webkit、Molliza下返回一个HTMLCollection对象。...该方法在IE5678下返回的是一个类函数，在Webkit、Molliza下返回一个HTMLCollection对象。

    3.3K70

    详析获取标签

    ；另外，在JS中函数名/方法名遵循小驼峰命名法，所以最终的方法名是getElementsByClassName； 在网页中类名是可以重复出现，而ID名是不能重复出现（独一无二）； 既然类名可以重复出现，...浏览器支持程度： Chrome、Firefox、IE9+（包含IE9）都支持 通过标签名获取标签 CSS的三个基本选择器有ID名选择器、类名选择器、标签名选择器，使用ID名和类名都能正常的获取标签，那能不能通过标签名来获取标签...通过name属性获取标签 getElementsByName()与getElementsByClassName()方法相似，但是它是根据元素的name属性获取标签，而不是类名属性。...浏览器支持程度： IE9-（包括IE9）不支持非表单元素的获取，IE10+、Chrome、Firefox支持非表单元素的获取；比如：陈能堡 使用querySelector...没错，今天介绍的querySelector和querySelectorAll就是可以直接使用CSS选择器一样的写法的方法。

    2.7K90

    【Web APIs】DOM 文档对象模型 ③ ( 根据类名获取 DOM 元素 - getElementsByClassName 函数 | 代码示例 )

    1、根据类名获取 DOM 元素 - getElementsByClassName 函数 根据类名获取 DOM 元素 , 需要 使用 HTML5 新增的方法 , Document.getElementsByClassName...函数获取 ; HTML5 必须是 IE9.0 以上的版本才能使用 ; 注意兼容性 : 如果要开发的网页需要兼容老版本的浏览器 , 如 : IE 678 版本 , 则不能使用该方法 ; Document.getElementsByClassName...函数 是 获取 文档中所有指定类名的 DOM 元素 , 得到的结果是 HTMLCollection 伪数组对象 , 其中封装了若干 Element 对象 ; var elements = document.getElementsByClassName...(className); Element.getElementsByClassName 函数 是 获取 Element 元素下的所有 指定类名的 DOM 元素 , 返回结果也是 HTMLCollection..., 直接调用了 document.getElementsByClassName("box") 函数 , 可以获取整个网页中所有 类名为 'box' 的 DOM 元素 ; 代码示例 : <!

    71910

    zepto的构造器$

    在zepto中，通过$来构造对象 $ = function(selector, context){ return zepto.init(selector, context) } 由该函数，实际上...，在调用$函数时相当于调用init方法，接下来看init函数： zepto.init = function(selector, context) { var dom // If nothing...>; 从函数中，如果匹配的是单个的html标签，则直接创建该标签并$实例化，将其转变为一个zepto对象，如果匹配的是另一种情况，即将dom转成一个存储这些节点的数组。...重新回到init函数，接下来的都是一些条件判断，其中有一个是选择器函数 即zepto.qsa zepto.qsa = function(element, selector){ var found...element.querySelectorAll(selector) // Or it's not simple, and we need to query all ) } 这个函数就是单纯的选择器函数

    76420

    框架设计续集（四）

    对于上述的获取元素的方法，其中有缺陷，在于获取元素都是对整个document进行遍历，在性能方面可以优化 给以前的获取元素都加上第三个参数，上下文（context），意思是在指定的区域查找元素 //--...results.push(arr[i]) } } } //console.log(results) return results } //对所有的元素的获取... 我是大标题 //对于先前的获取元素的方法都是在.../* *假如上下文是一个dom对象伪数组 *需要修改的地方就是在调用获取元素函数传的上下文之前进行遍历，选择了在对总的函数进行修改， */ //对所有的元素的获取 function getElem(selector.../* 加入context传进来的是一个选择器字符串（这个才是真正的实用的） */ //对所有的元素的获取 function getElem(selector,context,results){

    55420

    读 Zepto 源码之神奇的 $

    从 return 中可以看出，qsa 其实是根据不同情况分别调用了原生的 getElementById、getElementsByClassName 、getElementsByTagName 和 querySelectorAll...参数 element 开始查找的元素 selector 选择器 变量 found： 已经找到的元素 maybeID = selector[0] == '#'： 判断选择器的第一个字符是否为 #， 如果是...// 如果为单选择器并且不为id选择器并且存在getElementsByClassName方法，进入下一个三元表达式判断 maybeClass ?...zepto.Z 函数 从第一篇代码结构中我们已经知道，其实实现 $ 函数的核心是 zepto.init ，而 zepto.init 最终返回的是 zepto.Z 的结果。...如果存在，则查找 context 下选择器为 selector 的所有子元素: $(context).find(selector) 。

    1K00

    JavaScript之怎样获取元素节点

    他是document对象特有的函数,这个函数的参数只有一个,只能是你想要获得的元素的ID值,这个值必须放在单引号或者双引号里面。...注意:JavaScript语言区分字母大小写,所以在写getElementById千万别写成getElementByid,这样得不到你想要获得的元素对象。...也就是说返回的是所有匹配的元素所组成的一个元素数组。。 他是document对象特有的函数,这个函数的参数只有一个,只能是你想要获得的元素的标签名,这个值必须放在单引号或者双引号里面。...但是某些DOM可能还没有实现(基本都已实现),因此在使用的时候要当心。  ...DOM提供了一个名为getElementsByClassName()的方法,这个方法返回一个与括号里有着一样类名的元素数组对应的对象数组。也就是说返回的是所有匹配的元素所组成的一个元素数组。

    1.7K80

    【Web APIs】DOM 文档对象模型 ④ ( querySelector 函数 | querySelectorAll 函数 | NodeList 对象 )

    , 都是通过 ID、 标签名、类名 获取 HTML 网页中的 DOM 元素 , 分别使用 getElementById 函数 getElementsByTagName 函数 getElementsByClassName...函数 上述获取 DOM 元素的函数 , 需要根据不同的 CSS 选择器 , 使用不同的函数 ; 一、querySelector 函数 1、querySelector 函数简介 在 HTML5 中 ,...DOM API 推出了新的方法 querySelector 函数 , 可以在该函数参数中指定 " CSS 选择器 " , 函数返回匹配该选择器的第一个 DOM 元素 , 如果没有与之匹配的元素 , 返回...1、querySelectorAll 函数简介 Document 和 Element 都定义了 querySelectorAll 函数 , 分别从 HTML 文档 和 Element 元素 中查询 所有...中 , 获取的符合 指定选择器 的 所有 DOM 元素 , 返回值的类型是 NodeList 对象 ; NodeList 对象 与 HTMLCollection 对象类似 , 都封装了若干 Element

    1.5K10

    《手把手教你》系列技巧篇（二十）-java+ selenium自动化测试-元素定位大法之终卷（详细教程）

    (String css)) 使用CSS选择器定位 3.定位遵循原则 我们在选择使用定位方法的时候，建议遵循以下原则 1.若id和name在html中是唯一的，则优先使用这2种。...2.使用css或xpath，他们都很灵活，但语法复杂。Xpath性能应该是最慢的。 3.link text、partial link text缺点在于只对连接元素起作用。...Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。...1）xpath调试：使用$x("")方法，如下图所示： 2）css调试：使用("") 或 （2）打开Chrome浏览器，F12打开开发者工具，然后Ctrl+F调出输入框，在输入框中输入xpath表达式或者...css表达式，如下图所示： （3）鼠标置于要定位的元素上->鼠标右键->检查->Elements->Ctrl+F 5.小结 总共有8种方法，但是在实际的运用中，我们一定要合理使用，按以下方法进行选择

    2.1K20

    原生JS | 通过类名获取标签

    HTML5学堂（码匠）：在原生JavaScript当中，存在默认的getElementsByClassName()方法，在不支持该方法的浏览器中，又应该怎么实现“通过类名获取标签”呢？...原生JS通过类名获取标签 getElementsByClassName()是原生JavaScript提供的方法，但是并不是所有的浏览器都支持，在ie早期版本的浏览器是不允许通过这个方法获取标签的，因此...构建函数 使用工厂模式创建函数，用户向“工厂（函数）”中传入类名，使用if语句，判断document是否存在getElementsByClassName方法，如果存在，则直接获取； 如果不存在，则先获取所有标签...（使用通配符），之后使用for循环，针对获得的标签一一进行检测，对于符合条件的元素添加到最终结果当中； 最后将结果（result）返回即可。...此外，为了让第二个参数可以是缺省的，需要再添加一个if语句，在没有指定第二参数时，在document元素下进行查找。 ? 3.

    15.1K60

    【如果你要学JS】——数据类型及其内存分配

    值类型 :简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型 string , number，boolean，undefined , null引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址...文档: 一个页面就是一个文档 , DOM中使用document表示 元素:页面中的所有标签都是元素, DOM中使用element表示 节点:网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM...中使用node表示3.如何获取元素？...console.log(liss[i]); } 使用element.getElementsByTagName()，获取某个父元素内得所有子元素 getElementsByClassName根据类名获得某些元素集合2.querySelector返回指定选择器的第一个3.querySelectorAll根据选择器返回所有指定元素对象集合

    35500

    DOM扩展

    示例： var lis = document.querySelectorAll("ul li"); // 获取第一个li lis.item(0); // 等价于：lis[0]; 注意：上述两个函数如果传入不支持的选择符...与类相关的扩充 （1）getElementsByClassName("包含一或多个类名的字符串") document.getElementsByClassName("bj"); // 取得类中包含...“bj”的元素 document.getElementsByClassName("bj bd"); // 取得类中同时包含“bj”和“bd”的元素 （2）classList属性 在操作类名时，需要通过...在使用innerHTML、outerHTML等方法时，最好先删除要替换的元素的所有事件处理程序和JavaScript对象属性。...其对文本进行操作，使用方式类似于innerHTM和outerHTML。 4. 滚动 HTML5将scrollIntoView()方法纳入规范之后，仍还有其他几个专有方法可以在不同的浏览器中使用。

    1.9K31
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券