dom 相关问题

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

我打算将这个普通的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> </> ); }

javascript reactjs dom react-hooks

回答 1 投票 0

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

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

javascript dom browser

回答 1 投票 0

DOM采用多态吗？

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

oop dom polymorphism

回答 1 投票 0

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

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

html web-scraping dom beautifulsoup

回答 1 投票 0

从 javascript 创建的按钮不可点击

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

javascript html dom

回答 1 投票 0

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

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

javascript regex dom xpath document.evaluate

回答 2 投票 0

从重新构建 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 clojurescript reagent

回答 1 投票 0

如何定位两个 DOM 集合？

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

javascript loops dom

回答 1 投票 0

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

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

javascript dom reactjs

回答 2 投票 0

循环数组并将元素打印到 DOM

我在访问数组和循环数组然后将数组内的元素打印到 DOM 时遇到问题。由于某种原因，它只是打印出“Relish”，而没有......