dom 相关问题

$scope.$evalAsync 与 $scope.$applyAsync

$evalAsync 和 $applyAsync 有什么区别？我的理解是，当我从指令中使用 $evalAsync 时，表达式将在浏览器呈现之前进行计算。 作为一个例子...

如何获取colgroup中指定的表头（th）的类

有了这张桌子， ... 有了这张桌子， <table > <colgroup> <col class="classname1"> ... </colgroup> <thead> <tr> <th class="classname2" scope="col">title</th> ... </tr> </thead> <tbody> 我可以通过调用来获取表头（th）上显式指定的类名 th = document.querySelector... th.classList // contains classname2 but not classname1 鉴于此，我想获取所有适用的类名。如何获取对应colgroup中指定的类名？ 您可以为您想要的 colgroup 分配一个“id”，然后使用： const colGroup = document.getElementById("yourId") const yourClasses = colGroup.classList. 它将返回一个包含所有元素类的数组。

JavaScript 函数返回未定义。循环遍历单击事件的按钮节点列表

在尝试调整我的 console.log 石头剪刀布游戏以使用 GUI 时 - 我已经为用户输入设置了按钮，但我组合在一起的函数始终返回未定义（getPlayerSelection）。

如何阻止 HTML 页面渲染，直到 JS 脚本完成

我使用网站构建器和类似于 Wordpress 的 CMS 构建了一个网站。我想在页面呈现之前运行一个脚本，看看是否需要将用户重定向到另一个页面。 目前，我有...

如何仅在CSS中存储“状态”？

我正在努力解决一个难题，除了一个重要部分外，我已经解决了大部分问题： 想象一下如果你有 5 个 div。一个标题和 4 个部分 (a - d)。 每个部分都有一个打开/关闭切换开关...

在 Angular 中创建适应小屏幕的导航栏

我正在为我的网站创建一个导航栏，我想让它适应小屏幕。为此，当我缩小屏幕时，所有导航栏选项都会折叠成条纹图标。我的问题是我怎样才能...

自定义元素和connectedCallback()：在触发函数之前等待父节点可用

我正在使用自定义元素，这非常好。 但我面临一个问题： 当调用connectedCallback()函数时，节点似乎还没有到达其在DOM中的位置，因此我不能

获取元素宽度百分比

我有一个输入元素，其宽度在CSS中设置为百分比。所有这些元素都有一个共同的类“display-class” 例如。 输入.test1 { 宽度：60% } 现在在 JS 中，我正在尝试设置一个包装器...

Chrome 插件 - jQuery 访问元素的子节点

我正在尝试创建一个 Chrome 插件，该插件会向已定义 ul 的每个 li 元素添加一个链接。 我在使用 jQuery 访问此元素时遇到问题。 我尝试了 const ideaList = $("ul.idea-list");但是

如何对 dom 元素进行 JSON.stringify？

如 title ，如何将 dom 元素 JSON.stringify，并将 json 改回 dom 元素。 有哪位知道怎么办吗，谢谢。 这是代码： var container = document.querySelectorAll('.containe...

如何让CSS-in-JS与需要附加一些元素的shadow DOM一起工作？

我正在使用 Shadow dom 在 WordPress + React 中开发 antd。 antd 的 styles 标签附加在 head 标签上。但我希望它们追加到影子 dom 中。我使用了antd文档中的代码...

我如何使用 React 来收听文档正文

我打算将这个普通的javaScript代码转换为react。下面是 html 和 javaScripts 代码... html代码 我打算将这个普通的 JavaScript 代码转换为 React。下面是 html 和 javaScripts 代码... html 代码 <div class="middle"> <img src="images/vr-iootz.jpg" draggable="false"/> </div> <div class="scroller scroller-middle"> <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:rgb(24,24,62)"/><polygon points="100 50 64 32 64 68 100 50" style="fill:rgb(24,24,62)"/></svg> </div> 原版代码 let active = false; let scrollerMiddle = document.querySelector('.scroller-middle'); let scrollerTop = document.querySelector('.scroller-top'); scrollerMiddle.addEventListener('mousedown',function(){ active = "middle"; scrollerMiddle.classList.add('scrolling'); }); document.body.addEventListener('mouseup',function(){ active = false; scrollerMiddle.classList.remove('scrolling'); }); document.querySelector('.wrapper').getBoundingClientRect().left; scrollIt(x); }); 现在我当然知道我可以使用反应事件处理程序方法转换上述代码的一部分，如下所示 const divRef = useRef(null); const hleMouseDown = () => { active = "middle"; divRef.current.classList.add("scrolling"); }; return ( <> <div className="middle"> <img src="images/vr-iootz.jpg" draggable="false" alt="/" /> </div> <div ref={divRef} className="scroller-middle" onMouseDown={hleMouseDown} > <svg className="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" > <polygon points="0 50 37 68 37 32 0 50" fill="rgb(24,24,62)" /> <polygon points="100 50 64 32 64 68 100 50" fill="rgb(24,24,62)" /> </svg> </div> </> ); } 但是，我发现主体操作很困难，其他查询选择器也很困难，如下所示 document.body.addEventListener('mouseup',function(){ active = false; scrollerMiddle.classList.remove('scrolling'); }); document.querySelector('.wrapper').getBoundingClientRect().left; scrollIt(x); }); 所以任何提示将不胜感激 所以，基本上我可以说，关注的领域是如何添加包装器CSS以及如何在react中使用useRef来调用主体.. 我能够使用香草打电话给他们 在 React 中，你需要使用 state 来代替 active，因为重新渲染后变量的值会丢失： const [active, setActive] = useState(false); 现在我们有了一个状态，我们可以在鼠标按下时更改它： const hleMouseDown = () => { setActive(true); }; 我们还可以对 useEffect 中的状态变化做出反应，以创建向文档添加和删除事件处理程序的副作用。事件处理程序将更新 active 状态，并对 active 状态做出反应： useEffect(() => { if(active) { const handler = () => { setActive(false); }; document.body.addEventListener('mouseup', handler); return () => { document.body.removeEventListener('mouseup', handler); }; } }, [active]); 我们还可以使用 active 状态向滚动条元素添加/删除类： <div className={`scroller-middle ${active ? 'scrolling' : ''}`} onMouseDown={hleMouseDown} > 完整代码： const [active, setActive] = useState(false); const hleMouseDown = () => { setActive(true); }; useEffect(() => { if(active) { const handler = () => { setActive(false); }; document.body.addEventListener('mouseup', handler); return () => { document.body.removeEventListener('mouseup', handler); }; } }, [active]); return ( <> <div className="middle">...</div> <div className={`scroller-middle ${active ? 'scrolling' : ''}`} onMouseDown={hleMouseDown} > <svg>...</svg> </div> </> ); }

为什么把script标签放在body标签后面比较好？

有两个与浏览器网页初始化相关的事件。 DOMContentReady(document object) ：解析 HTML 文档并构建 DOM 树 load(window object) : HTML 的所有元素

DOM采用多态吗？

既然DOM是面向对象的，那么可以说它采用了“oop的四大支柱”吗？ 显然它采用了继承，例如节点tr中的父子关系...

使用 BeautifulSoup 减少客户端 DOM + HTML 大小

我正在使用 Playwright（一个网页抓取和测试库）来导航网页，但在使用 Playwright 的操作之前，我想最小化从网页获取的 DOM。 我的理由是

从 javascript 创建的按钮不可点击

HTML CSS .包装器{ 位置：相对； z 索引：10； } .bg-背景{ 位置：修复...

将 document.evaluate 与包含正则表达式的 XPath 一起使用

我想以这种形式获取所有具有 href 属性的“a”元素：http(s)://any.example.com，其中any 可以是仅包含字母和/或数字的字符串。 我是正则表达式新手并且...

从重新构建 clojurescript 应用程序中解释 HTML 字符串

我想将重新构建的 clojurescript 应用程序连接到无头内容管理器以获取帖子。内容以带有 HTML 标签的字符串形式返回给我 - 如下所示： dsfdsfdsf 我想将重新构建的 clojurescript 应用程序连接到无头内容管理器以获取帖子。内容以带有 HTML 标签的字符串形式返回给我 - 如下所示： <h1>dsfdsfdsf</h1><p>ddsfdsf</p> 我直接显示字符串并以显示标签的完整字符串结束...... 我读到我需要使用解释器访问 DOM。 我尝试了以下功能 (defn parse-html [html] "Parse an html string into a document" (let [doc (.createHTMLDocument js/document.implementation "mydoc")] (set! (.-innerHTML doc.documentElement) html) doc )) (parse-html "<div><p>some of my stuff</p></div>") 但以错误结束 Uncaught Error: Objects are not valid as a React child (found: [object HTMLDocument]). If you meant to render a collection of children, use an array instead. 有人可以建议我一种从字符串渲染 html 的方法吗？ 预先感谢您的帮助。 问候 我已将 re-frame 标签替换为更合适的 reagent - 重新构建自身用于渲染的库。 在 React 中，您可以通过接收未解析的 HTML 的 dangerouslySetInnerHTML 属性来完成此操作。 在试剂中，并因此重新构建，为了使用该属性，您必须编写如下内容： (defn wrap-html [html] [:div {:dangerouslySetInnerHTML {:__html html}}])

如何定位两个 DOM 集合？

我对 JS 很陌生，我正在尝试链接两个集合。我试图做到这一点，如果 HTML 元素是某种颜色，则将单击父 HTML 元素。如果有人可以提供任何建议...

如何在 React 中将 HTML 字符串转换为虚拟 DOM？

我希望能够获取一个原始的 HTML 字符串，通过angerlySetInnerHTML 将其插入到 React 组件中，并将其合并到虚拟 DOM 中。有什么办法可以做到这一点吗？ 例如...