《dom》专题
-
event: <DOM-event: handler-function>
此绑定用于侦听特定的DOM事件以及基于它的与处理程序函数关联的调用。 Syntax event: <{DOM-event: handler-function}> Parameters 参数包含一个JavaScript对象，包含将被侦听的DOM事件和一个需要根据该事件调用的处理函数。 这个函数可以是任何JavaScript函数，也不一定是ViewModel函数。 Example 让我们看一下下面的
-
DOM 操作
大部分情况下你不需要通过查询 DOM 元素去更新组件的 UI，你只要关注设置组件的状态（setState）。但是可能在某些情况下你确实需要直接操作 DOM。 首先我们要了解 ReactDOM.render 组件返回的是什么？ 它会返回对组件的引用也就是组件实例（对于无状态状态组件来说返回 null），注意 JSX 返回的不是组件实例，它只是一个 ReactElement 对象（还记得我们用纯 JS
-
文档树（DOM Tree）
文档树 Document Object Model (DOM) 为文档对象模型， 它使用对象的表示方式来表示对应的文档结构及其中的内容。 下面为一个样例 p 元素在文档中的对象所包含的所有属性。 <p>Hello, World!</p> p#targetaccessKey: "" align: "" attributes: Named NodeMapbaseURI: "" childElemen
-
DOM 编程
DOM 编程就是使用 W3C 定义的 API (Application Program Interface) 来操作 HTML 文档 （此处不局限于 HTML，亦可操作 XHTML、XML 等），使用户可以与进行页面交互。 你需要了解节点、属性、样式等基本 DOM 操作，DOM 事件模型，数据存储 (Cookie、Storage) 与数据通信 (Ajax) ，JavaScript 动画，音频、视频
-
基于DOM跨站脚本测试 (OTG-CLIENT-001)
Summary DOM-based Cross-Site Scripting is the de-facto name for XSS bugs which are the result of active browser-side content on a page, typically JavaScript, obtaining user input and then doing someth
-
Shadow DOM 和事件（events）
Shadow tree 背后的思想是封装组件的内部实现细节。 假设，在 <user-card> 组件的 shadow DOM 内触发一个点击事件。但是主文档内部的脚本并不了解 shadow DOM 内部，尤其是当组件来自于第三方库。 所以，为了保持细节简单，浏览器会重新定位（retarget）事件。 当事件在组件外部捕获时，shadow DOM 中发生的事件将会以 host 元素作为目标。 这里有
-
给 Shadow DOM 添加样式
shadow DOM 可以包含 <style> 和 <link rel="stylesheet" href="…"> 标签。在后一种情况下，样式表是 HTTP 缓存的，因此不会为使用同一模板的多个组件重新下载样式表。 一般来说，局部样式只在 shadow 树内起作用，文档样式在 shadow 树外起作用。但也有少数例外。 :host :host 选择器允许选择 shadow 宿主（包含 shado
-
Shadow DOM 插槽，组成
许多类型的组件，例如标签、菜单、照片库等等，需要内容去渲染。 就像浏览器内建的 <select> 需要 <option> 子项，我们的 <custom-tabs> 可能需要实际的标签内容来起作用。并且一个 <custom-menu> 可能需要菜单子项。 使用了 <custom-menu> 的代码如下所示： <custom-menu> <title>Candy menu</title> <i
-
影子 DOM（Shadow DOM）
Shadow DOM 为封装而生。它可以让一个组件拥有自己的「影子」DOM 树，这个 DOM 树不能在主文档中被任意访问，可能拥有局部样式规则，还有其他特性。 内建 shadow DOM 你是否曾经思考过复杂的浏览器控件是如何被创建和添加样式的？ 比如 <input type="range">： 浏览器在内部使用 DOM/CSS 来绘制它们。这个 DOM 结构一般来说对我们是隐藏的，但我们可以在开
-
DOM 变动观察器（Mutation observer）
MutationObserver 是一个内建对象，它观察 DOM 元素，并在检测到更改时触发回调。 我们将首先看一下语法，然后探究一个实际的用例，以了解它在什么地方有用。 语法 MutationObserver 使用简单。 首先，我们创建一个带有回调函数的观察器： let observer = new MutationObserver(callback); 然后将其附加到一个 DOM 节点： ob
-
页面生命周期：DOMContentLoaded，load，beforeunload，unload
HTML 页面的生命周期包含三个重要事件： DOMContentLoaded —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像 <img> 和样式表之类的外部资源可能尚未加载完成。 load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。 beforeunload/unload —— 当用户正在离开页面时。 每个事件都是有用的： DOMContentLo
-
遍历 DOM
DOM 让我们可以对元素和它们中的内容做任何事，但是首先我们需要获取到对应的 DOM 对象。 对 DOM 的所有操作都是以 document 对象开始。它是 DOM 的主“入口点”。从它我们可以访问任何节点。 这里是一张描述对象间链接的图片，通过这些链接我们可以在 DOM 节点之间移动。 让我们更详细地讨论它们吧。 在最顶层：documentElement 和 body 最顶层的树节点可以直接作为
-
DOM 树
HTML 文档的主干是标签（tag）。 根据文档对象模型（DOM），每个 HTML 标签都是一个对象。嵌套的标签是闭合标签的“子标签（children）”。标签内的文本也是一个对象。 所有这些对象都可以通过 JavaScript 来访问，我们可以使用它们来修改页面。 例如，document.body 是表示 <body> 标签的对象。 运行这段代码会使 <body> 保持 3 秒红色状态: doc
-
13. Dom Xss 实例 [Discuz X2.5]
简要描述 我们教程的 DOM XSS 就到这里了。最后再给大家送上一个实例。希望大家能够体会到：XSS 的上下文非常重要，如何结合上下文， 利用未过滤字符，合理的构造，才是成功的关键。 详细说明 1. 我们直接看实例点。 http://www.discuz.net/connect.php?receive=yes&mod=login&op=callback&referer=aaaaaaaaaaa&o
-
12. Dom Xss 进阶 [路径 con]
简要描述 我不是萝莉 con,我是路径 con。 一些程序员会动态的加载 json 数据，同域的时候，可以使用 ajax；而有时候，数据所在域和当前页面所在域又不一致。所以需要跨域 请求。跨域请求数据的手段中，有一种叫做 jsonp。 用代码表示的话，就是 somescript.src="http://otherdomain.com/xx?jsonp=callback" 某些时候，程序员会在调用外