demo破坏升级

如果我们刚才所解释的dom破坏形式不再是单纯的x一层结构,而是x,y这种形式,两层结构,我们该怎么办

举个例子吧

我们的想法是先取x再取y,想法很简单,现实很苦感,看看结果吧

取出来的是undefined,无法取值

 但是我们通过另一种方式引入name的话就会有奇效

HTMLCollection 是⼀个element 的“集合”类,在最新的Dom 标准中 IDL 描述如下:

[Exposed=Window, LegacyUnenumerableNamedProperties] interface HTMLCollection { readonly attribute unsigned long length; getter Element? item(unsigned long index); getter Element? namedItem(DOMString name); };

⽂中也提到了

 HTMLCollection is a historical artifact we cannot rid the web of. While developers are of course welcome to keep using it, new API standard designers ought not to use it (use sequence in IDL instead). 

它是⼀种历史产物,并且在今天我们也可以继续使⽤这个类,只是对于API 标准设计者不推荐再使⽤。 关于它的⽤法我们可以去看官方文档:

HTMLCollection - Web API 接口参考 | MDN (mozilla.org)

让我们值得注意的是我们可以通过collection[name] 的形式来调⽤其中的元素,所以我们似乎可以通 过先构建⼀个HTMLCollection ,再通过collection[name] 的形式来调⽤。

很明显通过这种方式我们去实操,取出来了

我们来验证这句话

collection[name] 的形式来调⽤

直接让代码中变为一个元素

很明显集合中是有两个元素的

那我们测试一下通过x取值和通过y取值的效果是什么 

x直接是取了整个div

y是把div内部的a取出来了

我们也可以通过利⽤HTML标签之间存在的关系来构建层级关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var log = [];
        var html = [
            "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b",
            "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br",
            "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "command",
            "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div",
            "dl", "dt", "element", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer",
            "form", "frame", "frameset", "h1", "head", "header", "hgroup", "hr", "html", "i", "iframe",
            "image", "img", "input", "ins", "isindex", "kbd", "keygen", "label", "legend", "li",
            "link", "listing", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter",
            "multicol", "nav", "nextid", "nobr", "noembed", "noframes", "noscript", "object", "ol",
            "optgroup", "option", "output", "p", "param", "picture", "plaintext", "pre", "progress",
            "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow",
            "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary",
            "sup", "svg", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead",
            "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp"
        ];
        var div = document.createElement('div');
        for (var i = 0; i < html.length; i++) {
            for (var j = 0; j < html.length; j++) {
                div.innerHTML = '<' + html[i] + ' id="element1"><' + html[j] + ' id="element2"></' + html[j] + '></' + html[i] + '>';
                document.body.appendChild(div); // This line was missing in your original code
                if (window.element1 && element1.element2) {
                    log.push(html[i] + ',' + html[j]);
                }
                document.body.removeChild(div);
            }
        }
        console.log(log.join('\n'));
    </script>
</body>
</html>

结果证明这些都可以进行层级嵌套,并且两个里面都可以写id

那么我们试试两层嵌套,接下来的代码x.y是取到它了

 <output id=y>I've beenclobbered</output>

x是取整个from,废话不多说,开始实践

 很明显我们自定义中x.y是取到了中间值

只取x是整个from表单

很明显我们上面的假设成立,那很简单了,我们可以通过这两种方式去进行两层取值,而这种取值的方式标签有以下几种

那么三层关系呢????

我们同样也通过举例来进行说明(将我们上面所说一层和两层的技巧都用到了)

很明显,x是一个集合,x.y把name取出来了,x.z把标签中间的取出来了

验证图:

x.y.z(通过from取id)

单x(集合)

 x.y是from

上面不管是单层、双层、三层我们都是通过id和name去进行的,那我们可不可以自创建属性??

这个问题留给大家作为一个思考题

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/430461.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

stm32flash模拟eeprom

stm32f103CB的flash是128k&#xff08;起始地址是 0x08000000 到 0x0801FFFF&#xff09; falsh的末地址是0x801FFFF&#xff0c;即倒数一页是0x801FBFF&#xff08;1页按照1kB1024B来算&#xff09; stm32f103参考手册stm32f103cb.pdf stm32的FLASH分为主存储块和信息块&…

【C++庖丁解牛】初始化列表 | Static对象 | 友元函数

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 目录 1. 再谈构造函数1.1 …

总结zy_不定长数据帧的收发

1、接收部分 身份证模块串口接收解析&#xff1a; #define CRC_16_CCITT 0x1021 unsigned short CRC16_CCITT(unsigned char* pchMsg, unsigned short wDataLen) // 1. MSB { unsigned char i, chChar; unsigned short wCRC 0; while (wDataLen–) { chChar *pchMsg; wCRC ^…

电脑安装原版Windows7详细教程

前言 截止2024年3月3日&#xff0c;仍然有不少小伙伴想给电脑安装Windows7。所以今天给小伙伴们出一篇电脑安装原版Windows7的详细教程。 首先要知道部分CPU&#xff08;第六代或以上英特尔、AMD Ryzen系列&#xff09;平台并不支持Windows7&#xff0c;原因是有部分硬件设备…

前端监控为什么采用GIF图片做埋点?

一、什么是埋点监控 前端监控是开发人员用来跟踪和维护应用程序表现层的运行状况的过程和工具。它主要包括三种类型&#xff1a;数据监控、性能监控和异常监控。 1、数据监控 主要是为了收集跟用户相关的数据&#xff0c;例如用户设备类型、浏览器版本、页面浏览量&#xff08;…

【MGR】MySQL Group Replication 背景

目录 17.1 Group Replication Background 17.1.1 Replication Technologies 17.1.1.1 Primary-Secondary Replication 17.1.1.2 Group Replication 17.1.2 Group Replication Use Cases 17.1.2.1 Examples of Use Case Scenarios 17.1.3 Group Replication Details 17.1…

每日一题——LeetCode1582.二进制矩阵中的特殊位置

方法一 模拟 先把矩阵每一行和每一列中1的数量统计出来&#xff0c;然后遍历矩阵&#xff0c;元素为1的位置看他所在的行和列的1的数量是否都为1即为满足题意的点 var numSpecial function(mat) {let m mat.length, n mat[0].lengthlet rows new Array(m).fill(0)let col…

SOAPHound:一款功能强大的基于ADWS协议的活动目录环境枚举工具

关于SOAPHound SOAPHound是一款功能强大的基于ADWS协议的活动目录环境枚举工具&#xff0c;该工具本质上是一个.NET数据收集工具&#xff0c;可以帮助广大研究人员通过活动目录Web服务&#xff08;ADWS&#xff09;协议来收集目标活动目录的相关数据&#xff0c;从而实现活动目…

鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:组件内容模糊)

为当前组件添加内容模糊效果。 说明&#xff1a; 从API Version 10开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 foregroundBlurStyle foregroundBlurStyle(value: BlurStyle, options?: ForegroundBlurStyleOptions) 为当前组件提供…

【前端】i18n Ally插件使用

效果展示&#xff1a; 当鼠标放上去 vscode扩展搜i18n Ally 由于每个项目的语言可能做的都不一样&#xff0c;会导致无法找到真正的路径位置&#xff0c;所以我推荐 在项目的根目录找到.vscode再找到settings.json编辑它 比如我的翻译文件en.ts和zh-CN.ts&#xff0c;都在s…

Android使用陀螺仪

Android使用陀螺仪 陀螺仪基础运用与理解 在Android应用中使用陀螺仪可以帮助实现各种功能&#xff0c;比如游戏控制、虚拟现实体验、运动追踪等。以下是使用Android陀螺仪的基本步骤&#xff1a; 获取传感器服务&#xff1a; 首先&#xff0c;需要获取设备上的陀螺仪传感器服…

Java8 使用 stream().sorted()对List集合进行排序

集合对像定义 集合对象以学生类&#xff08;StudentInfo&#xff09;为例&#xff0c;有学生的基本信息&#xff0c;包括&#xff1a;姓名&#xff0c;性别&#xff0c;年龄&#xff0c;身高&#xff0c;生日几项。 使用stream().sorted()进行排序&#xff0c;需要该类实现 C…

Qt 实现橡皮擦拭显示图片

1.简介 在一些游戏中看见类似解密破案的效果&#xff0c;使用手触摸去擦拭图片上的灰尘&#xff0c;然后显示最终的图片&#xff0c;所以也想试试Qt实现的效果。大家有自己想做的效果&#xff0c;都可以尝试。 以下是效果展示图。 可以控制橡皮擦的大小&#xff0c;进行擦拭…

Python开发工具:pycharm使用注意事项以及设置

上一篇文章写了pycharm的安装以及运行&#xff0c;但是在安装过程中遇到了一些问题&#xff0c;接下来详细解析安装过程中遇到的问题&#xff0c;注意事项以及设置配置依赖等信息 安装遇到的问题&#xff1a; 协议许可证关闭不了&#xff1a;PyCharm安装完成后&#xff0c;打…

低代码平台开发——基于React(文末送书)

目录 小程一言适用对象本书达成 书籍介绍作者简介内容介绍书籍目录阅读指导 小程送书 小程一言 《低代码平台开发——基于React》这本书主要围绕低代码平台和React技术的结合展开&#xff0c;为读者提供了关于低代码平台开发的理论和实践知识。 ## 书中内容简介 书中内容分为…

AI大预言模型——ChatGPT与AI绘图及论文高效写作

原文链接&#xff1a;AI大预言模型——ChatGPT与AI绘图及论文高效写作 2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网…

文件上传之图片马

图片马介绍 图片马&#xff1a;就是在正常图片中插入木马。 图片马的制作 1.我们先创建php木马文件1.php&#xff0c;内容有以下两种方式&#xff1a; <?php eval($_POST[a]); ?> /* 常规一句话木马 */ <?php $aPD9waHAgQGV2YWwoJF9QT1NUWydhJ10pOz8; $myfile…

Python图像处理【21】基于卷积神经网络增强微光图像

基于卷积神经网络增强微光图像 0. 前言1. MBLLEN 网络架构2. 增强微光图像小结系列链接 0. 前言 在本节中&#xff0c;我们将学习如何基于预训练的深度学习模型执行微光/夜间图像增强。由于难以同时处理包括亮度、对比度、伪影和噪声在内的所有因素&#xff0c;因此微光图像增…

Qt::TabWidget

在Tab的右上角添加控件 QPushButton *add new QPushButton; add->setText(""); add->resize(30,30); ui->tabWidget->setCornerWidget(add,Qt::TopRightCorner); 结果&#xff1a; Tab添加子页 QWidget*newp new QWidget; ui->tabWidget->add…

Chain-of-thought prompting(链式思考提示)

1.大模型“涌现”的思维链 最近 AI 大厂的开发人员和高校的 NLP 研究人员&#xff0c;都在琢磨&#xff0c;怎么让大模型“涌现”。 所谓“涌现”&#xff0c;在大模型领域指的是当模型突破某个规模时&#xff0c;性能显著提升&#xff0c;表现出让人惊艳、意想不到的能力。比如…