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

DOM 高级工程师不完全指南

如果页面上没有指定的元素时，返回 null 获取 DOM 元素集合 使用 document.querySelectorAll 可以获取一个元素集合，它的传参和 document.querySelector...也就是说，closest 方法可以从特定的 HTMLElement 向上发起查询，找到第一个符合指定 css 表达式的父元素（也可以是元素自身），如果找到了文档根节点还没有找到目标时，就会返回 null...而如今，开发者们可以使用 replaceWith 就可以完成两个元素之间的替换了： ? 从用法上来说，要比前者清爽一些。...用 HTML 字符串创建 DOM 元素 细心的你一定发现了，上文提到的 insertAdjacent 方法允许开发者直接将一段 HTML 插入到文档当中，如果我们此刻只想生成一个 DOM 元素以备将来使用呢...该方法可以实现将一串 HTML 或 XML 字符串转化为一个完整的 DOM 文档，也就是说，当我们需要获得预期的 DOM 元素时，需要从方法返回的 DOM 文档中获取这个元素： ?

92710

DOM 高级工程师不完全指南

如果页面上没有指定的元素时，返回 null 获取 DOM 元素集合 使用 document.querySelectorAll 可以获取一个元素集合，它的传参和 document.querySelector...也就是说，closest 方法可以从特定的 HTMLElement 向上发起查询，找到第一个符合指定 css 表达式的父元素（也可以是元素自身），如果找到了文档根节点还没有找到目标时，就会返回 null...而如今，开发者们可以使用 replaceWith 就可以完成两个元素之间的替换了： ? 从用法上来说，要比前者清爽一些。...用 HTML 字符串创建 DOM 元素 细心的你一定发现了，上文提到的 insertAdjacent 方法允许开发者直接将一段 HTML 插入到文档当中，如果我们此刻只想生成一个 DOM 元素以备将来使用呢...该方法可以实现将一串 HTML 或 XML 字符串转化为一个完整的 DOM 文档，也就是说，当我们需要获得预期的 DOM 元素时，需要从方法返回的 DOM 文档中获取这个元素： ?

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

    js 数组去除重复数据-5 个提升你 JS 编码水平的实例

    这时候我们可以使用：Object...call()   所以为什么？   因为每个对象都有一个()方法，当要将对象表示为文本值或以预期字符串的方式引用对象时，会自动调用该方法。.../类数组对象封装   如果我们使用 ES5/ES6+的数组 API，很容易就能够对数组进行各类的循环操作，但是如果我们要循环一个类数组对象呢？   ...(divs, "forEach", function(e) { console.log(e);});`   获取 dom 元素节点的偏移量   如果有用过jQuery的童鞋，就一定不会忘记$('')....offset()这个 api 的强大功能，这个 api 可以轻易获取元素的偏移量，那么如果我们不用jQuery该怎么实现呢？   ...然后就是.body.跟..这两个是一个功能，只不过在不同的浏览器下会有一个始终为 0js 数组去除重复数据，所以做了以上的兼容性处理。所以当我们做拖拽功能的时候，就可以依赖上以上属性。

    2.1K20

    $.each()与$(selector).each()区别详解

    each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等 在javaScript开发过程中使用$each可以大大的减轻我们的工作量。...此改变运用到上面几段数组的操作也会输出同样的结果。 这样，几个例子的实际结果已经得到答案。接着再继续往下研究，总不能知其然不知其所以然。 ...从以上的例子中可知jQuery和jQuery对象都实现了该方法，对于jQuery对象，只是把each方法简单的进行了委托：把jQuery对象作为第一个参数传递给jQuery的each方法。...在fn的实现中，可以直接采用this指针引用数组或是对象的子元素。...当each方法提供了arg参数时，fn函数调用传入的参数为arg，否则为：子元素索引，子元素本身 2.obj 对象不是数组 该方法同1的最大区别是：fn方法会被逐次不考虑返回值的进行进行。

    2.3K120

    Vue.js入门

    如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。...当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。...从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据； 从Model侧看，当我们更新Model中的数据时，Data...age是定义在选项对象的data属性中的，为什么Vue实例可以直接访问它呢？ 这是因为每个Vue实例都会代理其选项对象里的data属性。...属性中定义了一个people数组，然后在#app元素内使用v-for遍历people数组，输出每个person对象的姓名、年龄和性别。

    2.4K20

    Vue.js——60分钟快速入门(转载) Vue.js介绍声明该文是转载的，欢迎转载，支持尊重版权，原文作者：keepfool，原文地址：http:www.cnblogs.comkeepfo

    如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。...一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。 当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。...从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据； 从Model侧看，当我们更新Model中的数据时，Data...age是定义在选项对象的data属性中的，为什么Vue实例可以直接访问它呢？ 这是因为每个Vue实例都会代理其选项对象里的data属性。...属性中定义了一个people数组，然后在#app元素内使用v-for遍历people数组，输出每个person对象的姓名、年龄和性别。

    1.4K20

    Vue2.x-04Vue插值、数据绑定、样式绑定、过滤器

    ---- 从 Vue2 开始，组件模板必须且只能有一个顶层元素，如果在组件模块内设直多个顶层元素将会引发编译异常 。...这里除了用插值绑定，还使用了属性绑定语法，就是上面的:id="index",意思是将 index 的值输出到 DOM 的 id 属性上,如果没有在 id 前面加上“：”，那么 Vue 就会认为我们正在为...在 Vue 的代码中不推荐直接操作 DOM，并不像Jquery那样。...DOM 是被 Vue 直接托管的，所有“绑定”到 DOM 上的变量一旦发生变化， DOM 所对应的属性就会被 Vue 自动重绘而不需要像 jQuery那样通过编码来显式地操作，这才是绑定的意义所在。...:todo.done}"> 但 v-bind 可以采用缩写方式“：”表示，采用完整写法又将出现各种重复，所以建议还是直接使用缩写方式，这样会更直观。

    1.5K30

    前端vue面试题2020及答案_c++ 面试题

    怎么改变它 34.Vue和JQuery的区别在哪？为什么放弃JQuery用Vue？ 35.slot插槽 36.v-if和v-for为什么不建议一起使用？...red”:”blue”‘ 3、数组型 ‘[{red:”isred”},{blue:”isblue”}]’ v-once 进入页面时 只渲染一次 不在进行渲染 v-cloak 防止闪烁 v-pre 把标签内部的元素原位输出...， 因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算； 2.当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch， 使用 watch 选项允许我们执行异步操作...80.可以被vue拦截到的数组方法以及不能被拦截到的数组方法？...137.子组件里面可以修改父组件的值吗 答案是传递的是对象和数组可以修改，如果是基础数据类型也可以修改，但是控制台会报错；对象和数组修改之后父组件是可以监听到这个值的变化的。那么为什么呢？

    4.8K10

    前端必备，25个最基本的JavaScript面试问题及答案

    （还是你为什么应该理所当然地在代码中使用 use strict 的最好例子！） 3.下面的代码将输出什么到控制台，为什么？...delete操作符（用于从对象中删除属性）不能用在对象不可配置的属性上。当试图删除一个不可配置的属性时，非严格代码将默默地失败，而严格模式将在这样的情况下抛出异常。 6.考虑以下两个函数。...这里有几个侧面点有时候会让你在回答这个问题时，阴沟里翻船： 传递数组到另一个数组的 push() 方法会让整个数组作为单个元素映射到数组的末端。...创建一个给定页面上的一个DOM元素，就会去访问元素本身及其所有子元素（不只是它的直接子元素）的函数。...对于每个被访问的元素，函数应该传递元素到提供的回调函数。 此函数的参数为： DOM元素 回调函数（将DOM元素作为其参数） 访问树（DOM）的所有元素是经典的深度优先搜索算法应用。

    1.3K30

    【深入浅出jQuery】源码浅析--整体架构

    二者有何不同呢，当我们的代码运行在更早期的环境当中（pre-ES5，eg. Internet Explorer 8），undefined 仅是一个变量且它的值是可以被覆盖的。...当我们使用第一种无 new 构造方式的时候，其本质就是相当于 new jQuery()，那么在 jQuery 内部是如何实现的呢？...CSS 选择器 jQuery([selector,[context]]) // 传入单个 DOM jQuery(element) // 传入 DOM 数组 jQuery(elementArray)...pushStack() 方法生成，该方法将一个 DOM 元素集合加入到 jQuery 内部管理的一个栈中，通过改变 jQuery 对象的 prevObject 属性来跟踪链式调用中前一个方法返回的 DOM...那么让出了这两个符号之后，是否就不能在我们的代码中使用 jQuery 或者呢 $ 呢？

    98141

    JavaScript中的类型判断

    ，放在其单个操作数的前面，操作数可以是任意类型。...，为什么长度为 0 就可以直接判断为 true 呢？...所以是不是为了放过空的 arguments 时也放过了一些存在争议的对象呢？ 第三个条件：length 是数字，并且 length > 0 且最后一个元素存在。 为什么仅仅要求最后一个元素存在呢？...让我们先想下数组是不是可以这样写： var arr = [,,3]当我们写一个对应的类数组对象就是： var arrLike = { 2: 3, length: 3} 也就是说当我们在数组中用逗号直接跳过的时候...我们可以看到，即使是 jQuery 这样优秀的库，一些方法的实现也并不是非常完美和严密的，但是最后为什么这么做，其实也是一种权衡，权衡所失与所得，正如玉伯在《从 JavaScript 数组去重谈性能优化

    1.6K30

    2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）

    ，拷贝的就是内存地址, 2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用” 深拷贝就是把一个对象，从内存中完整的拷贝出来...arguments 当我们不知道有多少个参数传进来的时候就用 arguments 来接收，是一个类似于数组的对象，他有length属性，可以arguments[ i ]来访问对象中的元素， 但是它不能用数组的一些方法...那为什么会出现这样的结果呢？...为什么要用虚拟DOM来描述真实的DOM呢？ 创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。...Vue和JQuery的区别在哪?为什么放弃JQuery用Vue?

    3.7K10

    前端学习笔记—JavaScript和jQuery

    当我们用 function 关键字定义一个函数时，它实际上是创建了一个函数对象，而不是通过构造函数实例化得到的。 在函数体内部可以用arguments对象关键字获取到当前整个函数的实参数组。...通过DOM对象的接口，js可以在任何时候访问HTML文档中的任何数据，利用DOM的接口可以无限制的控制HTML页面，可以动态的创建文档，遍历文档结构，对页面结构上的元素进行增、删、改等操作，改变文档的显示方式等...console.log($('#name').val()); //jQuery写法二 //jQuery获取的是一个dom对象数组，可以使用dom的属性或者函数...属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 ("[href]") 选取所有带有 href 属性的元素。("[href!...='#']") 选取所有带有 href 值不等于 "#" 的元素。 过滤选择器（用的场景较多） 对已经定位到数组中的DOM对象再进行过滤筛选，再次定位选择。

    82010

    前端面试宝典 v1

    apply的参数是数组形式，call的参数是单个的值，除此之外在使用上没有差别，重点理解这两个函数调用的this改变 46、数组和对象有哪些原生方法，列举一下？...如果想删除数组中的一段元素，应该使用方法 Array.splice() splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。返回的是含有被删除的元素的数组。...* 当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性，如果没有的话，就会查找他的Prototype对象是否有这个属性。...考察学习知识的态度，是否仅仅是停留在使用层面，要知其然知其所以然 2、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？...jQuery是操作dom的框架，jQueryUI是基于jQuery做的一个UI组件库 4、jQuery和Zepto的区别？各自的使用场景？

    3.2K41

    全网最新、最全的jQuery核心知识，你真的不想点开看看嘛？

    为什么使用 jQuery 它能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器 处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX...通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节 点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。...JQuery提供了 each() 方法用于遍历匹配的元素信 element: 数组的对象 ： 这个是自定义的数组中的元素的标识符，这个元素可以是普通元素(直接获取)、json对象的value(直接获取)...重点：可以将普通数组对象、dom对象转换为 jQuery对象来使用 each()的语法二进行遍历。 但是 json对象不可以转变为 jQuery对象，只能使用语法一遍历，不可以使用语法二。...dataType：表示期望从服务端返回的数据格式。当我们使用 $.ajax() 发送请求时，会把 ​ dataType的值发送给服务端。

    8K10

    在vue的v-for中，key为什么不能用index？4

    的作用当我们能够在 JS 中模拟出 DOM 结构后，我们就可以通过 JS 来对 DOM 操作进行优化了，怎么优化呢，这个时候 diff 算法就该登场了。...当我们通过 JS 对 DOM 进行修改后，并不会直接触发 DOM 更新，而是会先生成一个新的虚拟 DOM，然后利用 diff 算法与修改前生成的虚拟 DOM 进行比较，找出需要修改的点，最后进行真正的...v-for 中 key 值是否可以为 index答案当然是不可以，举个例子，我们来看下面两个 vdom，从 num 值我们可以发现，新、旧两个 vdom 是两个顺序相反的数组生成的 vdom，安装正常的方式...，应该是简单调换一下顺序，直接复用3个元素即可，而当我们以 index 作为 key 时，情况就不同了，由于 index 永远都是从 0 开始，所以这两个 vdom 的 key 值从开始到结束，看起来都是相同的...，体会到了前端对于性能的极致追求，通过通读 vdom 源码，基本能够从更加深刻的角度去理解采用 VDOM 的目的，以及 key 值在 diff 算法中的真正作用，也能够从更加底层的角度理解为什么不推荐使用

    1.7K50

    在vue的v-for循环中，key为什么不能用index？

    的作用当我们能够在 JS 中模拟出 DOM 结构后，我们就可以通过 JS 来对 DOM 操作进行优化了，怎么优化呢，这个时候 diff 算法就该登场了。...当我们通过 JS 对 DOM 进行修改后，并不会直接触发 DOM 更新，而是会先生成一个新的虚拟 DOM，然后利用 diff 算法与修改前生成的虚拟 DOM 进行比较，找出需要修改的点，最后进行真正的...v-for 中 key 值是否可以为 index答案当然是不可以，举个例子，我们来看下面两个 vdom，从 num 值我们可以发现，新、旧两个 vdom 是两个顺序相反的数组生成的 vdom，安装正常的方式...，应该是简单调换一下顺序，直接复用3个元素即可，而当我们以 index 作为 key 时，情况就不同了，由于 index 永远都是从 0 开始，所以这两个 vdom 的 key 值从开始到结束，看起来都是相同的...，体会到了前端对于性能的极致追求，通过通读 vdom 源码，基本能够从更加深刻的角度去理解采用 VDOM 的目的，以及 key 值在 diff 算法中的真正作用，也能够从更加底层的角度理解为什么不推荐使用

    1.8K10

    在vue的v-for中，key为什么不能用index？

    的作用当我们能够在 JS 中模拟出 DOM 结构后，我们就可以通过 JS 来对 DOM 操作进行优化了，怎么优化呢，这个时候 diff 算法就该登场了。...当我们通过 JS 对 DOM 进行修改后，并不会直接触发 DOM 更新，而是会先生成一个新的虚拟 DOM，然后利用 diff 算法与修改前生成的虚拟 DOM 进行比较，找出需要修改的点，最后进行真正的...v-for 中 key 值是否可以为 index答案当然是不可以，举个例子，我们来看下面两个 vdom，从 num 值我们可以发现，新、旧两个 vdom 是两个顺序相反的数组生成的 vdom，安装正常的方式...，应该是简单调换一下顺序，直接复用3个元素即可，而当我们以 index 作为 key 时，情况就不同了，由于 index 永远都是从 0 开始，所以这两个 vdom 的 key 值从开始到结束，看起来都是相同的...，体会到了前端对于性能的极致追求，通过通读 vdom 源码，基本能够从更加深刻的角度去理解采用 VDOM 的目的，以及 key 值在 diff 算法中的真正作用，也能够从更加底层的角度理解为什么不推荐使用

    1.7K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券