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

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

函数 1、querySelector 函数简介 在 HTML5 中 , DOM API 推出了新的方法 querySelector 函数 , 可以在该函数参数中指定 " CSS 选择器 " , 函数返回匹配该选择器的第一个...DOM 元素 , 如果没有与之匹配的元素 , 返回 null 值 ; Document 和 Element 都定义了 querySelector 函数 , 分别从 HTML 文档 和 Element...异常 ; 返回值 : 返回 符合 CSS 选择器的 第一个 DOM 元素 , 类型是 Element 对象 ; CSS 选择器参考 : 【CSS】CSS 总结 ① ( CSS 引入方式 | CSS 选择器...| 基础选择器 | 复合选择器 ) ★ querySelector 函数文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector...); selectors 参数 : 若干 有效的 CSS 选择器字符串 , 如果字符串内容不是 CSS 选择器则会抛出 SYNTAX_ERR 异常 ; 返回值 : 返回 符合 CSS 选择器的 所有 DOM

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

    【JavaScript】解决 JavaScript 语言报错：Uncaught TypeError: Cannot read property ‘X‘ of undefined

    常见场景 访问一个未定义的变量或对象 调用一个函数并试图访问其返回值中的属性，而该返回值是未定义的 操作 DOM 元素时，可能由于元素未正确加载或选择器错误导致无法访问元素属性 了解错误发生的背景和根本原因是解决此类问题的第一步...Uncaught TypeError: Cannot read property 'name' of undefined 函数 getUser 返回未定义的值，访问其 name 属性自然会报错。...是一种优雅的方式来处理可能为未定义或 null 的对象属性访问。 let user = {}; console.log(user?.profile?....函数返回值检查 确保函数的返回值是已定义的对象。如果函数可能返回未定义的值，可以在调用后检查返回值。...函数返回值检查：在使用函数返回值时，先检查其是否为未定义。 DOM 元素验证：在操作 DOM 元素前，确保元素已被正确选择和加载。

    7.5K50

    10 个关于 TypeScript 的小技巧

    2、期望泛型 因此，如果您使用其他任何东西而不是元素选择器： document.querySelector（'input.action'） 那么 HTMLELementTagNameMap 将不再有用，...与 querySelector 一样，函数通常可以返回各种不同的结构，而 TypeScript 不可能确定将是哪种结构。...在那种情况下，您可以非常期待，该函数也是通用的，并且可以使用方便的通用语法提供该返回类型： textEl = document.querySelector 'input.action...该 document.querySelector（…）方法实际上并不总是返回一个对象，是吗？与选择器匹配的元素可能不在页面上-函数将返回 null 而不是对象。...因此，如果改为使用函数fn（param）：string {我会忘记该类型（函数fn（param）{），TypeScript将不会关注我返回的内容，即使我从该函数返回了任何内容。

    1.6K10

    获取元素

    为什么要获取页面元素？ 例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作。 1....根据ID获取 语法：document.getElementById(id) 作用：根据ID获取元素对象 参数：id值，区分大小写的字符串 返回值：元素对象 或 null 案例代码    ...返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav        var firstBox = document.querySelector('.box');        ...console.log(firstBox);        var nav = document.querySelector('#nav');        console.log(nav);        ...var li = document.querySelector('li');        console.log(li);        // 3. querySelectorAll()返回指定选择器的所有元素对象集合

    3.1K30

    医疗数字阅片-医学影像-es6-Element.querySelector()

    /Element/querySelector 返回与指定的选择器组匹配的元素的后代的第一个元素。...选择器字符串( selectors ) 参数 selectors一组用来匹配ElementbaseElement后代元素的选择器selectors；必须是合法的css选择器，否则会引起语法错误。...返回匹配指定选择器的第一个元素。 返回值 基础元素（baseElement）的子元素中满足指定选择器组的第一个元素。...第一个匹配的元素将会被querySelector()方法返回。 如果没有找到匹配项，返回值为null。 异常 SyntaxError指定的选择器无效。 例子 我们来看几个例子。...查找一个具有特殊属性值的元素 在第一个例子中，会返回HTML文档里第一个没有type属性或者有值为“text/css”的type属性的元素: let el = document.body.querySelector

    48720

    querySelector-强大的原生DOM选择器

    定义 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。...如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。...语法 document.querySelector(CSS selectors) 参数值介绍 必须。指定一个或多个匹配元素的 CSS 选择器。...对于多个选择器，使用逗号隔开，返回一个匹配的元素。 异常 匹配指定 CSS 选择器的第一个元素。 如果没有找到，返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。..." 属性的第一个 元素： document.querySelector("a[target]"); 5、设置文档中第一个h1的背景颜色为红色： document.querySelector("h1

    1.7K10

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

    null; console.log(typeof(str));//返回值为Object，也就是一个空的对象 // 一般null用在（当前有个变量将要储存为对象，但并未决定放什么，这时候就用null...先给这个变量） 2.堆和栈堆栈空间分配区别: 1、栈(操作系统) :由操作系统自动分配释放存放函数的参数值、局部变量的值等。...id的元素对象，若没有次id则返回null console.dir(uname);// 可以打印返回的元素对象，更好的查看该元素对象的属性和方法。...4.通过HTML5新增的方法获取 1.getElementsByClassName根据类名获得某些元素集合2.querySelector返回指定选择器的第一个3.querySelectorAll根据选择器返回所有指定元素对象集合...返回指定选择器的第一个(类选择器和id选择器都可以用哦) 类选择器(.类名)和id选择器(#id明)。

    35300

    「Web编程API」- 01

    是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现； Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果； Web API 一般都有输入和输出（函数的传参和返回值...获取元素 为什么要获取页面元素？例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作。 1.3.1....根据ID获取 语法：document.getElementById(id) 作用：根据ID获取元素对象 参数：id值，区分大小写的字符串 返回值：元素对象 或 null 案例代码 ...返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav var firstBox = document.querySelector('.box');...var li = document.querySelector('li'); console.log(li); // 3. querySelectorAll()返回指定选择器的所有元素对象集合

    1.2K50

    前端成神之路-WebAPIs01

    Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数） 学习 Web API 可以结合前面学习内置对象方法的思路学习 1.2....获取元素 为什么要获取页面元素？ 例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作。 1.3.1....根据ID获取 语法：document.getElementById(id) 作用：根据ID获取元素对象 参数：id值，区分大小写的字符串 返回值：元素对象 或 null 案例代码 ...返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav var firstBox = document.querySelector('.box');...var li = document.querySelector('li'); console.log(li); // 3. querySelectorAll()返回指定选择器的所有元素对象集合

    1.1K10

    DOM 高级工程师不完全指南

    jQuery 也给业界留下了产生深远影响的“遗产”，W3C 就仿照其 $ 函数实现了 querySelector 和 querySelectorAll。...获取单个 DOM 元素 向 document.querySelector 中传入任何有效的 css 选择器，即可选中单个 DOM 元素： ?...如果页面上没有指定的元素时，返回 null 获取 DOM 元素集合 使用 document.querySelectorAll 可以获取一个元素集合，它的传参和 document.querySelector...也就是说，closest 方法可以从特定的 HTMLElement 向上发起查询，找到第一个符合指定 css 表达式的父元素（也可以是元素自身），如果找到了文档根节点还没有找到目标时，就会返回 null...null previousSibling: 被添加或移除的子元素之前的兄弟节点 nextSibling: 被添加或移除的子元素之后的兄弟节点 根据目前的信息，可以写一个 callback 函数了： ?

    92710

    DOM 高级工程师不完全指南

    jQuery 也给业界留下了产生深远影响的“遗产”，W3C 就仿照其 $ 函数实现了 querySelector 和 querySelectorAll。...获取单个 DOM 元素 向 document.querySelector 中传入任何有效的 css 选择器，即可选中单个 DOM 元素： ?...如果页面上没有指定的元素时，返回 null 获取 DOM 元素集合 使用 document.querySelectorAll 可以获取一个元素集合，它的传参和 document.querySelector...也就是说，closest 方法可以从特定的 HTMLElement 向上发起查询，找到第一个符合指定 css 表达式的父元素（也可以是元素自身），如果找到了文档根节点还没有找到目标时，就会返回 null...null previousSibling: 被添加或移除的子元素之前的兄弟节点 nextSibling: 被添加或移除的子元素之后的兄弟节点 根据目前的信息，可以写一个 callback 函数了： ?

    97810

    JavaScript中的链式调用

    操作符的功能类似于.链式操作符，不同之处在于在引用为空nullish即null或者undefined的情况下不会引起错误，该表达式短路返回值是undefined。...与函数调用一起使用时，如果给定的函数不存在，则返回undefined。当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短更简明。...通过定义一个类并且实现实例化之后，在实例之间可以共享原型上的方法，而直接通过_jQuery类直接去调用显然是不行的，抛出的第一种异常是因为在_jQuery类上不存在静态方法，第二种异常是因为_jQuery作为函数执行后未返回值...，而现在返回的是一个_jQuery.fn对象，显然是达不到要求的，为了能够取得返回的元素，那就在原型上定义一个init方法去获取元素，这里为了省事直接使用了document.querySelector，...实际上jQuery的选择器构建是很复杂的。

    1.5K10

    【干货分享】微信小程序单元测试攻略

    ID 选择器：#the-id 2. class 选择器（可以连续指定多个）：.a-class.another-class 3. 子元素选择器：.the-parent > .the-child 4....后代选择器：.the-ancestor .the-descendant 5. 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant 6....多选择器的并集：#a-node, .some-other-nodes ‍ 2.3.2.3 确认用户操作是否正确响应： 要感知事件是否响应，我们需要使用spyOn方法。...该方法和sinon.spy一样，生成函数的“间谍”，可以断言该函数的已调用次数、调用入参、调用返回等是否符合预期。...3.3 覆盖率监测原理 使用“jest --coverage”进行覆盖率测试时，会在项目里生成覆盖率报告： 给人看的： 报告示例： 04 踩坑日志 4.1 load的id为null、render组件

    3.9K40

    JavaScript中的链式调用

    操作符的功能类似于.链式操作符，不同之处在于在引用为空nullish即null或者undefined的情况下不会引起错误，该表达式短路返回值是undefined。...与函数调用一起使用时，如果给定的函数不存在，则返回undefined。当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短更简明。...通过定义一个类并且实现实例化之后，在实例之间可以共享原型上的方法，而直接通过_jQuery类直接去调用显然是不行的，抛出的第一种异常是因为在_jQuery类上不存在静态方法，第二种异常是因为_jQuery作为函数执行后未返回值...，而现在返回的是一个_jQuery.fn对象，显然是达不到要求的，为了能够取得返回的元素，那就在原型上定义一个init方法去获取元素，这里为了省事直接使用了document.querySelector，...实际上jQuery的选择器构建是很复杂的。

    4.8K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券