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

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

函数 上述获取 DOM 元素的函数 , 需要根据不同的 CSS 选择器 , 使用不同的函数 ; 一、querySelector 函数 1、querySelector 函数简介 在 HTML5 中 ,...DOM API 推出了新的方法 querySelector 函数 , 可以在该函数参数中指定 " CSS 选择器 " , 函数返回匹配该选择器的第一个 DOM 元素 , 如果没有与之匹配的元素 , 返回...); selectors 参数 : 若干 有效的 CSS 选择器字符串 , 如果字符串内容不是 CSS 选择器则会抛出 SYNTAX_ERR 异常 ; 返回值 : 返回 符合 CSS 选择器的 第一个...(selectors); selectors 参数 : 若干 有效的 CSS 选择器字符串 , 如果字符串内容不是 CSS 选择器则会抛出 SYNTAX_ERR 异常 ; 返回值 : 返回 符合 CSS...NodeList 对象 1、NodeList 对象简介 在上述 querySelectorAll 函数 中 , 获取的符合 指定选择器 的 所有 DOM 元素 , 返回值的类型是 NodeList 对象

1.5K10

深入理解Shadow DOM v1

shadow DOM不是超级英雄电影中的恶棍，也不是DOM的黑暗面。 shadow DOM只是一种解决文档对象模型（或简称DOM）中缺少的树封装方法。...尽管如此，在编写大型程序时，这些努力似乎并不是那么有效，并且大量的时间被浪费在防止CSS和JavaScript的冲突上。 Shadow DOM API旨在通过提供封装DOM树的机制来解决这些问题。...例如当你写下document.createElement('p');时，就在使用DOM提供的方法。没有DOM，JavaScript就无法理解HTML和XML文档的结构。...当你在页面上使用时，它会创建自己的shadow DOM： ? 请记住，有效的自定义元素不能是单个单词，并且名称中必须包含连字符（ - ）。...中的任何位置时，这段代码会将 div id =“host”> ...

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

    JS快速入门（二）

    ') getElementsByTagName()案例 document.getElementsByTagName('p') 这里获取到的是一个节点集合，节点集合无法直接用于 DOM 操作。...()代码示例 //获取被选择器'.box .item'匹配的第一个节点 document.querySelector('.box .item') //获取选择器'div'（标签）匹配的节点 document.querySelector...，返回布尔值 toggle(class, true|false) 如果类名存在，则移除它，否则添加它第二个参数代表无论类名是否存在，强制 添加（true）或删除（false） div class="...，加载窗口，关闭窗口，窗口滚动等，掌握如何处理窗口事件可以帮助我们实现更加丰富的交互效果； 常用窗口事件 方法 说明 load 当整个页面及所有依赖资源（如样式表和图片）都已完成加载时，将触发load事件...获取其内容； 使用 onload 绑定事件时，注意一个页面不要存在多个 onload，这样会只会运行最后一个 onload 中的代码，推荐使用addEventListener 绑定事件； beforeunload

    7.6K30

    angularJS的DOM操作

    1.querySelector和querySelectorAll 是W3C提供的 新的查询接口，其主要特点如下： ①、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。 ...如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素 on() - 在选定的元素上绑定一个或多个事件处理函数 off() - 移除一个事件处理函数 one() - 为元素的事件添加处理函数...处理函数在每个元素上每种事件类型最多执行一次 parent() - 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器 prepend()-将参数内容插入到每个匹配元素的前面（元素内部） prop...()-获取匹配的元素集中第一个元素的属性（property）值 ready()-当DOM准备就绪时，指定一个函数来执行 remove()-将匹配元素集合从DOM中删除。...即：如果存在（不存在）就删除（添加）一个类 triggerHandler() -为一个事件执行附加到元素的所有处理程序 unbind() - 从元素上删除一个以前附加事件处理程序 val()-获取匹配的元素集合中第一个元素的当前值

    1.6K10

    前端基础-文档对象模型 (DOM)

    常用dom操作： 查找页面的标签元素 标签增加、修改、删除等操作 标签的属性相关操作 给标签元素绑定事件（设置当什么什么时候，做什么什么事情） 1.3 查找节点 上一节我们知道，整个文档的节点就是document...3333333333 div> div> getElementsByTagName() 返回所有指定HTML标签的元素，返回值是一个类似数组的HTMLCollection...() document.querySelector方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点； 如果有多个节点满足匹配条件，则返回第一个匹配的节点。...如果没有发现匹配的节点，则返回null； document.querySelectorAll方法与querySelector用法类似， 区别是返回一个类似数组的HTMLCollection对象，包含所有匹配给定选择器的节点...:first-line和:first-letter） 和伪类的选择器（比如:link和:visited），即无法选中伪元素和伪类。

    1.4K10

    前端温习(二)： Javascriput 核心对象 Document 对象

    () 返回文档中匹配指定的CSS选择器的第一元素 document.querySelectorAll() document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的...') document.querySelector('#myElement') 注意：在搜索匹配节点时，id 属性是大小写敏感的。...NodeList 对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。...// 返回class属性是note或alert的div元素 elementList = document.querySelectorAll(selectors); // 逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素...DocumentFragment 对象是一个存在于内存的 DOM 片段，但是不属于当前文档，常常用来生成较复杂的 DOM 结构，然后插入当前文档。

    1.2K31

    Web APIs第一天

    树 作用：文档树直观的体现了标签与标签之间的关系 浏览器根据html标签生成的 JS对象（DOM对象） DOM的核心就是把内容当对象来处理 是 DOM 里提供的一个对象 网页所有内容都在document...获取DOM元素 1. 根据CSS选择器来获取DOM元素 (重点) 选择匹配的第一个元素 包含一个或多个有效的CSS选择器 字符串 CSS选择器匹配的第一个元素,一个 HTMLElement对象。...let num = document.querySelector('.box li:last-child') console.log(num) 选择匹配的多个元素 包含一个或多个有效的CSS选择器 字符串..., 文本中包含的标签不会被解析 let num = document.querySelector('div') num.innerText = '你好' num.innerText =...'你好呀' 元素innerHTML 属性 将文本内容添加/更新到任意标签位置, 文本中包含的标签会被解析 let num = document.querySelector('div') num.innerHTML

    2.1K30

    DOM操作笔记

    只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。 document对象包含了文档的基本信息，我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。...我们的页面渲染的时候就会去打开一个文档流，当渲染绘制结束，就关闭这个文档流。...= document.querySelectorAll(selectors) querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素 四、创建元素...创建了一个元素，创建的这个元素在虚拟的dom里面，只有把这个虚拟的dom放在页面，用户才能看得见 var newDiv = document.createElement("div") 2、document.createTextNode...6、innerHTML 选择元素，使用innerHtml，输入的字符串会当成html语句执行后展示 document.querySelector('.classbar').innerHTML='123

    1.4K40

    【海贼王航海日志：前端技术探索】一篇文章带你走进JavaScript(三)

    WebAPI就包含了DOM + BOM。 这个是W3C组织规定的(和制定ECMAScript标准的大佬们不是一伙人)。 1.2 -> 什么是API API是一个更广义的概念。...该字符串必须是有效的CSS选择器字符串；如果不是，则引发SYNTAX_ERR异常。 表示文档中与指定的一组CSS选择器匹配的第一个元素的html元素Element对象。...，能够同步影响到DOM树中的内容。...element为child的父节点。 返回值为该被删除节点。 被删除节点只是从dom树被删除了，但是仍然在内存中，可以随时加入到dom树的其他位置。...如果上例中的child节点不是element 节点的子节点，则该方法会抛出异常。 代码示例：猜数字 <!

    41810

    webapi（一）初识DOM&定时器

    document.write 是DOM提供的一个对象 提供的属性和方法都是用来访问和操作网页内容的 网页所有内容都在document中 获取DOM对象 1....根据CSS选择器来获取DOM对象（⭐） 1.选择单个元素 document.querySelector('选择器') //选择器一定是用引号引起来 匹配是使用深度优先先序遍历，从文档标记中的第一个元素开始...css选择器 // 作用： // 返回值: 匹配的第一个元素, 如果没有匹配到，则返回null let ulObj1 = document.querySelector...('div') // 没有获取到就会返回null 作用：在文档中根据CSS选择器来查询获取元素 选择多个元素 document.querySelectorAll('选择器')...内容 1. innerText属性 能够操作标签的内容 文本中包含的标签不会被解析 例如： let info = document.querySelector('div') info.innerText

    79120

    前端day12-JS(WebApi)学习笔记(操作元素属性，事件介绍)

    、获取分辨率等 1.3-DOM 2.png Docuemnt Object Model（文档对象模型） 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。...定义了一套操作浏览器功能的API 4.png 2-获取页面元素 6.jpg 1. document.querySelector('css选择器') a....如果无法获取元素， 则会返回null 2. document.querySelectorAll('css选择器') a....，无法得到行外(内联/外联)样式的属性值 3.一定是一个字符串，例如：div.style.height得到150px 得到的是一个带单位的字符串 4.如果css样式的属性有 - 例如background-color...，无法得到行外(内联/外联)样式的属性值 console.log(box1.style.height);//因为没有定义在行内样式 返回空字符串 //

    1.9K00

    HTML5中类jQuery选择器querySelector的使用

    简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器....'); 使用这两个方法无法查找带伪类状态的元素，比如querySelector(':hover')不会得到预期结果。 querySelector 该方法返回满足条件的单个元素。...按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。...elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div 但需要注意的是返回的nodeList集合中的元素是非实时（no-live...）的，想要区别什么是实时非实时的返回结果，请看下例： div id="container"> div>div> div>div>div> //首先选取页面中id为container

    4.9K70

    C1能力认证训练题解析 _ 第四部分 _ Web进阶「建议收藏」

    ________('div#container') 答案：querySelector “div#container”属于CSS选择器字符串，且id名不可重复，选择的只能是一个元素，所以需要获取指定选择器或选择器组匹配的第一个节点...，返回布尔值 toggle(class, true|false) 如果类名存在，则移除它，否则添加它，第二个参数代表无论类名是否存在，强制添加（true）或删除（false） （1）将div元素背景颜色设置为蓝色...disabled类名，此处应使用classList中的 contains对应的判断类名是否存在。.../script> 答案：innerHTML 此处需要插入一个p元素，插入的值为字符串，所以需要使用可以解析html字符串的DOM属性，返回元素中的html内容。...七、窗口事件 常用鼠标事件： 名称 描述 load 当整个页面及所有依赖资源（如样式表和图片）都已完成加载时，将触发load事件 beforeunload window、document 和它们的资源即将卸载时触发

    2.8K20

    JavaScript 教程「9」：DOM 元素获取、属性修改

    DOM 对象获取 匹配的首个元素 上一小节实例中我们其实已经获取过相关 DOM 对象了，也就是以下这一句： let btn = document.querySelector('button'); 这其实是通过...CSS 选择器来获取的我们网页中的标签，通过以下语法，我们将会从网页中选择到匹配的第一个元素。...document.querySelector('CSS 选择器'); 其中的参数包含了一个或多个有效的 CSS 选择器字符串，然后返回的结果就是匹配到的 CSS 选择器中的第一个元素，是一个 HTMLElement...当然，如果没有匹配到任何元素，则返回 null。 以下是一个获取 DOM 对象的实例。 <!...'; 使用类名来操作 CSS 时，需要注意一下，如果原先的元素中已经有了 CSS 类，那么此时新增的 CSS 类将覆盖之前 CSS 类。

    3.6K41
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券