dom 相关问题

通过文档对象模型，将此标记用于有关其他语言与XML / HTML交互的问题。不要将其用作HTML，JavaScript或SAX的简写 - 使用其他标记来表示语言和标记。

为什么 LinkedIn Post Inspector 未显示正确的 OpenGraph 标题？

我正在使用 Yoast 在以下页面上生成 OpenGraph 元： https://www.wjdfund.org 如果您访问该 URL 并查看页面源代码，您将看到以下元标记：这是唯一的...

html dom linkedin-api facebook-opengraph

回答 1 投票 0

检查对象是否是文本框 - javascript

我明白我们可以使用（javascript） if (typeof textbox === "object") { } 但是有没有方法可以让我确保该对象是文本框？

javascript dom object textbox

回答 6 投票 0

React 是否有相当于 Vue 的 nextTick() 函数？

Vue 有这个 nextTick 函数，它是一个等待 DOM 刷新的异步函数。当您想直接对元素执行某些操作（例如

javascript reactjs vue.js dom

回答 5 投票 0

typescript 将 html 元素附加到 html

我正在尝试从打字稿创建一个动态 html 元素以显示在 html 上。在我的 .ts 文件中，我的代码如下： const displayContent = document.getElementById("显示内容&quo...

typescript dom

回答 1 投票 0

在 JavaScript 中检测焦点丢失

我希望能够检测 JavaScript 中任意元素何时失去焦点，因此我可以构建一个类似于 jEdit 的内联编辑工具。我不能依赖 jQuery 这个库，所以我需要一个原生的

javascript html dom

回答 2 投票 0

如何解决打字稿中“类型‘string | Event’不可分配给类型‘ErrorEvent’”的问题

在此处输入图像描述example.ts const image = new Image() 作为 HTMLImageElement 图片.src = src image.onload = function() {...} image.onerror = function(evt: ErrorEvent) {...} 当我完成时...

typescript dom

回答 1 投票 0

当我点击按钮更改输入值时如何再次调用函数？

我想使用 DOM 构建斐波那契数列。我使用了一个输入，您可以在其中键入一个数字，然后得出序列的最后一个数字，然后显示所有序列。问题是当我...

javascript arrays for-loop dom fibonacci

回答 1 投票 0

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

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

javascript dom

回答 5 投票 0

查找元素是否可见（JavaScript）

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

javascript jquery dom visible getattribute

回答 6 投票 0

使用打字稿解析 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

javascript typescript dom svg

回答 1 投票 0

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

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

javascript dom

回答 1 投票 0

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

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

javascript arrays dom

回答 1 投票 0

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

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

javascript dom reference

回答 2 投票 0

JavaScript DOM 事件函数

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

javascript html function dom

回答 2 投票 0

展开目录中的当前列表

我在每个网页上都有一个基本的目录，并且有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"); } }

javascript html css dom html-lists

回答 1 投票 0

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

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

javascript html reactjs dom

回答 1 投票 0

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

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

javascript dom iframe mouseevent

回答 1 投票 0

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

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