但是当你没有引用 jQuery时，你仍然可以在谷歌开发控制台中进行同样的操作。...$('tagName') $('.class') $('#id') and $('.class #id') 等效于document.querySelector(' ')，这将返回 DOM 中与选择器匹配的第一个元素...选择DOM元素 将浏览器转换为编辑器 你有多少次想知道你是否可以在浏览器中编辑一些文本？ 答案是肯定的，你可以将浏览器转换为文本编辑器。 你可以在 DOM 中的任何位置添加文本和从中删除文本。...getEventListeners($(‘selector’)) 返回一个对象数组，其中包含绑定到该元素的所有事件。你可以展开对象来查看事件: ?...监控事件 如果希望在执行绑定到 DOM 中特定元素的事件时监视它们，也可以在控制台中这样做。
例如，你想选中第一个带有green类的span元素，你可以这么写： $('span.green')[0] 在现代浏览器中还可以用以下稍显冗长的语句实现相同的功能： document.querySelector...这意味着如果你在控制台中使用了$，你并不能很容易的分辨这个$来自哪里（来自jQuery，还是document.querySelector的别名，亦或是页面的开发人员定义的其它内容）。...在某些浏览器例如Opear和Chrome中，你可以通过查看输出在控制台上的内容来判断。只需要在控制台中输入$，然后按回车键。...调试事件 如果你在浏览器端做过JavaScript开发，那么你对事件一定不陌生。在本节中我们将讨论一些可以帮助我们调试事件监听器的方法。...它执行后的返回值是一个对象，该对象的属性名是绑定了事件监听器的事件名（例如“click”或是“keydown”），对应的属性值则是包含了该事件下所有事件监听器的数组。
为了添加一个请求正文，你可以包含body选项。 为了设置标题，存在headers选项。 例如，这个请求包含Range协议，它指示服务器只返回一部分响应。...幸运的是，服务器可以在响应中包含这样的协议头，来明确地向浏览器表明，请求可以来自另一个域： Access-Control-Allow-Origin: * 运用 HTTP 当构建一个需要让浏览器（客户端）...在交换数据之前，客户端证实该服务器是它所声称的东西，通过要求它证明，它具有由浏览器承认的证书机构所颁发的证书。 接下来，通过连接传输的所有数据，都将以某种方式加密，它应该防止窃听和篡改。...当一个程序在处理一些由按键或其他控制方式出发的事件，并且这些事件可能要求和服务器的通信时，将元素禁用直到动作完成可能是一个很好的方法。...它选择name属性为"color"的元素。 选择字段 选择字段和单选按钮比较相似，允许用户从多个选项中选择。但是，单选框的展示排版是由我们控制的，而标签外观则是由浏览器控制。
你可以直接在浏览器做个测试，找到一个带有 ID 的元素： 通常，我们会使用 querySelector("#ConardLi") 或 getElementById...("ConardLi") 定义一个新变量来选择这个元素： var element = querySelector("#ConardLi"); 但我们实际上已经可以直接在没有这种繁琐代码的情况下访问 #...Internet Explorer 是第一个实现这个功能的浏览器，后来所有其他浏览器也对它提供了支持。Gecko 内核是当时唯一不直接在标准模式下支持它的浏览器，而是选择将其作为实验性功能。...「浏览器中的实现方式有所不同」：id例如，我们应该能够使用- 例如-访问锚点，但某些浏览器（即 Safari 和 Firefox）ReferenceError在控制台中返回 a...根据规范，当 DOM 中有多个相同命名元素的实例时 (例如 的两个实例)，浏览器应该返回一个包含实例数组的 HTMLCollection。
类似 JQuery 的选择器可实现更快的 DOM 节点选择 在Web开发中，快速有效地选择DOM元素是一项常见且重要的任务。...JQuery库以其简洁的语法和强大的功能而广受欢迎，它使用CSS选择器来选择DOM元素，相较于传统的Web API，JQuery提供了更加高效的方式。...在Chrome控制台中，$ 符号被用作 document.querySelector 方法的快捷方式，使你能够快速查询单个元素。...它们提供了快速访问和操作DOM元素、复制数据到剪贴板等功能，从而极大地提高了开发者的生产效率。 $_ 变量是一个非常实用的快捷方式，它返回在控制台上执行的上一个表达式的返回值。...例如： 此外，$0 变量是另一个非常有用的快捷方式，它指向在Elements标签页（即DOM检视器）中当前选中的DOM元素。这在调试时非常方便，尤其是当你需要快速访问或修改DOM元素的属性时。
在控制台输入： location.href='/gate'; 第二关 ? 第二关作者使用了一个古老的程序梗“点不到的元素”，用户想要点击到元素，但是一旦元素检测到鼠标“进入”，就会“躲开”。...那么在控制台执行下面的代码，设置元素为非动态定位即可。...比如像下面这样，在控制台中执行，也可以让门的位置固定，任由宰割： var door=document.querySelector('.zoo-door'); setInterval(()=>{door.style.top...第四关，使用了另外一个老梗，“隐藏文本”。 CTRL+A，可以看到隐藏的“SHA256”的提示，结合控制台中输出的 ZooTeam:hey!...document.querySelector('.question___20202').style.zIndex=1 在控制台中输入代码，看到默认 cookie 中有一条名为 nextUrl 的设置内容
() 获取指定选择器或选择器组匹配的第一个节点 querySelectorAll() 获取指定选择器或选择器组匹配的所有节点集合 除了函数方法，我们还可以使用属性来获取节点信息，下表介绍了一些获取元素节点信息常用的属性...________(disbaleItem) removechild 在ul中的最后一个li元素后添加一个新的li元素，li元素文字内容为input元素的输入值，请补全横线处代码（依次填写答案，使用中文逗号...ul的最后一个元素后插入，参数只有一个lastItem代表元素节点，最后一空应为符合要求的节点添加方法 将内容为第一名的元素插入到ol元素内的第一行，请补全横线处代码 第二名...如果属性名原来包含“-”，则需转换为小驼峰形式，如：backgroundColor，marginLeft 通过classList控制样式 classList属性返回一个元素类属性集合（这里可以简单理解为类名的集合...(url) 打开新url替换当前页面（替换当前浏览记录） history对象 history对象包含用户浏览器的历史记录，但是不可读取，经常用于页面跳转 名称 描述 示例 back() 返回历史记录的上一个
DOM：文档对象模型（Document Object Model），可以访问HTML文档的所有元素 结构图 BOM BOM 即浏览器对象模型（Browser Object Model），它提供了页面与浏览器窗口进行交互的对象接口...() 获取指定选择器或选择器组匹配的第一个节点 querySelectorAll() 获取指定选择器或选择器组匹配的所有节点集合 getElementById案例 //获取 id 为 container...()代码示例 //获取被选择器'.box .item'匹配的第一个节点 document.querySelector('.box .item') //获取选择器'div'（标签）匹配的节点 document.querySelector...返回指定元素的第一个子元素节点 lastElementChild 返回指定元素的最后一个子元素节点 innerHTML和innerText示例 document.querySelector('.box...属性返回一个元素类属性集合（这里可以简单理解为类名的集合），通过使 用 classList 中的方法可以方便的访问和控制元素类名，达到控制样式的目的 classList 常用方法： 方法 说明
获取元素节点信息常用属性： 名称 描述 innerHTML 返回元素内包含的所有HTML内容（文本和标签），类型为字符串 parentNode 返回指定节点的父节点 children 返回指定元素的子元素节点集合...firstElementChild 返回指定元素的第一个子元素节点 lastElementChild 返回指定元素的最后一个子元素节点 3....________('div#container') 答案：querySelector “div#container”属于CSS选择器字符串，且id名不可重复，选择的只能是一个元素，所以需要获取指定选择器或选择器组匹配的第一个节点...（2）在ul中的最后一个li元素后添加一个新的li元素，li元素文字内容为input元素的输入值，请补全横线处代码（依次填写答案，使用中文逗号「，」隔开） <input type="text...， 由于需要在ul的最后<em>一个</em><em>元素</em>后插入，参数只有<em>一个</em>lastItem代表<em>元素</em>节点，最后一<em>空</em>应为符合要求的节点添加方法。
1.2、JavaScript特点 JavaScript主要被作为客户端脚本语言在浏览器上运行，能被用来设计和处理网页在事件发生时的行为。JavaScript不仅易学而且强大，因此广泛用于对网页的控制。...3.1、选择符API Selectors API(选择符API)是由W3C发起制定的一个标准，致力于浏览器原生支持CSS查询，SelectorsAPILevel 1的核心是两个方法：querySelector...(1)、querySelector()方法 querySelector()方法通过CSS选择符查询元素，返回与该选择器匹配的第一个元素，如果没有找到匹配的元素则返回null。 <!...(2)、querySelectorAll()方法 方法querySelectorAll()与jQuery的$(selector)类似，接受的参数是一个CSS选择符，返回的是所有匹配元素集合而不仅仅是一个元素...这个方法返回的是一个NodeList的实例，如果没有找到NodeList对象就是空的。 <!
控制台中直接访问页面元素 在元素面板选择一个元素,然后在控制台输入$0,就会在控制台中得到刚才选中的元素。如果页面中已经包含了 jQuery,你也可以使用$($0)来进行选择。...访问最近的控制台结果 在控制台输入$_可以获控制台最近一次的输出结果。 ? 3. 访问最近选择的元素和对象 控制台会存储最近 5 个被选择的元素和对象。...当你在元素面板选择一个元素或在分析器面板选择一个对象,记录都会存储在栈中。 可以使用$x来操作历史栈,x 是从 0 开始计数的,所以$0 表示最近选择的元素,$4 表示最后选择的元素。 ? 4....选择元素 $() – 返回满足指定 CSS 规则的第一个元素，此方法为 document.querySelector()的简化。...await 16. debugger 断点 有时候我们需要打断点进行单步调试,一般会选择在浏览器控制台直接打断点,但这样还需要先去 Sources 里面找到源码,然后再找到需要打断点的那行代码,比较麻烦
我们将会使用Puppeteer，Puppeteer是一个Node库，提供接口来控制headless Chrome。...第5行： 我们在浏览器中创建一个新的页面，通过使用await关键字来等待页面成功创建 const page = await browser.newPage(); 第6行： await page.goto...await page.waitFor(1000); 第二步：抓取数据 我们接下来要选择页面上的第一本书，然后获取它的标题和价格。...如果多个元素满足，那么默认选择第一个。 幸运的是，谷歌开发者工具提供一个可以快速找到选择器元素的方法。在图片上方右击，选择检查(Inspect)选项。...而我们则关心它的标题和价格部分。 为了获取它们，我们首选需要使用page.evaluate()函数。该函数可以让我们使用内置的DOM选择器，比如querySelector()。
：保存报错的堆栈信息作为 log 文件，而不是单纯的截图 3.2 代码块保存和复用 如果经常需要在控制台中调用某段代码块，可以考虑把它保存起来以便复用。...例如，jq 中的 $('div') 可以选中所有 div 元素，而控制台中的 $('div') 则类似于 document.querySelector('div')，只能匹配第一个 div。...3.5 监听元素状态改变： 右键目标元素，选择 break on 的触发条件： subtree modifications ：当前节点的子节点被 移除 或者 添加 时触发断点 attribute modifications...console.log() 打印对象的时候，需要注意它打印的是那时的快照（snapshot），所以在未展开对象的时候，打印结果符合我们的预期： image.png 但是在展开对象后，浏览器会重新读取引用的对象本身的属性...，试着打开百度： image.png 点击 inspect 会打开一个新窗口，在这里可以进行调试： image.png 所有的操作会同时同步在 PC 端和手机端的页面上。
Puppeteer是一个流行的Node.js库,在开发者中广泛使用的用于网页爬取和自动化任务的工具。它提供两种操作模式，即headfull和headless。...在headfull模式下，Puppeteer控制的Chrome或Chromium浏览器是有界面的，也就是可以看到浏览器运行的情况。在此模式下，可以使用浏览器的开发者工具进行调试。...而在headless模式下，它在后台运行，没有用户界面，这种模式非常适合在服务器上运行，因为没有界面，所以可以节省很多资源。该工具还提供缓存资源的选项，这可以帮助减少页面加载时间并提高性能。...此外，Puppeteer允许开发人员在页面中执行JavaScript代码，并使用代理更改请求的IP地址，这对于匿名请求或从不同区域访问内容很有用。...代码中使用了异步方式处理页面元素，以提高爬虫的效率，同时还增加了对代理用户名和密码的认证。最终，代码将获取到的视频简介信息输出到控制台中。
控制台中直接访问页面元素 在元素面板选择一个元素,然后在控制台输入 $0,就会在控制台中得到刚才选中的元素。如果页面中已经包含了 jQuery,你也可以使用 $($0)来进行选择。...访问最近的控制台结果 在控制台输入 $_可以获控制台最近一次的输出结果。 ? _ 3. 访问最近选择的元素和对象 控制台会存储最近 5 个被选择的元素和对象。...当你在元素面板选择一个元素或在分析器面板选择一个对象,记录都会存储在栈中。可以使用 $x来操作历史栈,x 是从 0 开始计数的,所以 $0 表示最近选择的元素, $4 表示最后选择的元素。 ?...选择元素 $() - 返回满足指定 CSS 规则的第一个元素，此方法为 document.querySelector()的简化。...实时表达式 Live Expression 从 chrome70 起,我们可以在控制台上方可以放一个动态表达式,用于实时监控它的值。Live Expression 的执行频率是 250 毫秒。
比如用上键就相当于使用上次在控制台的输入符号 2、$_命令返回最近一次表达式执行的结果，功能跟按向上的方向键再回车是一样的 上面的$_需要领悟其奥义才能使用得当，而0 4则代表了最近5个你选择过的DOM...在页面右击选择审查元素，然后在弹出来的DOM结点树上面随便点选，这些被点过的节点会被记录下来，而$0会返回最近一次点选的DOM结点，以此类推，$1返回的是上上次点选的DOM节点，最多保存了5个，如果不够...3、Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节点 4、copy通过此命令可以将在控制台获取到的内容复制到剪贴板 （哈哈 刚刚从控制台复制的...方法了 6、monitor & unmonitor monitor(function)，它接收一个函数名作为参数，比如function a,每次a被执行了，都会在控制台输出一条信息，里面包含了函数的名称...console.log 改变输出文字的样式 2、利用控制台输出图片 3、指定输出文字的样式 最后说一下chrome控制台一个简单的操作，如何查看页面元素，看下图就知道了 你在控制台简单操作一遍就知道了
通常当服务器响应一个请求时，它们可能包含一个 SET-COOKIE 头，给浏览器一个要存储的键和值。然后，客户端应该在未来的请求头中包含这个 cookie，这将允许服务器识别浏览器会话等。...这些 cookie 通常具有 HTTP-Only 属性，这意味着不能通过客户端脚本访问 cookie。这使得 cookie 不是保存脱机数据的好选择。...IndexedDB：一个内置在浏览器中的完整文档数据库，没有存储限制，它允许你异步访问数据，这对于防止复杂操作阻塞呈现和其他活动非常有效。这就是我们将在下面深入讨论的内容。...在这些方式中，localStorage 是进行简单操作和存储少量数据的好选择。对于更复杂或常规的操作，IndexedDB 可能是更好的选择，特别是在需要异步获取数据的情况下。...，我们循环遍历 todos，将它们存入 todos 数组并调用 renderTodos()，因此它们被渲染到 dom 中 你应该在控制台中看到一个 console.log，其中包含一个空数组。
现在假设一个场景，如果一个数组里面有成百上千的元素，但是你想知道每个元素具体的值，这时候想想如果你用alert那将是多惨的一件事情，因为alert阻断线程运行，你不点击alert框的确定按钮下一个alert...在页面右击选择审查元素，然后在弹出来的DOM结点树上面随便点选，这些被点过的节点会被记录下来，而$0会返回最近一次点选的DOM结点，以此类推，$1返回的是上上次点选的DOM节点，最多保存了5个，如果不够...3、Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节点 ? 4、copy通过此命令可以将在控制台获取到的内容复制到剪贴板 ?...6、monitor & unmonitor monitor(function)，它接收一个函数名作为参数，比如function a,每次a被执行了，都会在控制台输出一条信息，里面包含了函数的名称a...看了这张图，应该明白了，也就是说在monitor和unmonitor中间的代码，执行的时候会在控制台输出一条信息，里面包含了函数的名称a及执行时所传入的参数。
选择符 API ---- Selectors API 是由 W3C 发起制定的一个标准，致力于让浏览器原生支持 CSS 查询。...在兼容的浏览器中，可以通过 Document 及 Element 类型的实例调用它们。...querySelector() 方法 querySelector() 方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null: //取得body元素 var...querySelectorAll() 方法 querySelectorAll() 方法接收的参数与 querySelector() 方法一样，都是一个 CSS 选择符，但返回的是所有匹配的元素而不仅仅是一个元素...这个方法接收一个参数，即 CSS 选择符，如果调用元素与该选择符匹配，返回 true，否则，返回 false: if (document.body.matchesSelector("body.page1
01 方法列表 querySelector（元素向下查询，返回一个） querySelectorAll（元素向下查询，返回多个） closest（元素向上查询） dataset（获取元素以"data-"...获取指定元素中匹配css选择器的元素： // 作用在document document.querySelector("#nav"); // 获取文档中id="nav"的元素 document.querySelector...，返回第一个li 注意：无论如何只返回一个元素，如果有多个素，那也只返第一个✅ - querySelectorAll 获取指定元素中匹配css选择器的所有元素： let list = document.querySelectorAll...可以判断指定元素是否包含了指定的子元素： document.querySelector("div").contains(document.querySelector...，如网页端的微信，当收到消息时，右下角会出现一个通知（尽管你把浏览器最小化），因为这个通知时独立于浏览器的，是系统的一个原生控件： const notice = new Notification("前端宇宙情报局
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
