dom 相关问题

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

我正在尝试从当用户向下滚动到底部（无限滚动）时动态生成内容的页面中抓取链接。我尝试过用 Phantomjs 做不同的事情，但不行...

javascript web-scraping dom phantomjs

回答 4 投票 0

我正在寻找一种方法来确定元素的菜单是否/何时打开。我不需要强制它打开或关闭，只需弄清楚它在给定时间是打开还是关闭即可。我可以听我正在寻找一种方法来确定 <select> 元素的菜单是否/何时打开。我不需要强制它打开或关闭，只需弄清楚它在给定时间是打开还是关闭即可。我可以监听焦点/模糊、鼠标向上/鼠标向下等事件，但我认为我无法可靠地从这些事件中找出菜单的状态。例如，mousedown 后跟 mouseup 可能意味着用户单击并拖动到某个选择并释放（在这种情况下，菜单现在关闭）或单击并释放以打开菜单（在这种情况下，菜单打开）。下拉菜单的具体行为似乎也可能取决于浏览器。我知道如果我滚动自己的下拉菜单就可以做到这一点，但我更喜欢使用 <select>。有没有可靠的方法来确定下拉菜单是否打开？或者这是 Javascript 无法知道的东西？结论：似乎没有任何有保证的方法来确定选择菜单是否打开，无论是通过询问对象还是通过侦听它触发的事件。对于我自己的使用，我只是使用 onfocus 和 onblur 来跟踪选择是否具有焦点。我假设没有焦点就无法打开菜单，这在我测试过的所有浏览器中似乎都是如此。它实际上并没有告诉我菜单何时打开，但它告诉我何时不能打开，这对于我的目的来说已经足够了。您可以在 select 的 mouseenter 子元素中使用 option 事件，因为只有在选择菜单打开时才能进入其中，或者也可以在 click 元素上使用 select 事件，通常在打开它时抛出. 要在精确的时刻测试它是否打开我认为是不可能的。在 Internet Explorer 中选择元素是出了名的棘手。我认为没有任何方法可以可靠地确定一个是打开还是关闭。我可以查看选择是否打开，然后当用户选择新选项或完全模糊选择时关闭。但是，如果您单击相同的选项，或者仅单击一次选择（关闭它但不模糊它），它仍然显示“向下”。致力于制定更完整的解决方案。所以，期待这个答案有编辑...... <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script type="text/javascript"> var selected $( document ).ready( function() { $( '#test' ) .mousedown( function(){ console.log( 'down' ); selected = $( this ).val() } ) .blur( function(){ console.log( 'out' ) } ) .change( function(){ console.log( 'out' ) } ) .mouseleave( function(){ console.log( 'out' ) } ) .mouseup( function(){ if( $( this ).val() == selected ) console.log( 'out' ) } ) } // function ) // ready </script> <select id="test"> <option>1</option> <option>2</option> </select> 编辑：添加鼠标悬停 Edit2：添加了 mouseup - 现在可以使用！这是您问题的完整答案。是的，它有点长，但它在所有场景中都具有魅力。当用户在我的实验中快速选择一个选项时，上面使用 onClick 的答案不起作用，所以我为什么不给出完整的答案 function App() { const [isOpen, setIsOpen] = useState(false); const componentRef = useRef(null); const selectClickHandle = (event) => { if (componentRef.current) { const rect = componentRef.current.getBoundingClientRect(); const { clientX, clientY } = event; const isInComponent = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom; console.log(isInComponent); if (isInComponent == false) { setIsOpen(false); } } } const selectBlurHandle = () => { console.log("blur"); setIsOpen(false); } const selectkeyHandle = (event) => { console.log("key"); if (event.key === 'Enter' || event.keyCode === 13 || event.key === ' ' || event.keyCode === 32) { setIsOpen(true); } }; const selectMousePress = (event) => { console.log("mouse"); setIsOpen(!isOpen); } return ( <div className="App"> <h1 style={{ paddingTop: "200px" }}>currently closed {isOpen ? "true" : "false"}</h1> <div id="outer-container" > <select id="fruit" name="fruit" ref={componentRef} onMouseDown={selectMousePress} onClick={selectClickHandle} onBlur={selectBlurHandle} onKeyDown={selectkeyHandle} > <option value="apple" >Apple</option> <option value="banana">Banana</option> <option value="grape">Grape</option> </select> {/* <div className='hidden-copy' > {isOpen && options.map((item, idx) => ( <p key={idx} style={{ fontSize: "0.95rem" }}>copy</p> ))} </div> </div> */} </div> ); } export default App; 我还在媒体上写了一篇关于它的文章，如果需要更多说明，请访问。 https://medium.com/@ijlal.tanveer294/how-to-know-if-a-select-dropdown-is-open-555a304e7dda 更完整的解决方案是： <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script type="text/javascript"> var selected,selected2 $( document ).ready( function() { $( 'select[id$="test"]' ) .mousedown( function(){ console.log( 'predown' ); if( $( this ).val() != selected ) { console.log( 'down' ); selected = $( this ).val(); selected2=null;} else selected=null;} ) .blur( function(){ if (selected2==selected) { console.log( 'outb' ); selected=null; selected2=null;} } ) .mouseup( function(){ console.log( 'preoutu' ); if( $( this ).val() != selected || $( this ).val() == selected2 ) { console.log( 'outu' ); selected=null; selected2=null; } else selected2=$( this ).val(); } ) } // function ) // ready </script> <select id="1test"> <option>1</option> <option>2</option> </select> <select id="2test"> <option>1</option> <option>2</option> </select>

javascript dom menu popup drop-down-menu

回答 0 投票 0

警告：活动的 WebGL 上下文过多。最旧的上下文将丢失（Mapbox+React+Marzipano）

我们在我们的一个项目中将 marzipano 与 Mapbox 一起使用，我们用来在地图上显示点，单击任何点我们将在 marzipano 的帮助下显示 360 度图像。我们需要单击

reactjs dom mapbox mapbox-gl-js marzipano

回答 1 投票 0

需要在动态表中控制表单输入

我正在使用 PHP、Jquery 和 BootStrap。我正在生成一个表单，以便用户可以提供其可用性以供上游流程考虑。用户单击一个按钮，就会在网络中添加一个新行...

html jquery forms dom dom-events

回答 2 投票 0

如何在next.js中使用DOMParser？

我想操作一个html字符串，在vanillaJS中我会这样做：让 HTMLString = '你好 ...</desc> <question vote="8"> <p>我想操作一个 html 字符串，在 vanillaJS 中我会这样做：</p> <pre><code> let HTMLString = '<p>hello</p> <style> p{ color:black } <p>world</p> ' const parser = new DOMParser(); const doc = parser.parseFromString(HTMLString, "text/html"); doc.querySelectorAll('style').forEach(item => item.remove()) </code></pre> <p>这也适用于react，但我相信自从下一次编译服务器端后它只会抛出<pre><code>DOMParser is not defined</code></pre>，我尝试过像<pre><code>html-react-parser</code></pre>这样的包，它们只是将html解析为react元素并提供非常有限的功能，之后，我的最后一个度假村为此使用正则表达式，但我认为这不是一个好主意。</p> <p>任何帮助都会很好，谢谢</p> </question> <answer tick="false" vote="8"> <p>您可以尝试我在 next.js 项目中出于类似原因使用的 node-html-parser 组件： <a href="https://www.npmjs.com/package/node-html-parser" rel="noreferrer">https://www.npmjs.com/package/node-html-parser</a></p> <p>这个想法是在 getStaticProps() 函数的服务器端使用它，如下所示：</p> <pre><code>import { parse } from 'node-html-parser'; const root = parse('<ul id="list"><li>Hello World</li></ul>'); console.log(root.querySelector('#list')); </code></pre> <p>正如你所看到的，你可以使用标准 ES6 查询选择器遍历这个虚拟生成的 dom，而且还有更多选项，所以我发现这个非常强大。</p> </answer> <answer tick="false" vote="0"> <p><strong>Cheerio</strong> 似乎是另一个流行的选择：<a href="https://github.com/cheeriojs/cheerio" rel="nofollow noreferrer">https://github.com/cheeriojs/cheerio</a></p> <p>如其自述文件所示：</p> <pre><code>import * as cheerio from 'cheerio'; const $ = cheerio.load('<h2 class="title">Hello world</h2>'); $('h2.title').text('Hello there!'); $('h2').addClass('welcome'); $.html(); //=> <html><head></head><body><h2 class="title welcome">Hello there!</h2></body></html> </code></pre> </answer> </body></html>

javascript reactjs dom next.js domparser

回答 0 投票 0

Google 自定义搜索元素出现在包含下拉菜单的 div 元素上

我正在尝试将 Google 自定义搜索元素添加到网页。这是我正在使用的代码：我正在尝试将 Google 自定义搜索元素添加到网页。这是我正在使用的代码： <div class="gcse-searchbox-only" data-resultsUrl="https://example.com/search-results/" data-newWindow="false" data-queryParameterName="q" id="search"></div> 小部件本身运行良好，但小部件放置在包含其他动态显示的 div 元素的 div 元素下方，以呈现下拉菜单。下拉菜单出现在小部件后面。如何让下拉菜单出现在小部件前面？到目前为止，我已经尝试通过更改下拉菜单的 z 索引和包含小部件的 div 元素的 z 索引来解决此问题，但没有任何效果。 Z-index 仅适用于具有绝对、相对、固定或粘性位置值的项目。如果您有任何定位现实或继承的东西，则 z 索引将不起作用。您可以通过以下链接阅读更多内容： [W3C 学校 Z 索引属性][1] [1]: https://www.w3schools.com/cssref/pr_pos_z-index.php#:~:text=Note%3A%20z%2Dindex%20only%20works,of%20display%3Aflex%20elements) .

javascript html css dom dom-events

回答 1 投票 0

<a ping>的特征检测（超链接审核）

a 元素的 ping 属性用于超链接审核 - 基本上，当跟踪链接时，属性中列出的每个 url 都会使用 HTTP POST 进行“ping”。根据我可以使用它吗...

javascript dom browser-feature-detection

回答 1 投票 0

调用 onclick() 进行 GET 下载时在 HTMLAnchorElement 上添加标头

我需要在浏览器中下载非常大的文件，因此我需要浏览器支持才能下载该文件。它应该看起来像这样：我的问题是我必须使用 JWT 标头进行身份验证。我的

javascript angular typescript dom

回答 1 投票 0

在TextField中写入，之前的第一个节点没有从DOM中移除

我正在尝试使用初始文本“xyz”将“abc”覆盖到 MathQuill 的 TextField 中 var MQ = MathQuill.getInterface(2); var mySpan = document.getElementById('A'); var textField = MQ.TextField(mySp...

javascript jquery dom mathquill

回答 1 投票 0

无法同时滚动两个元素

在reactjs中，我有一个在给定useRef时滚动元素的函数： ref.current?.scrollIntoView({ 行为：“平稳”，块：“最近的”，内联：“岑...

javascript html css reactjs dom

回答 1 投票 0

使 DOM 元素有效地只读

我正在编写一个 .NET 表单控件来使用 MSHTML 编辑 HTML。我正在创建一些自定义元素，并希望使它们有效地只读。我想我可以通过专注于整个事情来解决这个问题

.net dom mshtml

回答 3 投票 0

当里面有很多文本时，在文本区域中输入速度非常慢

我在 Chrome 中尝试过这个。有一个文本区域，里面有很多文本，最后编辑部分会变得非常慢。光标和键盘输入响应变得缓慢。但如果我做到了...