dom 相关问题

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

哪个先创建：真实 DOM 或虚拟 DOM？

当 React 应用第一次渲染时，是先创建真实 DOM 还是虚拟 DOM？ React with JSX 被转换为 React.createElement()。那么，虚拟DOM的创建是从她开始的吗……

javascript reactjs dom virtual-dom

回答 1 投票 0

如何获取html树的#text节点数组

我需要将html正文的所有#text元素用作数组。富文本可以有不同的级别，所以我需要到达最低的元素。例如，对于下面的文本，我希望有一个

javascript dom

回答 4 投票 0

有没有办法获取一个元素的第n个兄弟（元素）？（不是父元素的第 n 个子元素）

我有一个行数未知、列数可变的网格。我通过声明一个常量来设置列数。*我检测到一个组合键将焦点从网格中的元素移动......

javascript dom siblings nextsibling

回答 2 投票 0

高效渲染大量“选择”元素

我正在编写一个 Web 应用程序，它显示大量数据行（目前约为 2000 行），每行数据都有一个下拉“选择”元素，其中包含约 100 个选项。可以选择这些选项中的任何一个...

javascript performance dom

回答 2 投票 0

为什么我在使用 HtmlAgilityPack 抓取时收到“启用 javascript 和 cookies 以继续”消息？

我想从网络上抓取数据，我正在使用 HtmlAgilityPack (c#) 中的 HtmlWeb、HtmlDocument 但我只是从我的数据中收到一条“启用 javascript 和 cookies 以继续”的消息...

c# dom html-agility-pack

回答 1 投票 0

启用 javascript 和 cookies 以在 winserver 2019 上继续 C#

我想从网络上抓取数据，我正在使用 HtmlAgilityPack (c#) 中的 HtmlWeb、HtmlDocument 但我只从我加载的数据中收到“启用 javascript 和 cookies 以继续” 任何...

c# dom html-agility-pack

回答 1 投票 0

如何在 TypeScript 中创建 SVG 元素？

考虑这个 TypeScript：让文本：SVGTextElement = document.createElement('text'); 这给了我一个警告： TS2322： HTMLElement 类型无法分配给 SVGTextElement 类型我怎样才能

html typescript dom typing

回答 1 投票 0

已解决添加新元素时以 html 形式动态创建 ID，然后传递 .on 更改功能

我有这段代码并且它有效，我可以添加新行并删除它们。问题是当我从选择输入中选择和选项时，它会使用正确的信息更改两个输入。当...

javascript html jquery dom

回答 2 投票 0

向 SVG 元素添加 onclick 事件

我在 SVG 教程中找到了这个示例，它解释了如何对 SVG 元素使用 onclick 事件处理程序。它看起来像下面的代码：我在 SVG 教程中找到了这个示例，它解释了如何对 SVG 元素使用 onclick 事件处理程序。看起来像下面的代码： <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'> <script type="text/ecmascript"><![CDATA[ function changerect(evt) { var svgobj=evt.target; svgstyle = svgobj.getStyle(); svgstyle.setProperty ('opacity', 0.3); svgobj.setAttribute ('x', 300); } ]]> </script> <rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100' height='100' /> </svg> 但是，这似乎不起作用。当我点击该元素时没有任何反应。也许值得一提的是，我使用 echo 从 PHP 脚本内部显示 SVG。另请注意，PHP 脚本生成的内容是使用 AJAX 和 XMLHttpRequest() 带入页面的。这可能有什么关系吗？非常感谢您的帮助。看来所有 JavaScript 都必须包含在 SVG 中才能运行。我无法引用任何外部函数或库。这意味着您的代码在 svgstyle = svgobj.getStyle(); 处被破坏这将实现您正在尝试的操作。 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'> <script type="text/ecmascript"><![CDATA[ function changerect(evt) { var svgobj=evt.target; svgobj.style.opacity= 0.3; svgobj.setAttribute ('x', 300); } ]]> </script> <rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'height='100' /> </svg> JSFiddle 中的演示 var _reg = 100; var _l = 10; // Create PATH element for (var x = 1; x < 20; x++) { var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path"); pathEl.setAttribute('d', 'M' + _l + ' 100 Q 100 300 ' + _l + ' 500'); pathEl.style.stroke = 'rgb(' + (_reg) + ',0,0)'; pathEl.style.strokeWidth = '5'; pathEl.style.fill = 'none'; $(pathEl).mousemove(function(evt) { $(this).css({ "strokeWidth": "3", "stroke": "#ff7200" }) .hide(100).show(500).css({ "stroke": "#51c000" }) }); $('#mySvg').append(pathEl); _l += 50; } 如果您不需要单击 svg 的特定部分，这可能是一个可能的解决方案：在顶部放置一个 div 并向该 div 添加事件。如果 svg 元素位于 html 结构中的 div 标签之前，则不需要 z-index。 HTML <div class='parent'> <div class='parent-events'></div> <div class='my-svg'><svg></svg></div> </div> CSS .parent { position: relative; } .my-svg { position: relative; z-index: 0; } .parent-events { position: absolute; width: 100%; height: 100%; z-index: 1 } Javascript const eventArea = document.querySelector('.parent-events'); eventArea.addEventListeners('click', () => { console.log('clicked'); }); 向 svg 节点添加事件监听器： svgobj.addEventListener("click", myFunction); 确保将 className/id 添加到 <use>；或者如果您检测到 SVG 脚本范围之外，也可以使用实际的 SVG 路径/元素： <svg rel='-1' class='**ux-year-prev**' width="15px" height="15px" style="border:0px solid"><use class='**ux-year-prev**' xlink:href="#svg-arrow-left"></use></svg> 我建议为 svg 元素使用这种 onclick 事件处理程序方法： var svgobj = parent_svg.find('svg')[0].children; for (i = 0; i < svgobj.length; i++) { element = svgobj[i]; element.style = "cursor: pointer;"; $(element).click(function(evt){console.log($(this))}); } 首先检查您的 svgobj 是否在获取 console.log 事件处理程序时传递给 onclick。从那时起，您可以传递给任何函数来处理该元素。您可以在此处查看示例，了解它是如何工作的： https://jsfiddle.net/chetabahana/f7ejxhnk/20/ 如何使用此示例的注意事项： - 将 SVG 图上的状态更改为 Printed 选项， - 单击其中一个元素，然后在控制台中检查输出。我遇到了同样的问题，关于将 z-index 放置在 div 顶部的答案有帮助！但是，我发现您不需要将 svg 包装在 div 中，只要父级已定位，您就可以将其 z 索引到顶部。将 onlClick 处理程序移出 svg 并将事件添加到 svg 本身。您可能会间歇性地在事件处理程序中获取 rect 而不是 svg，在这种情况下您可以这样做： if (event.target.tagName !== 'svg') { event.target = event.target.closest('svg'); } 所以重构你的代码： <script type="text/ecmascript"><![CDATA[ function changerect(evt) { if (evt.target.tagName !== 'svg') { evt.target = event.target.closest('svg'); } var svgobj = evt.target; svgstyle = svgobj.getStyle(); svgstyle.setProperty ('opacity', 0.3); svgobj.setAttribute ('x', 300); } ]]> </script> <svg onclick='changerect(evt)' xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'> <rect style='fill:blue;opacity:1' x='10' y='30' width='100' height='100' /> </svg> 我们可以简单地向 svg 添加一个 onclick 事件 <img class="video-svg" id="play" onclick="playVid(id)" src="assets/img/logo/play svg.png"> 然后我们可以给 css 来产生效果，因为我们需要给位置绝对值和 z-index 到 200 这将使 svg 的点击事件 2. .video-svg { margin: auto; top: 0; bottom: 0; left: 0; right: 0; height: 7%; background: no-repeat; border: none; z-index: 200 !important; width: 10% !important; position: absolute !important; }

html ajax dom svg

回答 9 投票 0

添加新元素时以 html 形式动态创建 ID，然后传递 .on 更改功能

我有这段代码并且它有效，我可以添加新行并删除它们。问题是当我从选择输入中选择和选项时，它会使用正确的信息更改两个输入。当...

java html jquery dom

回答 1 投票 0

如何动态检索HTML标签及其子标签的内容文本？

我想知道如何动态检索HTML标签及其子标签的内容文本？这是我的 HTML 代码，例如： C:\ 我想知道如何动态检索 HTML 标签及其子标签的内容文本？这是我的 HTML 代码，例如： <p><code>C:\<select> <option value="test1\">test1\</option> <option value="test2\">test2\</option> </select>test3\<select> <option value="test4\">test4\</option> <option value="test5\">test5\</option> </select>test6\<select> <option value="test7\">test7\</option> <option value="test8\">test8\</option> <option value="test9\">test9\</option> </select>test10.txt</code></p> 我想在这段代码之后创建一个按钮，当单击它时，我想直接在控制台中写入内容。例如： C:\test2\test3\test4\test6\test8\test10.txt 或 C:\test1\test3\test5\test6\test9\test10.txt ... 另一段代码可能只包含 1 或 2 个 <select> 标签。因此，我不想要只适用于 3 个 <select> 标签的代码，如前面的示例所示。提前非常感谢您这取决于您使用的编程语言以及您想要在哪里执行此操作，例如前端、网站服务器、数据库……您是否想重新发明网络爬虫？

javascript html dom html-select innerhtml

回答 0 投票 0

我应该使用 ref 还是 findDOMNode 来获取元素的 React 根 dom 节点？

我想要进行一些 dom 节点大小计算（渲染的 DOM 节点的顶部、底部和大小属性）我现在在 componentDidUpdate 方法上所做的是......

javascript reactjs dom react-dom

回答 2 投票 0

JavaScript - 获取数组中除最后一项之外的所有内容

这是我的代码：函数插入（）{ var loc_array = document.location.href.split('/'); var linkElement = document.getElementById("waBackButton"); var linkElementLink = document.getElementBy...

javascript dom

回答 6 投票 0

如何使用JS触发SVG渲染，就像在Chrome中手动编辑DOM一样？

当我在 Chrome 中通过 JS 修改 HTML 文档中 SVG 元素的 DOM 结构时（特别是使用 ReplaceWith 或appendChild 引入新内容），尽管 Chrome 元素树

javascript html svg dom

回答 1 投票 0

向innerHTML插入脚本时，带有DOMContentLoaded的脚本不会被执行

我制作了一个脚本，它获取 html 文件的文本并将其插入到另一个 html 文件中；我这样做是为了在进行更改时不需要更新每个页面上的标题和侧边栏。剧本...

javascript html dom innerhtml

回答 1 投票 0

index.js 中出现 React 错误，“Uncaught ReferenceError：dom 未定义”

我正在构建一个 React 应用程序，我使用 Babel 和 Webpack 作为模块打包器。在编写 index.js 时，应用程序开始向我发送有关未定义 dom 的错误，但实际上我已经