解决因`script`前置而造成的操作 DOM 报错
摘要：index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script> document.addEventListener("DOMContentLoaded", function () { console.log(doc
阅读全文
posted @ 2021-09-10 10:42
随笔分类 - DOM
将 DOMString 转换为 DOM 节点并插入 DOM
摘要：index.js const root = document.getElementById('root') root.innerHTML = ` <h1>hello</h1> <strong> <span>world</span> </strong> `
阅读全文
posted @ 2021-09-10 10:06
检查脚本打开的窗口是否关闭
摘要：index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <button id="btn1">打开窗口</button> <button id="btn2">检测</button> <script
阅读全文
posted @ 2021-09-10 10:05
监听子窗口的聚焦与失焦
摘要：index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <button onclick="clickHandler()">open: sub.html</button> <script> //
阅读全文
posted @ 2021-09-10 10:04
监听同一文档的浏览历史变动
摘要：window.onpopstate = function(res) { console.log(res) } 注意： pushState()或replaceState()不能触发该事件； 用户点击前进、后退，或 History.back()、History.forward()、History.go(
阅读全文
posted @ 2021-09-10 10:03
获取指定元素的最终样式信息
摘要：index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <h3>Hello, World!</h3> <script> const finalStyleObject = window.getCo
阅读全文
posted @ 2021-09-10 09:57
获取选中的文本
摘要：index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <div>Hello, World!</div> <script> window.onmouseup = function () { co
阅读全文
posted @ 2021-09-10 09:55
获取当前嵌入窗口所在的那个元素节点
摘要：index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <h1> <iframe src="./sub.html" frameborder="0"></iframe> </h1> </body>
阅读全文
posted @ 2021-09-10 09:49
获取`script`标签中的代码内容
摘要：index.html <script id="script"> // .text || .innerText || .innerHTML alert(document.getElementById("script").text); </script>
阅读全文
posted @ 2021-09-10 09:47
js 往dom元素中插入类名
摘要：index.js const img = document.createElement('img') // const img = new Image() img.classList.add('avatar')
阅读全文
posted @ 2021-09-09 10:26
怎样让元素节点滚动到特定位置
摘要：元素节点的滚动有三种方法: 1. Element.scrollTop, 表示滚动到距离顶部多少像素 2. Element.scrollLeft, 表示滚动到距离左边多少像素 3. Element.scrollIntoView() 表示滚动到和页面的可视区域, 即视口, 和锚点定位类似.
阅读全文
posted @ 2019-10-21 11:45
怎样获取当前元素节点的所有属性节点集合
摘要：使用 Element.prototype.attributes
阅读全文
posted @ 2019-09-19 16:20
怎样判断当前元素节点是否可编辑
摘要：使用: Element.prototype.isContentEditable, 可以判断某个元素节点是否可编辑. 注意: 1. Element.prototype.isContentEditable 只读; 有 true / false / inherit 2. Element.prototype
阅读全文
posted @ 2019-09-19 15:51
怎样设置鼠标悬浮时弹出的文字提示框内容
摘要：1. 可以在html中写死,如下: 2. 可以使用 Element.prototype.title 属性动态设置:
阅读全文
posted @ 2019-09-19 13:57
怎样获取当前元素节点的语言类型
摘要：使用: Element.prototype.lang; 比如: 注意: 1. 每个元素节点都有一个lang属性, 必须要显式声明才会有返回值, 否则返回空字符串""; 2. Element.prototype.lang 属性是可读写的;
阅读全文
posted @ 2019-09-19 13:50
怎样控制元素节点的是否可拖动属性
摘要：元素的可拖动属性为: draggable. 默认为false, 可以通过: Element.prototype.draggable; 查看与修改; 注意: 该属性可读写;
阅读全文
posted @ 2019-09-19 13:33
怎样读写分配给当前元素的快捷键
摘要：使用 Element.prototype.accesskey 注意: 快捷键用Alt+x触发, 会将焦点聚焦到目标元素上
阅读全文
posted @ 2019-09-19 13:05
怎样获取元素节点的标签名称
摘要：比如通过id获取的一个元素节点, 想知道这个节点是什么什么标签, 这时可以通过: Node.prototype.nodeName属性 或 Element.prototype.tagName属性获取. 注意: tagName和nodeName返回的结果是完全一样的, 只是tagName在Element
阅读全文
posted @ 2019-09-19 12:22
怎样查看或修改元素节点的id属性
摘要：使用 el.id; el表示获取到的元素节点, 如下所示: 注意: 1. el.id 属性可读可写; 2. 对id的修改会实时反映到DOM树中; 3. id值对大小写敏感, app 和 APP 是两个不同的id, 建议都写成小写.
阅读全文
posted @ 2019-09-19 12:09
怎样使用js将文本复制到系统粘贴板中
摘要：需要使用到三个document方法: 1. document.execCommand(); 执行某个命令 2. document.queryCommandSupported(); 检测浏览器是否支持某个命令 3. document.queryCommandEnabled(); 检测当前状态下某个命令
阅读全文
posted @ 2019-09-19 11:23
