dom 相关问题

如何使用 Javascript 将内容写入另一个浏览器窗口？

我已经使用 window.open() 打开了一个新窗口，我想使用 window.open() 调用中的引用将内容写入新窗口。 我尝试将 HTML 从旧窗口复制到...

查找元素是否可见（JavaScript）

我有一个 JavaScript 函数，它尝试确定 div 是否可见，并使用该变量执行各种处理。我成功地能够通过更改元素的可见性来交换元素的可见性...

使用打字稿解析 SVG 转换属性

如何使用typescript解析svg元素的transform属性？ 也就是说，如何解析 svg.g.transform 中字符串中的所有数字和操作，如下所示： 如何使用typescript解析svg元素的transform属性？ 也就是说，如何解析 svg.g.transform 中字符串中的所有数字和操作： <svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewX(40) scale(1 0.5)"> <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> 使用 https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement 又名。由原生 DOM 元素实现的 SVGLocatable 和 SVGTransformable 接口/API。 这些元素有一个 .transform 属性，对应于变换属性。该属性的类型为 https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimatedTransformList 并且您想要查看静态定义的 baseVal。 变换列表有一个属性 numberOfItems 和一个 getItem 方法。它可能有一个 .length 属性和 [] 数组访问器，并且它可能在您的浏览器中是可迭代的，但不要指望这一点。 每个项目都有类型 https://developer.mozilla.org/en-US/docs/Web/API/SVGTransform .type属性告诉您使用了哪条指令。 因此，您可以通过以下方式解析然后再次手动合成变换属性： // javascript js equivalent declaration: // function getAttributeTransform_js(nativeSVGElement) { // typescript ts declaration function getAttributeTransform_ts(nativeSVGElement: SVGGraphicsElement) { // this definition works in ts and js const tl = nativeSVGElement.transform.baseVal; var st: string[] = []; for (let i = 0; i < tl.numberOfItems; i++) { const t/*: SVGTransform*/ = tl.getItem(i); switch (t.type) { case SVGTransform.SVG_TRANSFORM_UNKNOWN: break; case SVGTransform.SVG_TRANSFORM_MATRIX: { // A matrix(…) transformation // Note: this is the most general transformation, capable of representing more transformations than the other combined. // For SVG_TRANSFORM_MATRIX, the matrix contains the a, b, c, d, e, f values supplied by the user. // // Note: instead of comma (,), whitespace separation would also be allowed st.push(`matrix(${t.matrix.a}, ${t.matrix.b}, ${t.matrix.c}, ${t.matrix.d}, ${t.matrix.e}, ${t.matrix.f})`); break; } case SVGTransform.SVG_TRANSFORM_TRANSLATE: { // A translate(…) transformation // For SVG_TRANSFORM_TRANSLATE, e and f represent the translation amounts (a=1, b=0, c=0 and d=1). st.push(`translate(${t.matrix.e}, ${t.matrix.f})`); break; } case SVGTransform.SVG_TRANSFORM_SCALE: { // A scale(…) transformation // For SVG_TRANSFORM_SCALE, a and d represent the scale amounts (b=0, c=0, e=0 and f=0). st.push(`scale(${t.matrix.a}, ${t.matrix.d})`); break; } case SVGTransform.SVG_TRANSFORM_ROTATE: { // A rotate(…) transformation // For SVG_TRANSFORM_ROTATE, a, b, c, d, e and f together represent the matrix which will result in the given rotation. // When the rotation is around the center point (0, 0), e and f will be zero. /* angle float A convenience attribute for SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY. It holds the angle that was specified. For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE, angle will be zero. */ /* This is the hardest case since the origin information is lost! We need to recompute it from the matrix. from https://math.stackexchange.com/questions/2093314/rotation-matrix-of-rotation-around-a-point-other-than-the-origin matrix.a = cos_angle = c; matrix.b = sin_angle = s; Note that by the laws of geometry: c^2+s^2 = 1 (c and s are coordinates on the unit circle) matrix.e = -x*c + y*s + x; matrix.f = -x*s - y*c + y; Using Mathematica/Wolfram Language: "Assuming[c^2+s^2==1,Solve[e == -x*c + y*s + x&& f == -x*s - y*c + y,{x,y},Reals]//Simplify]//InputForm" (you can use WL for free here: https://develop.wolframcloud.com/objects/c26e16f7-44e7-4bb6-81b3-bc07782f9cc5) {{x -> (e + (f*s)/(-1 + c))/2, y -> (f - c*f + e*s)/(2 - 2*c)}} */ const e = t.matrix.e, f = t.matrix.f, c = t.matrix.a, s = t.matrix.b; const originx = (e + (f*s)/(-1 + c))/2; const originy = (f - c*f + e*s)/(2 - 2*c); st.push(`rotate(${t.angle}, ${originx}, ${originy})`); break; } case SVGTransform.SVG_TRANSFORM_SKEWX: { // A skewx(…) transformation // For SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY, a, b, c and d represent the matrix which will result in the given skew (e=0 and f=0). /* angle float A convenience attribute for SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY. It holds the angle that was specified. For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE, angle will be zero. */ st.push(`skewx(${t.angle})`); break; } case SVGTransform.SVG_TRANSFORM_SKEWY: { // A skewy(…) transformation // For SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY, a, b, c and d represent the matrix which will result in the given skew (e=0 and f=0). /* angle float A convenience attribute for SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY. It holds the angle that was specified. For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE, angle will be zero. */ st.push(`skewy(${t.angle})`); break; } } } return st.join(','); // instead of comma (,), whitespace separation is also allowed } // example const r = <SVGRectElement>document.createElementNS("http://www.w3.org/2000/svg", "rect"); // the parseable syntax for the transform attribute is pretty relaxed r.setAttribute("transform", "translate(1, 0),rotate(0.5), scale(1 2)"); // note that the browser may canonicalize your syntax // EDGE canonicalizes the transform to read: // 'translate(1) rotate(0.5) scale(1, 2)' console.log(r.getAttribute("transform")); // basically equivalent: console.log(getAttributeTransform_ts(r)); 你的例子： function createElementFromHTML(htmlString) { var div = document.createElement('div'); div.innerHTML = htmlString.trim(); // Change this to div.childNodes to support multiple top-level nodes return div.firstChild; } getAttributeTransform_ts(createElementFromHTML(` <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewX(40) scale(1 0.5)"> <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> </g> `)) // gives // 'rotate(-10, 49.99999999999982, 99.99999999999972),translate(-36, 45.5),skewx(40),scale(1, 0.5)' 请注意，您应该使用 .getAttribute("transform") 让浏览器为您合成 SVGTransformList 的字符串形式，而不是使用我上面的脚本！ 请注意，我们无法完美检索“旋转”的原始参数，因为没有针对它的 API。它必须根据二维齐次（旋转）矩阵计算。 灵感来自： 使用 javascript 解析 SVG 转换属性 https://stackoverflow.com/a/41102221/524504 另请参阅： https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

追加子项不适用于串联数组项

我查询了 DOM，获取带有特定标签（项目）的所有 DOM 元素，并将它们存储在一个数组中。然后，我克隆了该数组，并将克隆的 2 个副本连接到数组中

为什么我的 html 正文内容被覆盖而不是附加到？

我有以下脚本，我认为应该将有序的节列表附加到现有 html 正文的底部。但它正在取代它。为什么？ // 获取所有节 合作...

跨浏览器 JavaScript + DOM 文档 [已关闭]

我已经知道一些特定于浏览器的 DOM 文档（Firefox 的 Gecko DOM 参考、Internet Explorer 的 MSDN，当然还有 ECMA 和 W3C 规范），但我想知道是否有人有

JavaScript DOM 事件函数

我正在尝试为 HTML 页面实现一个 JavaScript 函数，该函数只需在鼠标按下时显示文本。我想多次应用此功能，因此不想为每个事件创建一个函数。 ...

展开目录中的当前列表

我在每个网页上都有一个基本的目录，并且有CSS在用户当前所在的部分周围添加边框。这只是一个展示其工作原理的片段： 我在每个网页上都有一个基本的目录，并且有 CSS 在用户当前所在的部分周围添加边框。这只是一个展示其工作原理的片段： <ol> <li><a href="#">Home Lab Overview</a> <ol class="toc-collapse-level"> <li><a href="#">Diagrams</a> <ol> <li><a href="#s1">Full Network Diagram</a></li> <li><a href="#s2">Reverse Proxy and VPN Diagram</a></li> </ol> </li> </ol> </li> </ol> class=toc-collapse-level 表示要折叠的最外层列表。 我正在使用以下脚本使列表可折叠。 (t => { const e = "faq-list", n = "faq-clicked"; function l(l, o) { const i = l.children; if (0 === i.length) return; for (let t of i) if (t.childElementCount < 2) return; let c = l.classList; if (c.length > 0 && !c.contains(e)) return; c.add(e); const s = t.createElement("span"); let a = !1; s.className = "faq-button", s.innerText = "⊕", s.onclick = function() { a = !a, this.innerText = a ? "⊖" : "⊕"; for (const t of l.children) t.classList.toggle(n, a) }, l.before(s); for (let t = 0; t < i.length; t++) { let e = i[t]; e.id = "faq-" + (o ? o + "-" : "") + (t + 1); let l = e.firstElementChild; l.insertAdjacentHTML("beforeend", ` <span class="anchor"><a href="#${e.id}">#</a></span>`), location.hash === "#" + e.id && (e.scrollIntoView(), e.classList.add(n)), l.onclick = function(t) { e.classList.toggle(n) } } } const o = t.querySelectorAll(["div", "main", "section", "article"].map((t => t + ":not(.footnotes) > ol")).join(",")); for (let t = 0; t < o.length; t++) { l(o[t], o.length > 1 ? t + 1 : 0) } })(document); 以及用于可折叠列表工作的 CSS： .faq-button { cursor: pointer } .faq-list>li>:first-child { display: block; cursor: pointer; background: #fafafa; margin: -.5em; padding: .5em } .faq-list>:not(.faq-clicked)>* { display: none } .faq-button { float: right; margin-left: 1em } .faq-list .anchor { display: none } .faq-list>li:hover .anchor { display: inline } .faq-list>li { border: 1px solid #eee; padding: .5em } 问题是我不确定如何在页面加载时扩展当前部分。 要使当前部分在页面加载时展开，首先您必须确定哪个是当前部分。 我认为可以同时展开多个部分（例如，当它们在屏幕上可见时）。 因此，要查找所有可见部分，我们可以使用以下脚本： function isElementVisible(el) { var rect = el.getBoundingClientRect(), vWidth = window.innerWidth || document.documentElement.clientWidth, vHeight = window.innerHeight || document.documentElement.clientHeight, efp = function (x, y) { return document.elementFromPoint(x, y) }; // Return false if it's not in the viewport if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) return false; // Return true if any of its four corners are visible return ( el.contains(efp(rect.left, rect.top)) || el.contains(efp(rect.right, rect.top)) || el.contains(efp(rect.right, rect.bottom)) || el.contains(efp(rect.left, rect.bottom)) ); } 来源：如何判断 DOM 元素在当前视口中是否可见？ 现在您可以扩展您的脚本并检查每个部分是否可见，如果可见则切换“常见问题解答”。 ... const o = t.querySelectorAll(["div", "main", "section", "article"].map((t => t + ":not(.footnotes) > ol")).join(",")); for (let t = 0; t < o.length; t++) { l(o[t], o.length > 1 ? t + 1 : 0) // This is the new code if(isElementVisible(o[t])){ o[t].classList.toggle("faq-clicked"); } }

React 组件未渲染来自 API 调用的数据

我正在开发一个 React 项目，但在显示从电影组件中的 API 获取的数据时遇到问题。数据已正确记录在控制台中，但未显示在页面上。我...

检测透明 iframe 后面的鼠标事件

我正在构建一个 Chrome 扩展，当它处于活动状态时，会将 iframe 附加到页面主体，并设置为固定位置以占据整个窗口尺寸（0, 0 100vw, 100vh）。 iframe 是

如何循环遍历页面上的所有 DOM 元素？

我正在尝试循环页面上的所有元素，因此我想检查此页面上存在的每个元素是否有特殊类。 那么，我怎么说我想检查每个元素呢？

如何在 TypeScript (Next.js) 中创建点击处理程序和 window.addEventListener？

我有一个点击处理程序，我想监听组件外部窗口上的任何点击： 使用效果（（）=> { const handleOutSideClick = (事件) => { if (!ref.current?.conta...

刷新后才在linkedin中查找元素

我正在技术学校学习有关浏览器的课程。 我对这个领域的知识绝对是0。 我们的任务是创建一个简单的 chrome 扩展程序，该扩展程序在后台运行，当您处于

如何监听Web组件定义的自定义事件

我有一个自定义元素 my-checkbox，它包含复选框、标签、样式等。当切换该复选框时，我在构造函数中定义一个名为 check 的 CustomEvent，如下所示： 构造函数（）...

尝试对表进行排序：类型错误：无法读取未定义的属性（读取“textContent”）

我试图对表中的余额进行排序。但是有一个问题。我尝试用代码进行排序： 函数 sortTableByBalance() { const table = document.getElementById("myTable"); ...

在鼠标悬停时添加内部文本并在鼠标移开时删除 JS

我正在制作一个导航按钮，当它悬停时，那里不仅仅是一个图标，它的右侧还会有一些文本。一旦光标离开按钮，它将返回到

如何启用/实现对任何 DOM 节点或整个文档的文本内容的全文搜索？

我偶然发现了一项技术测试，其中我必须计算 HTML 正文中单词的出现次数。我必须避免脚本标签和注释，这些是有问题的独特条件......

JavaScript追加DOM子元素（“appendChild”方法）后如何执行代码？

我已经检查了主题JavascriptappendChild回调？。在那里，目标元素是视频，因此使用loadedmetadata 是这种情况的解决方案。 就我而言，有小吃店，但是......

HTMLCollection { length: 0 } 与一个现有元素。儿童无法访问[0] [已关闭]

我有问题。使用 HTMLCollection。 我正在编写菜单和多级子菜单。从 JSON 解析结构。 菜单1 我... 我有问题。使用 HTMLCollection。 我正在编写菜单和多级子菜单。从 JSON 解析结构。 <ul class="categories"> <li>menu 1</li> <li>menu 2</li> <li>menu 3</li> <li>menu 4</li> </ul> 当我点击 menu 1 时，我的 JS 代码会在 JSON 数据的 li 元素内添加子菜单。看起来像： <ul class="categories"> <li>menu 1 <ul> <li>submenu 11</li> <li>submenu 12</li> <li>submenu 13</li> </ul> </li> <li>menu 2</li> <li>menu 3</li> <li>menu 4</li> </ul> 当用户点击menu 2时，我的JS代码必须在第一个li元素中找到ul并从menu 1中删除ul 我正在尝试从每个 li 元素中找到 ul 元素。我有查找和删除子节点的功能。 // Function for remove another submenu function removeChildSubmenu(element) { //console.log(element) for (var item of element.children) { console.log(item.children) } } 问题是： item.children 是 HTMLCollection { length: 0 } 与现有元素。当我使用 item.children[0] 时，它会给出 undefined。 如何解决问题或如何用另一种方式编写脚本（不要分享简单的方法。JSON 的数据很大！）？ 如果您需要将子级作为数组而不是集合，那么可以像展平/映射集合一样简单。如果使用集合，您可能只需要使用 *.item(i) 而不是 {} 或 []: document.body.children.item(i) === [...document.body.children][i]; 然后迭代子数组/列表项元素。 [...<ul>.children].forEach(li, (li) => { if (li <condition>) { <ul>.removeChild(li); } })

HTMLCollection { length: 0 } 具有一个存在元素。儿童无法访问[0]

我有问题。使用 HTMLCollection。 我正在编写菜单和多级子菜单。从 JSON 解析结构。 菜单1 我... 我有问题。使用 HTMLCollection。 我正在编写菜单和多级子菜单。从 JSON 解析结构。 <ul class="categories"> <li>menu 1</li> <li>menu 2</li> <li>menu 3</li> <li>menu 4</li> </ul> 当我点击 menu 1 时，我的 JS 代码会在 JSON 数据的 li 元素内添加子菜单。看起来像： <ul class="categories"> <li>menu 1 <ul> <li>submenu 11</li> <li>submenu 12</li> <li>submenu 13</li> </ul> </li> <li>menu 2</li> <li>menu 3</li> <li>menu 4</li> </ul> 当用户点击menu 2时，我的JS代码必须在第一个li元素中找到ul并从menu 1中删除ul 我正在尝试寻找 // Function for remove another submenu function removeChildSubmenu(element) { //console.log(element) for (var item of element.children) { console.log(item.children) } } 问题是： item.children 是 HTMLCollection { length: 0 } 且存在元素。当我使用 item.children[0] 时，它会给出 undefined。 在此输入图片描述 我如何解决问题或如何用另一种方式编写脚本（不要分享简单的方法。来自 JSON 的数据很大！）??? console.log(item.children) 如果您需要将子级作为数组而不是集合，那么可以像展平/映射集合一样简单。如果使用集合，您可能只需要使用 *.item(i) 而不是 {} 或 []: document.body.children.item(i) === [...document.body.children][i];