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

JavaScript 基础知识(四)

如图： ECMAScript标准 即JS的基本语法，JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关。...获取所有a元素 document.cookie 文档的cookie document.URL 当前文档的URL document.referrer 返回使浏览者到达当前文档的URL document.write...() 通过class获取元素 document.getElementsByName() 通过name获取元素 document.querySelector() 通过选择器获取元素，只获取第1个 document.querySelectorAll...() 通过选择器获取元素，获取所有 document.createElement() 创建元素节点 document.createTextNode() 创建文本节点 document.write() 输出内容...location.port 返回 web 主机的端口 （80 或 443） location.protocol 返回所使用的 web 协议（http: 或 https:） window.location.href

57020

再谈BOM和DOM(3):DOM节点操作-元素样式修改及DOM内容增删改查

操作节点，先得选择节点，就得知道节点选择器与DOM节点查找 DOM节点选择器 W3C提供了比较方便的定位节点的方法和属性 getElementById() 一个参数:元素标签的ID getElementsByTagName...() 接收CSS选择符，返回匹配到的第一个元素，没有则null querySelectorAll() 接收CSS选择符，返回一个数组，没有则返回[] DOM节点关系与节点查找 遍历节点树，所涉及发方法...(不包括文本节点和注释) ownerDocument 指向整个文档的文档节点 node与element的区别 element是包含在node里的，它的nodeType是1 parentElement匹配的是...所有子节点(包括元素、注释和文本节点) outerHTML 返回自身节点与所有子节点 textContent 与innerText类似，返回的内容带样式 data 文本内容 length 文本长度 createTextNode...文档中所有带name属性的元素 document.links 文档中所有带href属性的元素 document.forms 文档中所有的元素 document.images 文档中所有的

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

    《CSS选择器世界》读书笔记

    某个元素的querySelectorAll会把自己也算进去 不算进去则使用下面 document.querySelector('#myId').querySelectorAll(':scope div...（目前只有Chrome支持） URL定位伪类 :link伪类用来匹配页面上href链接没有访问过的元素，已访问的元素则不匹配（用处不大，通常直接用a标签选择符就可以了）。...:any-link不兼容IE11，其他浏览器兼容性良好，匹配规则如下： 匹配所有设置了href属性的链接元素，包括，和； 匹配所有匹配:link伪类或者:visited伪类的元素...:placeholder-show：占位符显示时匹配，由于占位符是在输入内容为空的时候出现，所以可以使用:placeholder-show来判断表单是否为空。...就是我们在标签中设置required或者pattern等属性的时候，会判断是否有效，匹配对应的伪类。

    44110

    从浏览器原理拆解：为什么你的CSS选择器拖慢了页面？

    例如选择器 .nav li a 的执行逻辑是：收集页面所有 标签（关键选择器）向上过滤父元素是否为 再向上过滤是否在 .nav 中。...{ border: 1px solid #eee;}2.3 案例三：属性选择器的性能陷阱问题代码：/* 属性前缀匹配 */a[href^="https://"] { color: green;}/...优化方案：// 构建时添加特定类名document.querySelectorAll('a[href^="https://"]') .forEach(el => el.classList.add('external-link...'));.external-link { color: green;}三、优化方案与实施3.1 关键选择器优化（核心原则）（1）规则 1：使用“靶向”关键选择器/* ❌ 低效：关键选择器为通配符 */...四、兼容性陷阱与解决方案4.1 新选择器的兼容性覆盖选择器支持率Polyfill 方案:is()Chrome 88+使用 PostCSS 插件 postcss-preset-env降级:has()Safari

    41020

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

    () 删除空文本节点，并连接相邻节点的 document.querySelector() 返回文档中匹配指定的CSS选择器的第一元素 document.querySelectorAll() document.querySelectorAll...() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表 document.removeEventListener() 移除文档中的事件句柄(由 addEventListener...方法的参数使用 CSS 选择器语法，getElementById 方法的参数是 HTML 标签元素的 id 属性。...querySelectorAll() 返回匹配指定的 CSS 选择器的所有节点，返回的是 NodeList 类型的对象。...// 返回class属性是note或alert的div元素 elementList = document.querySelectorAll(selectors); // 逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素

    1.2K31

    【源码】optimal-select 是如何获取到 HTML 元素指纹（CSS Selector）

    选择 optimal-select 的原因如下： CSS Selector 相比 xpath 具有更优的性能和可读性. optimal-select 支持选择多个元素 支持配置匹配优先级（priority...比如 priority: ['id', 'class', 'href', 'src'] 就会有优先采取 id 匹配，再到 class 匹配，最后才是 href 和 src 整体结构 整体文件就 7 个...，但是众所众知，CSS Selector 可能不仅仅选中一个元素，这里通过 querySelectorAll 判断是否唯一，这种判断在这个库中多次运用： if (pattern) { // 检查是否唯一...： getCommonAncestor 获取元素中公共的祖先，并使用 getSingleSelector 获取到公共祖先的唯一标识 getCommonSelectors 获取到该元素所有的公共 CSS...假如有公共的属性，判断当前的属性是否等于已有的公共属性，假如不等于，则删除。以下使用 tag 为例（最简单的判断） // ~ tag if (commonTag !

    1.7K20

    用 Node.js 爬虫下载音乐

    通过 jsdom 使用 CSS 选择器 如果你想在查询中获得更具体的信息，可以用 HTML 解析器(https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors...如果要获取 ID 为 “menu” 的div，则可以用 querySelectorAll('#menu')，并且如果要获取 VGM MIDI 表格中的所有标题列，则可以执行 querySelectorAll...可以用 forEach 函数浏览给定选择器中的所有元素。遍历页面上的每个链接都很棒，但是如果要下载所有 MIDI 文件，则需要更具体一些。...这些函数遍历给定选择器的所有元素，并根据是否应将它们包含在集合中而返回 true 或 false。 如果查看了上一步中记录的数据，可能会注意到页面上有很多链接没有 href 属性，因此无处可寻。...如果你正在寻找与刚刚从视频游戏音乐档案库中获取的数据有关的内容，则可以尝试使用 Python 库，例如 Magenta to train a neural network with it（https:/

    6.5K31

    Web APIs第一天

    树 作用：文档树直观的体现了标签与标签之间的关系 浏览器根据html标签生成的 JS对象（DOM对象） DOM的核心就是把内容当对象来处理 是 DOM 里提供的一个对象 网页所有内容都在document...根据CSS选择器来获取DOM元素 (重点) 选择匹配的第一个元素 包含一个或多个有效的CSS选择器 字符串 CSS选择器匹配的第一个元素,一个 HTMLElement对象。...let num = document.querySelector('.box li:last-child') console.log(num) 选择匹配的多个元素 包含一个或多个有效的CSS选择器 字符串...CSS选择器匹配的NodeList 对象集合 let num = document.querySelectorAll('.box li') console.log(num) 获取一个DOM元素我们使用谁...querySelector() 只能选择一个元素， 可以直接操作 querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素 他们两者小括号里面的参数有神马注意事项？

    2.1K30

    静态代码扫描方法及工具介绍

    本文作者：国勇（信安之路特约作者） 静态扫描就是不运行程序，通过扫描源代码的方式检查漏洞，常见的方法也有多种，如把源代码生成 AST（抽象语法树）后对 AST 进行分析，找出用户可控变量的使用过程是否流入到了危险函数...AST 扫描 与 正则匹配两种常见静态扫描方式。...此方式把源码生成 AST(抽象语法树)，找出用户可控的 source (如 location.href，document.url，document.documentURI) 是否流入到了敏感的 skin...正则匹配 这种方式比较简单，就是匹配程序中是否出现了哪些敏感字符，如 bodyParse() 或者敏感代码，当函数中的代码命中了设置的规则，则就产生了漏洞，举个例子 (.readFile()(.{0,40000...NodeJSScan 是一套用 python 实现的 node 应用代码扫描器，他的原理是通过正则表达式来匹配源码文件中的每一行，每个正则表达式都代表一种漏洞扫描规则，如是否使用了 url 中的值当成

    8.7K20

    发送Http请求

    这是第一部分, 主要使用的是AngleSharp: https://anglesharp.github.io/ (文章的章节书与该书是对应的) 第1章 初见网络爬虫 发送Http请求  在python里面这样发送...而使用document.QuerySelector("html > body > h1").OuterHtml 也是同样的效果, 因为标准的CSS选择器是都支持的...., 下面这两个元素在页面中可能会出现很多次: 我们可以使用AngleSharp里面的QuerySelectorAll()方法把所有符合条件的元素都找出来, 返回到一个结果集合里....使用AngleSharp, 找出子标签可以使用.Children属性. 而找出后代标签, 可以使用CSS选择器....这里有一个测试正则表达式的网站: https://www.regexpal.com/ 目前, AngleSharp支持通过CSS选择器来查找元素, 也可以使用Linq来过滤元素, 当然也可以通过多种方式使用正则表达式进行更复杂的查找动作

    5.5K30

    .NET Core 网络数据采集 -- 使用AngleSharp做html解析

    这是第一部分, 主要使用的是AngleSharp: https://anglesharp.github.io/ (文章的章节书与该书是对应的) 第1章 初见网络爬虫 发送Http请求  在python里面这样发送...而使用document.QuerySelector("html > body > h1").OuterHtml 也是同样的效果, 因为标准的CSS选择器是都支持的...., 下面这两个元素在页面中可能会出现很多次: 我们可以使用AngleSharp里面的QuerySelectorAll()方法把所有符合条件的元素都找出来, 返回到一个结果集合里....使用AngleSharp, 找出子标签可以使用.Children属性. 而找出后代标签, 可以使用CSS选择器....这里有一个测试正则表达式的网站: https://www.regexpal.com/ 目前, AngleSharp支持通过CSS选择器来查找元素, 也可以使用Linq来过滤元素, 当然也可以通过多种方式使用正则表达式进行更复杂的查找动作

    4.8K00

    contextpath有什么用_context的用法

    大家好，又见面了，我是你们的朋友全栈君 使用基于Java的后端(即servlet和JSP)，如果我需要JavaScript的contextPath，那么推荐的模式是什么？为什么？我可以想到几种可能性。...1.将SCRIPT标记刻录到在某些JavaScript变量中设置的页面中 这是准确的，但在加载页面时需要脚本执行。...3.尝试通过检查document.URL或BASE标记在JavaScript中找出来 function() { var base = document.getElementsByTagName(‘base...’)[0]; if (base && base.href && (base.href.length > 0)) { base = base.href; } else { base = document.URL...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

    1K20

    Document对象

    Document对象向网页文档本身提供了全局操作功能，接口描述了任何类型的文档的通用属性与方法，根据不同的文档类型(例如HTML、XML、SVG、...)能够使用更多API，此外使用text/html作为内容类型...document.links: document.links属性返回一个文档中所有具有href属性值的元素与元素的集合。...document.querySelector(selectors): 表示文档中与指定的一组CSS选择器匹配的第一个元素，是一个HTMLElement对象，如果没有匹配到，则返回null。...匹配是使用深度优先先序遍历，从文档标记中的第一个元素开始，并按子节点的顺序依次遍历。...document.querySelectorAll(selectors): 返回一个静态NodeList，包含一个与至少一个指定CSS选择器匹配的元素的Element对象，或者在没有匹配的情况下为空NodeList

    2.1K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券