dom 相关问题

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

TypeScript 的目的是像 JavaScript 一样用于操作 DOM 吗？

到目前为止，我找到的每个 TypeScript 示例和教程都是关于语言功能、静态类型、Visual Studio 等。我找不到任何东西来告诉我应该如何参考使用它...

javascript dom typescript

回答 3 投票 0

我有一个菜单，仅在单击/触摸事件后才会显示。想象一下这种情况：我有一个菜单，仅在单击/触摸事件后才会显示。想象一下这种情况： <ul id="menu" class="ul-level1"> <li id="menu-li-1" class="li-level1"><a href="#">word 1 level 1</a></li> <li id="menu-li-2" class="li-level1 haschildren"><a href="#">word 2 level 1</a> <ul id="menu-ul-1" class="ul-level2"> <li id="menu-li-3" class="li-level2"><a href="#">word 1 level 2</a></li> <li id="menu-li-4" class="li-level2 haschildren"><a href="#">word 2 level 2</a> <ul id="menu-ul-2" class="ul-level3"> <li id="menu-li-5" class="li-level3"><a href="#">word 1 level 3</a></li> </ul> </li> <li id="menu-li-6" class="li-level2"><a href="#">word 3 level 2</a> <ul id="menu-ul-3" class="ul-level3 "> <li id="menu-li-7" class="li-level3 haschildren"><a href="#">word 2 level 3</a></li> </ul> </li> </ul> </li> </ul> <div id="wall" style="display:grid; grid-template-columns: 1fr 1fr 1fr;"> </div> <script> document.addEventListener("DOMContentLoaded",function(event){ let has_sons = document.querySelectorAll('ul li .haschildren'); let wall = document.querySelector("#wall"); has_sons.forEach((ul_li) => { ul_li.addEventListener("click", function(li){ let li_container_id = this.parentNode.id; let li_container_id_element = document.getElementById(li_container_id); if(!document.getElementById(li_container_id+"-wall")){ var nuovo_elemento = document.createElement('div'); nuovo_elemento.id = li_container_id + "-wall"; nuovo_elemento.classList.add("col1"); wall.appendChild(nuovo_elemento); //instaziare COL2 var nuovo_elemento = document.createElement('div'); nuovo_elemento.id = li_container_id + "-wall"; nuovo_elemento.classList.add("col2"); wall.appendChild(nuovo_elemento); //instaziare COL3 var nuovo_elemento = document.createElement('div'); nuovo_elemento.id = li_container_id + "-wall"; nuovo_elemento.classList.add("col3"); wall.appendChild(nuovo_elemento); let new_container = document.getElementById(li_container_id + "-wall"); //id del sottomenu per la sezione appendix let this_clone = this.cloneNode(true); //ELEMENTO SU CUI SI È FATTO "CLICK" this_clone.id = this.parentNode.id+'_goku'; this_clone.classList.add(this_clone.id); this_clone.classList.add("_goku"); new_container.appendChild(this_clone); let ul_li_ul = li_container_id_element.querySelector('ul'); new_container.appendChild(ul_li_ul); var colonna2 = document.getElementsByClassName("col2")[0]; var colonna3 = document.getElementsByClassName("col3")[0]; //inizio controllo su click menu di secondo livello con apertura al terzo livello let hafigli_liv2 = wall.querySelectorAll('ul li.haschildren'); hafigli_liv2.forEach((ul_li_liv2) => { ul_li_liv2.currentTarget.addEventListener("click", function(link_liv2){ link_liv2.preventDefault(); //evita che cambi pagina let link_liv2_clone = this.cloneNode(true); let link_liv2_clone_a = link_liv2_clone.querySelector('li a'); let li_container_id_liv2 = this.parentNode.parentNode.id; if(!document.getElementById(li_container_id_liv2+"-wall-col2")){ link_liv2_clone.id = li_container_id_liv2+"-wall-col2"; let original_colonna2 = colonna2.cloneNode(true); colonna2.innerHTML = ''; colonna2.appendChild(link_liv2_clone); //inizio controllo su click menu di terzo livello con apertura al secondo livello let hafigli_liv3 = document.querySelectorAll('.col2 li ul li.haschildren'); hafigli_liv3.forEach((ul_li_liv3) => { ul_li_liv3.addEventListener("click", function(link_liv3){ link_liv3.preventDefault(); //evita che cambi pagina let link_liv3_clone = this.cloneNode(true); let link_liv3_clone_a = link_liv3_clone.querySelector('li a'); let li_container_id_liv3 = this.parentNode.parentNode.id; if(!document.getElementById(li_container_id_liv3+"-wall-col3")){ link_liv3_clone.id = li_container_id_liv3+"-wall-col3"; let original_colonna3 = colonna3.cloneNode(true); colonna3.innerHTML = ''; colonna3.appendChild(link_liv3_clone); } }); }); } }); }); } }); //FINE click menu di primo livello con sottolivelli }); }); </script> 出于您可以想象但与此问题无关的原因，以“菜单”作为自己的 ID 的 UL 不可见；在 DOMContentLoaded 中，带有 getElementById 选择器的 #menu 将克隆到 .col1 元素处的 #wall，该元素具有要显示的 CSS 指令：无子菜单，因此只能看到：单词 1 级别 1 和单词 2 级别 1 此时，如果用户单击 word 2 level 1，则只会克隆其子菜单 (.ul-level2) 并显示在 #wall .col2 元素中，该元素具有要显示的 CSS 指令：无子菜单，因此此时您可以看到：word 1 level 2 AND word 2 level 1 at .col1, word 2 level 2 at .col2 此时，如果用户单击 word 2 level 2，其子菜单 (.ul-level2) 将被克隆并显示在 #wall .col3。这个Javascript适用于一些queryselectorAll，仅此而已，第一次触摸它可以工作，但它不再工作，浏览器在第二次点击时不会告诉任何问题：例如，如果在单击 word 2 level 2 并动态填充 .col3 之后，他单击 word 3 level 2 任何内容都会改变现有技术。有谁可以帮忙吗？我尝试按照本网站某处的阅读内容编辑某些行，但没有结果 ul_li.addEventListener("click", function(lk){ const link = lk.target.closest('a'); link.preventDefault(); //evita che cambi pagina 但没有任何改变...无论如何它都不起作用这个网站上有没有人可以在这种情况下提供帮助？

javascript dom queryselector selectors-api

回答 1 投票 0

无法访问shadowRoot

我想在网站 https://sirus.one/#play 上传递验证码，我需要在 textarea.g-recaptcha-response -> div.innerText 中设置已解决的验证码值。 TextArea有shadowRoot，网站所在...

javascript dom

回答 2 投票 0

从模板插入元素后如何获取元素

我最近遇到了一个问题，即我的脚本无法访问通过编辑同一脚本中的innerHTML 插入的元素。所以，我的 HTML 有这个占位符代码： &...

javascript html dom typeerror event-listener

回答 1 投票 0

提取 Div 中包含其他 dom 元素但不包含在任何标签内的纯文本

我正在尝试使用 PHP 提取一些未包含在任何标签中的纯文本。最好的解释方式就是展示；你好这是我要转发的文字... 我正在尝试使用 PHP 提取一些未包含在任何标签中的纯文本。最好的解释方式就是展示； <div> <span>Hello</span> THIS IS THE TEXT I WANT TO EXTRACT <span>this is some other text</span> <div><span>pow</span></div> </div> 我即将尝试的是循环并删除 div 中的所有 dom 元素，并且应该保留文本。但我希望有一种更优雅的方法:) 如果我正确阅读您的问题，您想要获取元素的文本，但不包括子元素的文本。使用 JavaScript，这里有一个解决方案： http://www.stevefenton.co.uk/Content/Blog/Date/201007/Blog/Jquery-Get-Text-While-Exclusion-Children/ 总而言之，你会这样做...... $("#mydiv").clone().children().remove().end().text(); 在 PHP（使用 phpquery）中，这将是... $phpqueryObj = phpQuery::newDocument(DOMinnerHTML($INNERHTMLOFYOURDOMELEMENT)); $text = $phpqueryObj->clone()->children()->remove()->end()->text(); 如果没有 jQuery / JavaScript，您将必须手动执行类似的过程，即从元素的克隆版本中删除子元素，然后获取内部文本。最简单的方法可能是使用给定上下文节点的 XPath。 $dom = new DOMDocument; $dom->loadHTML($html); $xpath = new DOMXPath($dom); //find all div nodes foreach ($xpath->query('//div') as $div) { //get any immediate child text nodes foreach ($xpath->query('text()', $div) as $text) { echo "$text->nodeValue\n"; } } 请注意，第一个查询将返回 all div，因此您必须针对所需的 div 使其更加具体。我在您的示例上测试了上面的代码并且它有效。

php html web-scraping dom

回答 2 投票 0

如何更改表单有效性检查后显示的默认工具提示，直到错误修复为止？

填写表格并单击“提交”后，第一个出现错误的字段会出现工具提示“值未填写！”。焦点改变后它会自动消失...

javascript html dom

回答 1 投票 0

在单击处理程序运行之前，focusIn 处理程序中的 setTimeout 如何解析？

我希望 DOM 事件处理是同步的，无论浏览器中事件的内部顺序如何。由于我不明白的原因，点击处理程序被严重延迟（在 30-...

javascript google-chrome dom dom-events synchronous

回答 1 投票 0

使用 Javascript 将 CSS 样式表作为字符串注入

我正在开发一个 Chrome 扩展程序，我希望用户能够添加自己的 CSS 样式来更改扩展程序页面（而不是网页）的外观。我研究过使用 document.style...