dom
JavaSceipt学习笔记：操作DOM
## 概述 全局的Window对象有一个document属性，它引用一个Document对象，通过该对象操作DOM。 ## 选择DOM元素 HTML文档中的\与\标签可以通过Document对象的head与body属性访问，但是更深层级的元素需要通过查询来获取。 有两组方法来选择元素，一组是通过CS ......
包含js代码的dom元素从页面上消失后发生了什么
最近遇到了一个问题：有一个数据看板的页面运行了n天后突然页面崩溃了，爆出了out of memory的错误。页面不复杂，几个图表定时更新数据，实在没明白为什么长时间运行后会out of memory。 在每次请求后使用 console.log(window.performance.memory); ......
浅谈反射型、存储型和DOM型XSS的区别
反射型XSS：攻击者构造一个参数包含恶意js代码的URL，诱骗用户点击，用户访问后向服务器发送请求，**服务器响应包含恶意代码的页面**，并在客户端执行。例如服务器后端存在PHP代码`echo 'Hello ' . $_GET[ 'name' ] . '';`，参数name传入js代码后，则会在服务 ......
z-index控制层级显示【JavaScript-Dom&Bom】
溢出设置 overflow visible(默认) 超出部分显示 hidden 超出部分隐藏 scroll 超出部分滚动显示 行内元素垂直对齐方式vertical-align baseline 基线对齐(默认) top 上对齐 middle 中间对齐 bottom 下对齐 控制显示层级 当元素为非s ......
echarts更新数据后报错 There is a chart instance already initialized on the dom
产生原因 使用Echarts插件的时候，多次加载会出现There is a chart instance already initialized on the dom.的警告，表示DOM上已经初始化了一个图表实例。 解决方案 定义一个全局变量，在初始化之前先判断该实例是否存在，若存在，先销毁。 va ......
JS监听dom高度变化方法总结
前沿： 有时候我们需要监听dom的变化，比如获取父元素的高度，动态的设置子元素的高度，所以需要监听 dom 的高度变化，才能准确获取dom的高度，那么有哪些监听dom高度变化的方法呢？今天简单列举一下。 1、MutationObserver 构造函数 Mutation Observer API 用来 ......
关于在 computed 使用 ref 获取 dom 结点为 undefined的问题
原因： 因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们，它们还不存在 computed 里面无法获取到 ref 解决方法： 方法一： data: { isMount: false, }, mounted() { this.isMount = true }, computed ......
DOM常见节点操作
js可以控制html中的节点，常见的是添加和删除操作。 在掌握了节点的选择之后，我们来看如何创造一个节点。 1 let t=document.createElement("div"); 该命令创造了一个div节点（标签），赋值给t。 我们可以对其属性进行设置 1 t.className="c1"; ......
虚拟dom
## 虚拟`dom` > 啥是虚拟`dom` > 为什么要有这玩意 > 这玩意给前端造成了那些影响 > 怎么做一个玩具版本的虚拟`dom` 虚拟`dom`, 听名字应该就知道了, 假`dom`, 为什么要有假`dom`, 因为操作真`dom`太重了吗? 都说虚拟`dom`能提高性能, 真的吗? `` ......
CreateElement vs DOM Parser
[Benchmark: CreateElement vs DOM Parser - MeasureThat.net](https://www.measurethat.net/Benchmarks/Show/15119/0/createelement-vs-dom-parser)  querySelectorAll返回的是伪数组 2. 操作元素内容 对象.innerText 对象.innerHTML 会解析标签 3. 操作元素样式属性 1. style <script> ......
XML解析之DOM解析
# XML解析之DOM解析 XML 结构是一种树型结构，处理步骤都差不多，Java 己经将它们封装成了现成的类库。目前流行的解析方法有三种，分别为 DOM、SAX 和 DOM4j。 本文将讲解DOM解析。 DOM（Document Object Model，文档对象模型） 是 W3C 组织推荐的处理 ......
dom、js原生常用api， 兼容ie等主流浏览器(持续更新)
开发组件库必须知道的东西 /** * 获取scrollTop * @param { HTMLElement | window } element - dom元素或者window对象 * @returns { number } */ function getScrollTop(element) { i ......
将dom转化为图片和批量下载
利用 html2canvas 和 jszip 第三方库 ``` import html2canvas from 'html2canvas' ``` ``` import jszip from 'jszip' ``` 具体实现： ``` downloadAll() { this.loading = t ......
如何破解网页使用 MutationObserver 禁用修改 DOM 功能 All In One
如何破解网页使用 MutationObserver 禁用修改 DOM 功能 All In One
道高一尺，魔高一丈 (Web 安全攻防)
......
Cypress 踩坑记 - DOM 遮挡
Cypress 是一个非常流行的测试工具，然而实际使用过程中发现一些问题，这里做些记录。 问题发现 在 Cypress 下 click 是非常常用的指令，然而在一些特殊场景下 click 并不能如想象中那般正常工作。 比如现在有一个弹窗，我们需要测试在点击遮罩层时是否可以正常关闭弹窗。 测试代码比较 ......
虚拟Dom
https://blog.csdn.net/qq_33270597/article/details/106814180 1.用js对象表示一个element. 2.state变化时先更新对应的js对象，并做比较 3.找出差异部分，再操作真实element，更新 好处: 1.js可以异步执行 2.js ......
BOM与DOM
前戏 到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。 也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。 JavaScript分为 ECMAScript，DOM，BOM。 BOM（Browse ......
[7626] 01 组件渲染：vnode 到真实 DOM 是如何转变的？
在 Vue.js 中，组件是一个非常重要的概念，整个应用的页面都是通过组件渲染来实现的，但是你知道当我们编写这些组件的时候，它的内部是如何工作的吗？从我们编写组件开始，到最终真实的 DOM 又是怎样的一个转变过程呢？这节课，我们将会学习 Vue.js 3.0 中的组件是如何渲染的，通过学习，你的这些 ......
记录-因为写不出拖拽移动效果，我恶补了一下Dom中的各种距离
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 背景 最近在项目中要实现一个拖拽头像的移动效果，一直对JS Dom拖拽这一块不太熟悉，甚至在网上找一个示例，都看得云里雾里的，发现遇到最大的拦路虎就是JS Dom各种各样的距离，让人头晕眼花，看到一个距离属性，大脑中的印象极其模糊，如同有 ......
2023.4.23 jQuery 的属性操作与DOM 的增删改
jQuery 的属性操作 jQuery 属性操作 html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。 text() 它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。 val() 它可以设置和获取表单项的 ......
dvwa DOM型xss
1、低级别 查看代码，服务端未做任何处理。因此，地址栏访问： http://127.0.0.1/dvwa/vulnerabilities/xss_d/?default=Englishabc%3Cscript%3Ealert(/xss/)%3C/script%3E 2、中级别 检查前端代码未变化，而后 ......
jquery DOM型漏洞
1、漏洞介绍 漏洞编号：CVE-2016-7103、CVE-2015-9251、CVE-2014-6071、CVE-2012-6708、CVE-2011-4969 漏洞环境：jquery 影响范围： 1.x系列版本等于或低于1.12的jQuery 2.x系列版本等于或低于2.2的jQuery 漏洞原 ......
05-DOM操作练习：访问关系的封装
title: 05-DOM操作练习：访问关系的封装 publish: true 访问关系的函数封装 （1）函数封装 新建一个文件名叫tools.js，然后在里面封装访问关系。代码如下。 tools.js: /** * Created by smyhvae on 2018/01/28. */ func ......
07-DOM操作练习：innerHTML的方式创建元素
title: 07-DOM操作练习：innerHTML的方式创建元素 publish: true 动态创建DOM元素的三种方式 document.write(); 不常用，因为容易覆盖原来的页面。 innerHTML = (); 用的比较多。绑定属性和内容比较方便。(节点套节点) document. ......