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

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

返回文档的绝对基础 URI document.body 返回文档的body元素 document.cookie 设置或返回与当前文档有关的所有 cookie document.doctype 返回与文档相关的文档类型声明...() 返回带有指定名称的对象集合 document.getElementsByTagName() 返回带有指定标签名的对象集合 document.importNode() 把一个节点从另一个文档复制到该文档以便应用...hasFocus() 返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。...// 返回class属性是note或alert的div元素 elementList = document.querySelectorAll(selectors); // 逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素...与 querySelector 方法一样，querySelectorAll 方法无法选中 CSS 伪元素。

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

    querySelector与querySelectorAll

    和querySelectorAll)及其用法 querySelector和querySelectorAll的基本用法 平常我们在查找节点时总是一个个".getElementById..."...querySelector和querySelectorAll的区别 querySelector和querySelectorAll他们之间的区别就好比getElementById和getElementsByTagName...一样，querySelector返回的是单独的一个节点，而querySelectorAll返回的是一个节点集合，换句话说就是querySelectorAll返回的是一个节点对象的数组。...querySelectorAll和getElementsByTagName的区别 querySelectorAll与getElementsByTagName最终得到的都是一个节点集合，那么他们之间是否只是简化写法这么简单呢...结束语 有了这个工具是不是觉得很方便呢，以往你可能为了偷懒，连一个小页面都要引入框架去DOM操作，现在你只需要使用这个工具就能省去了不必要引入的框架，提升了性能，减少了流量。

    1.5K70

    【前端性能】必须要掌握的原生JS实现JQuery

    很多时候，我们经常听见有人说jquery有多快多快。在这个各种类库满天飞的时候，不得不说的是，能有原生JS快吗？...jquery见效较快，属于前期较快后期较慢，没有气的支持，成长会越来越慢 网上找代码，好比赵敏找六大门派高手偷绝学，直接对症下药，需要什么拿什么用什么，只注重伤敌（结果），无所谓剑与气。...jQuery DOM 操作的原生实现   JQuery另一大频繁被使用到的功能就是操作DOM元素，诸如插入或删除一个元素。...那么你是否觉得使用原生JS实现会很麻烦呢？其实不然，因为有classList。下面是一些关于JQuery css操作的JS原生实现。...最后不得不说的是 jQuery 的确是一个了不起的库。但是如果我们可以同样轻松的使用原生 JS 实现 JQuery，何乐而不为呢？

    1.4K30

    JavaScript基础学习--01热身

    一、js大致思路： 1、完成静态HTML+CSS 2、过一遍整体的大致js思路 3、按照从上到下的，从有至无的顺序完成js编写（包括先写大致轮廓，再细化细节部分） 4、调试代码      二、要点： 1...submit),不必要的表单提交 5、js中变量的合理利用 6、href="javascript:;" 和 href=""以及href="#"的区别：     "＃"包含了一个位置信息,默认的锚点是＃top...var aLi = [ document | obj ].getElementsByTagName('标签名');               （1）获取的时候是以数组的形式给出，所以即使该元素只有一个...2、非动态实时（动态创建的元素不会被选中）。3、使用包含选择器时，会包含祖先元素在内。           ...document.querySelector('css selector');     匹配指定 CSS 选择器的第一个元素     eg. document.querySelector('#div,

    96890

    JavaScript(十一)

    Selectors API Level 1 的核心是两个方法: querySelector() 和 querySelectorAll()。...querySelector() 方法 querySelector() 方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null: //取得body元素 var...querySelectorAll() 方法 querySelectorAll() 方法接收的参数与 querySelector() 方法一样，都是一个 CSS 选择符，但返回的是所有匹配的元素而不仅仅是一个元素...//取得某中的所有元素(类似于getElementsByTagName("em")) var ems = document.getElementById("myDiv").querySelectorAll...getElementsByClassName() 方法 getElementsByClassName() 方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的 NodeList。

    93810

    详析获取标签

    小编也与大家分享了JS逻辑与DOM的相结合，并带着大家去实现了一些简单的页面交互效果，涉及了获取标签—>绑定事件—>操作标签样式。...浏览器支持程度： IE9-（包括IE9）不支持非表单元素的获取，IE10+、Chrome、Firefox支持非表单元素的获取；比如：陈能堡 使用querySelector...没错，今天介绍的querySelector和querySelectorAll就是可以直接使用CSS选择器一样的写法的方法。...代码分析： querySelector和querySelectorAll他们之间的区别就好比getElementById和getElementsByTagName一样，querySelector返回的是单独的一个标签...，而querySelectorAll返回的是一个标签集合，换句话说就是querySelectorAll返回的结果是以类似数组的形式返回（语法与数组类似，但不属于数组）。

    2.4K90

    HTML5中类jQuery选择器querySelector的使用

    ('.foo,.bar');//返回带有foo或者bar样式类的首个元素 querySelectorAll 该方法返回所有满足条件的元素，结果是个nodeList集合。...elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div 但需要注意的是返回的nodeList集合中的元素是非实时（no-live...）的，想要区别什么是实时非实时的返回结果，请看下例： //首先选取页面中id为container...document.getElementById返回的便是实时结果，上面对其添加一个子元素后，再次获取所有子元素个数，已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点...所以正确的做法是将反斜杠转义后'.foo\\:bar'再传递给querySelector，后者在接收到'.foo\\:bar'这个参数后，字符串将两个反斜杠转义成一个，然后querySelector前面得到的一个反斜杠与冒号结合进行转义得到正确结果

    4.3K70

    JS快速入门（二）

    --默认值123--> 获取节点的方法（直接查找） 方法 说明 getElementById 获取带有指定id的节点 getElementsByTagName...() 获取带有指定标签名的节点集合 getElementsByClassName() 获取带有指定类名的节点集合 querySelector() 获取指定选择器或选择器组匹配的第一个节点 querySelectorAll...') getElementsByTagName()案例 document.getElementsByTagName('p') 这里获取到的是一个节点集合，节点集合无法直接用于 DOM 操作。...) 创建一个由标签名称 tagName 指定的 HTML元素（标签） appendChild(node) 将一个节点插入到指定父节点的子节点列表的末尾 insertAdjacentHTML(position...当事件属性returnValue 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面。否则，事件被静默处理。

    7.1K30

    JavaScript 基础

    (c=4):(c=3)假设 a = 5, b = 35 > 3为真, 则执行c = 4JavaScript 逻辑运算符&& 逻辑与，前后两个条件均为真才会执行| | 逻辑或，前后两个条件有一个为真就可以...非，求当前的值的非短路现象，由逻辑与和逻辑或的特性造成的特殊现象短路与：当条件 1 为假时，条件 2 执行与否不影响总结果，形成短路，称为一假即假短路或：当条件 1 为真时，条件 2 执行与否不影响总结果...('div1'); //获取 id 为div1 的元素getElementsByTagName()方法，将返回一个对象数组这个数组保存着所有相同元素名的节点列表document.getElementsByTagName...div1 的元素document.querySelector('.div1'); //获取 class 为 div1 的第一个元素querySelectorAll() 方法，通过元素的 css...选择器查找元素，筛选全部，将返回一个对象数组这个数组保存着所有符合选择器的节点列表，document.querySelectorAll('li'); //获取所有 li 元素，返回数组document.querySelectorAll

    1.4K50

    JavaScript基础-DOM操作：查找、创建、修改

    DOM（Document Object Model）是Web开发中的核心概念，它将HTML文档表示为一个可编程的对象集合，使得JavaScript能够动态地查询、创建、修改页面内容。...getElementsByTagName: 通过标签名查找多个元素。 querySelector: 使用CSS选择器查找第一个匹配的元素。...querySelectorAll: 使用CSS选择器查找所有匹配的元素。 易错点与避免策略 ID唯一性：使用getElementById时，确保ID在整个文档中是唯一的，否则行为可能不可预测。...性能考量：getElementsByClassName和getElementsByTagName返回的是实时的NodeList集合，频繁操作可能影响性能，考虑使用querySelectorAll获取静态集合...记住，虽然直接操作DOM可以实现丰富的交互效果，但也应注意性能优化，特别是在处理大量数据或频繁更新时，考虑使用现代框架或库来简化DOM操作，提高应用性能。

    31310

    webapi（一）初识DOM&定时器

    初识 作用 使用js去操作html和浏览器 分类 DOM：文档对象模型 BOM：浏览器对象模型 DOM（文档对象模型） 用来呈现 ，以及与任意 HTML 或 XML文档交互的 作用： 实现网页特效 实现用户交互...DOM树 含义: 将HTML文档以树状结构直观地表现出来 作用： 直观地体现了标签与标签之间的关系 DOM对象 含义： 浏览器根据html标签生成的JS对象 核心思想： 把网页内容当作对象来处理...作用：返回对象集合NodeList document.querySelectorAll('li') 注意： querySelector()方法获取到的元素可以直接修改，因为只有一个元素 querySelectorAll...} 伪数组 querySelectorAll() 方法获取到的元素是伪数组，有length,索引号等。...语法： // 获取到当前DOM元素他的一个 类的集合列表 元素.classList // 添加一个类 元素.classList.add('类名') // 删除一个类 元素.classList.remove

    60220

    前端架构师之10_JavaScript_DOM

    文档中的所有内容称为节点（Node）。 因此，一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分 。 <!...方法 说明 document.getElementById() 返回对拥有指定id的第一个对象的引用 document.getElementsByName() 返回带有指定名称的对象集合 document.getElementsByTagName...querySelector()方法用于返回文档中匹配到指定的元素或CSS选择器的第1个对象的引用。 querySelectorAll()方法用于返回文档中匹配到指定的元素或CSS选择器的对象集合。...一个元素的类选择器可以有多个，在开发中如何对选择器列表进行操作？ 原来的解决方案：利用元素对象的className属性获取，获取的结果是字符型，然后再根据实际情况对字符串进行处理。...返回值：是被移出的元素节点或属性节点。 3.4 练习作业 列表的增删和移动 编写HTML代码，设计列表的结构与显示样式。 编写SmartList对象，用于实现列表的生成。

    42710

    Web APIs第一天

    什么是DOM DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API 白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能...DOM树 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 描述网页内容关系的名词 作用：文档树直观的体现了标签与标签之间的关系 4....树 作用：文档树直观的体现了标签与标签之间的关系 浏览器根据html标签生成的 JS对象（DOM对象） DOM的核心就是把内容当对象来处理 是 DOM 里提供的一个对象 网页所有内容都在document...根据CSS选择器来获取DOM元素 (重点) 选择匹配的第一个元素 包含一个或多个有效的CSS选择器 字符串 CSS选择器匹配的第一个元素,一个 HTMLElement对象。...let num = document.querySelector('.box li:last-child') console.log(num) 选择匹配的多个元素 包含一个或多个有效的CSS选择器 字符串

    1.9K30

    JS魔法堂：那些困扰你的DOM集合类型

    DOM集合又何止这些呢，下面我们就一起来探讨一下吧！ 二、困扰你我的NodeList与HTMLCollection　　　　　　　　　　　　　　 相同点： 　　　　1. 类数组。...有length属性，可以用下标索引来访问其中的元素，但没有Array的slice等方法； 　　　　2. 只读。无法增删其中的元素； 　　　　3. 实时同步DOM树的变化。...// 各浏览器均抛SyntaxError异常 nodes = document.querySelectorAll('') 或 document.querySelectorAll(非字符串类型入参);...其特征与NodeList基本无异，唯一的区别就是StaticNodeList是不会实时同步DOM树变化，因此在polyfill querySelectorAll的时候就不用考虑实时同步DOM树变化的问题了...另外，JQuery中也有一个data函数，那么它跟以"data-"开头的自定义特性有什么关联呢？

    2.2K90

    DOM&BOM

    元素） 格式：document.getElementById("id值") 特点：一次只能获取一个对象 Java,从入门到入土！...查询选择器 格式：document.querySelector("选择器") 获取单个标签对象 querySelectorAll 和querySelector用法一样，querySelectorAll...}) diva[index].className = 'current'; } }) BOM BOM提供了一系列与浏览器窗口进行交互的对象...alert(“消息”) BOM没有通用的标准，所以在各个浏览器上显示的效果不一样 window.confirm("消息") \ confirm("消息"):弹出带有确定和取消按钮的消息框 window.prompt...("提示信息") \ prompt("提示信息"):弹出带有提示消息的输入框 onload 事件（页面加载） 浏览器是从上向下解析html文档代码的，所以之前要求script标签写在body标签的最下面

    1.3K20

    JavaScript笔记(11)之Web APIs阶段 获取元素

    我们之前学的呢,都是JS的基础部分,也就是ECMA规定的语法,后面我们就要学习BOM和DOM了....API (Application Programming Interface)应用程序接口,是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码...根据 getElementsByTagName( ) 方法可以返回带有指定标签名的对象的集合....得到的元素是动态的 如果页面中只有一个li,返回的还是伪数组的形式 如果页面中没有这个元素返回的是空的伪数组. 假如我们现在有ul,也有ol,但是我们只想要ol里面的li标签,那该怎么办呢?...根据HTML5获取 document.getElementsByClassName('类名') : 根据类名返回元素对象合集 上面的方法都有些繁琐了,现在有一个更新的方法, document.querySelector

    42710
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券