dom 相关问题

Chrome 在将空文档片段插入到 dom 之前将其输出到控制台

将文档片段插入 dom 时，Chrome 浏览器会向控制台输出空文档片段，而 Firefox 在插入之前输出非空片段，在插入之后输出空片段...

如何从 simpleXML_Element_Object 中抓取内容？

我正在尝试从任何维基页面右侧的维基百科信息框中抓取内容。 我正在使用 DOMXpath 来抓取内容。 在此链接的信息框上（在...

获取 HTML 表格单元格中 <a> 标签的 href 属性

我正在尝试使用 php 的 domDocument 从某些数据的 url 中提取 href。 以下拉动网址的锚点，但我想要网址 $events[$i]['race_1'] = trim($cols->item(1)->点头...

DOM 元素.最近的子元素

查询 DOM 时，是否有任何原因导致标签不能作为子项使用？ var el = document.getElementById("myEl"); var group = el.closest(".form-group"); var ipt...

使用 JavaScript 获取选定的选项文本

我有一个像这样的下拉列表： 狗 猫 鸟 &... 我有一个像这样的下拉列表： <select id="box1"> <option value="98">dog</option> <option value="7122">cat</option> <option value="142">bird</option> </select> 如何使用 JavaScript 获取实际的选项文本而不是值？ 我可以通过以下方式获得价值： <select id="box1" onChange="myNewFunction(this.selectedIndex);" > 但我想要的是7122，而不是cat。 尝试选项 function myNewFunction(sel) { alert(sel.options[sel.selectedIndex].text); } <select id="box1" onChange="myNewFunction(this);"> <option value="98">dog</option> <option value="7122">cat</option> <option value="142">bird</option> </select> 纯 JavaScript var sel = document.getElementById("box1"); var text= sel.options[sel.selectedIndex].text; jQuery： $("#box1 option:selected").text(); 据我所知，有两种解决方案。 两者都只需要使用vanilla javascript 1 个选定选项 现场演示 const log = console.log; const areaSelect = document.querySelector(`[id="area"]`); areaSelect.addEventListener(`change`, (e) => { // log(`e.target`, e.target); const select = e.target; const value = select.value; const desc = select.selectedOptions[0].text; log(`option desc`, desc); }); <div class="select-box clearfix"> <label for="area">Area</label> <select id="area"> <option value="101">A1</option> <option value="102">B2</option> <option value="103">C3</option> </select> </div> 2 个选项 现场演示 const log = console.log; const areaSelect = document.querySelector(`[id="area"]`); areaSelect.addEventListener(`change`, (e) => { // log(`e.target`, e.target); const select = e.target; const value = select.value; const desc = select.options[select.selectedIndex].text; log(`option desc`, desc); }); <div class="select-box clearfix"> <label for="area">Area</label> <select id="area"> <option value="101">A1</option> <option value="102">B2</option> <option value="103">C3</option> </select> </div> 所有这些功能和随机的东西，我认为最好使用这个，并且这样做： this.options[this.selectedIndex].text HTML： <select id="box1" onChange="myNewFunction(this);"> JavaScript： function myNewFunction(element) { var text = element.options[element.selectedIndex].text; // ... } 演示：http://jsfiddle.net/6dkun/1/ 使用- $.trim($("select").children("option:selected").text()) //cat 这是小提琴 - http://jsfiddle.net/eEGr3/ ECMAScript 6+ const select = document.querySelector("#box1"); const { text } = [...select.options].find((option) => option.selected); 使用普通 JavaScript onChange = { e => e.currentTarget.options[e.selectedIndex].text } 如果值在循环内，将为您提供准确的值。 使用 Typescript 在 React 上获取它： const handleSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => { const { options, selectedIndex } = event.target; const text = options[selectedIndex].text; // Do something... }; 使用jquery。 在您的活动中 let selText = $("#box1 option:selected").text(); console.log(selText); function runCode() { var value = document.querySelector('#Country').value; window.alert(document.querySelector(`#Country option[value=${value}]`).innerText); } <select name="Country" id="Country"> <option value="IN">India</option> <option value="GBR">United Kingdom </option> <option value="USA">United States </option> <option value="URY">Uruguay </option> <option value="UZB">Uzbekistan </option> </select> <button onclick="runCode()">Run</button> 您可以使用 getSelected() 方法获取包含所选项目的类似数组的对象。像这样： querySelector('#box1').getSelected() 因此您可以使用 .textContent 属性提取文本。像这样： querySelector('#box1').getSelected()[0].textContent 如果您有多个选择框，您可以循环遍历类似数组的对象 希望对你有帮助😎👍 var Selectionlist=document.getElementById("代理"); td2.innerHTML=selectionlist.children[selectionlist.selectedIndex].innerHTML; 您需要获取选项的innerHTML，而不是其值。 使用 this.innerHTML 而不是 this.selectedIndex。 编辑：您需要先获取选项元素，然后使用innerHTML。 使用 this.text 而不是 this.selectedIndex。 <select class="cS" onChange="fSel2(this.value);"> <option value="0">S?lectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select> <select id="iS1" onChange="fSel(options[this.selectedIndex].value);"> <option value="0">S?lectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select><br> <select id="iS2" onChange="fSel3(options[this.selectedIndex].text);"> <option value="0">S?lectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select> <select id="iS3" onChange="fSel3(options[this.selectedIndex].textContent);"> <option value="0">S?lectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select> <select id="iS4" onChange="fSel3(options[this.selectedIndex].label);"> <option value="0">S?lectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select> <select id="iS4" onChange="fSel3(options[this.selectedIndex].innerHTML);"> <option value="0">S?lectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select> <script type="text/javascript"> "use strict"; const s=document.querySelector(".cS"); // options[this.selectedIndex].value let fSel = (sIdx) => console.log(sIdx, s.options[sIdx].text, s.options[sIdx].textContent, s.options[sIdx].label); let fSel2= (sIdx) => { // this.value console.log(sIdx, s.options[sIdx].text, s.options[sIdx].textContent, s.options[sIdx].label); } // options[this.selectedIndex].text // options[this.selectedIndex].textContent // options[this.selectedIndex].label // options[this.selectedIndex].innerHTML let fSel3= (sIdx) => { console.log(sIdx); } </script> // fSel 但是： <script type="text/javascript"> "use strict"; const x=document.querySelector(".cS"), o=x.options, i=x.selectedIndex; console.log(o[i].value, o[i].text , o[i].textContent , o[i].label , o[i].innerHTML); </script> // .cS" 还有这个： <select id="iSel" size="3"> <option value="one">Un</option> <option value="two">Deux</option> <option value="three">Trois</option> </select> <script type="text/javascript"> "use strict"; const i=document.getElementById("iSel"); for(let k=0;k<i.length;k++) { if(k == i.selectedIndex) console.log("Selected ".repeat(3)); console.log(`${Object.entries(i.options)[k][1].value}`+ ` => ` + `${Object.entries(i.options)[k][1].innerHTML}`); console.log(Object.values(i.options)[k].value , " => ", Object.values(i.options)[k].innerHTML); console.log("=".repeat(25)); } </script> 尝试以下方法： myNewFunction = function(id, index) { var selection = document.getElementById(id); alert(selection.options[index].innerHTML); }; 参见这里 jsfiddle 示例 通过使用addEventListener()，我们可以获取选项的文本、值、属性。 <select id="box1"> <option value="98">dog</option> <option value="7122">cat</option> <option value="142" size="small">bird</option> //Added extra attribute for attribute example </select> 通过“JavaScript”： let selectText = document.getElementById("box1"); selectText.addEventListener("change", (event) => { console.log(selectText.options[selectText.selectedIndex].text); }); //console.log(selectText.options[selectText.selectedIndex].value); //selectText.options[selectText.selectedIndex].getAttribute("size")); //small

使用简单的 HTML DOM 来抓取？

简单的 HTML DOM 基本上是添加到页面的 php，它可以让您进行简单的网页抓取。它在大多数情况下都很好，但我无法弄清楚手册，因为我不是一个编码员。有没有...

如何使用Python抓取XML？

我正在尝试使用 Python 解析以下 XML。我在用： thumbnail_tag = dom.getElementsByTagName('媒体:缩略图')[0].toxml() 这将选择第一个。我知道我可以将 [0] 更改为 [...

保留对 iframe 的引用并将其插入回 DOM，无需回流，在 iframe 内重新绘制

我有一个网站，可以在 iframe 中加载一些子域。它可以是 5 个或 10 个或任何更多数量的 iframe。用户可以选择在这些 iframe 之间进行切换。在任何时候只有 1 如果...

类型“Element”上不存在属性“checked”，而变量是 NodeList

尝试使用以下代码选择所有无线电输入及其检查状态 const radioInput = document.querySelectorAll("input[type=radio]"); radioInput.forEach((r) => (r.checked ...

事件表中的同步/异步是什么意思

我在 https://www.w3.org/TR/uievents 上发现了一个有趣的事件表。但是，我不熟悉同步/异步类别。 事件类型 同步/异步 冒泡阶段 可信事件 目标

使用 Ajax 的结果更新 Dom，但操作事件不起作用

我正在开发一个评论重播系统，就像任何社交媒体网站一样，但使用 YII2 框架 我创建了 Wedget 来显示某些项目（如产品）的评论列表 每条评论都带有按钮&...

为什么调用`URL.revokeObjectURL`方法会有40秒的延迟？

FileSaver.js源代码#L106 a.href = URL.createObjectURL(blob) setTimeout(function () { URL.revokeObjectURL(a.href) }, 4E4) // 40s setTimeout(函数() { 点击(a) }, 0) 为什么会有40秒...

如何抓取相关图像

如果我查看亚马逊按钮将商品添加到其网站上的列表中 - 您可以在这里看到它： http://www.amazon.co.uk/wishlist/get-button 它是如何工作的？我很确定它会以某种方式刮擦页面，但...

从具有指定类的所有元素中获取文本作为平面数组

我知道我们可以使用 PHP DOM 来使用 PHP 解析 HTML，但我有一个特定的要求。我有如下 HTML 内容 我知道我们可以使用 PHP DOM 来使用 PHP 解析 HTML，但我有一个特定的要求。我有如下所示的 HTML 内容 <p class="Heading1-P"> <span class="Heading1-H">Chapter 1</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 1</span> </p> <p class="Heading1-P"> <span class="Heading1-H">Chapter 2</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 2</span> </p> <p class="Heading1-P"> <span class="Heading1-H">Chapter 3</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 3</span> </p> 我想解析上面的 HTML 并将内容保存到两个不同的数组中，例如： $heading 和 $content $heading = array('Chapter 1', 'Chapter 2', 'Chapter 3'); $content = array('This is chapter 1', 'This is chapter 2', 'This is chapter 3'); 我可以简单地使用 jQuery 来实现这一点。但我不确定这是否是正确的方法。 我已经使用 DOMDocument 和 DOMXPath 来获得解决方案： $test = <<< HTML <p class="Heading1-P"> <span class="Heading1-H">Chapter 1</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 1</span> </p> <p class="Heading1-P"> <span class="Heading1-H">Chapter 2</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 2</span> </p> <p class="Heading1-P"> <span class="Heading1-H">Chapter 3</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 3</span> </p> HTML; $dom = new DOMDocument(); $dom->loadHTML($test); $xpath = new DOMXPath($dom); $heading = parseToArray($xpath,'Heading1-H'); $content = parseToArray($xpath,'Normal-H'); var_dump($heading); echo "<br/>"; var_dump($content); echo "<br/>"; function parseToArray(DOMXPath $xpath, string $class): array { $xpathquery = "//*[@class='$class']"; $elements = $xpath->query($xpathquery); $resultarray = []; foreach ($elements as $element) { $nodes = $element->childNodes; foreach ($nodes as $node) { $resultarray[] = $node->nodeValue; } } return $resultarray; } 尝试查看 PHP 简单 HTML DOM 解析器 它具有类似于 jQuery 的出色语法，因此您可以轻松地通过 ID 或类选择任何您想要的元素 // include/require the simple html dom parser file $html_string = ' <p class="Heading1-P"> <span class="Heading1-H">Chapter 1</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 1</span> </p> <p class="Heading1-P"> <span class="Heading1-H">Chapter 2</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 2</span> </p> <p class="Heading1-P"> <span class="Heading1-H">Chapter 3</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 3</span> </p>'; $html = str_get_html($html_string); foreach($html->find('span') as $element) { if ($element->class === 'Heading1-H') { $heading[] = $element->innertext; }else if($element->class === 'Normal-H') { $content[] = $element->innertext; } } 这是使用 DiDOM 解析 html 的另一种方法。 composer require imangazaliev/didom <?php use DiDom\Document; require_once('vendor/autoload.php'); $html = <<<HTML <p class="Heading1-P"> <span class="Heading1-H">Chapter 1</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 1</span> </p> <p class="Heading1-P"> <span class="Heading1-H">Chapter 2</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 2</span> </p> <p class="Heading1-P"> <span class="Heading1-H">Chapter 3</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 3</span> </p> HTML; $document = new Document($html); // find chapter headings $elements = $document->find('.Heading1-H'); $headings = []; foreach ($elements as $element) { $headings[] = $element->text(); } // find chapter texts $elements = $document->find('.Normal-H'); $chapters = []; foreach ($elements as $element) { $chapters[] = $element->text(); } echo("Headings\n"); foreach ($headings as $heading) { echo("- {$heading}\n"); } echo("Chapter texts\n"); foreach ($chapters as $chapter) { echo("- {$chapter}\n"); } 您的一个选择是使用 DOMDocument 和 DOMXPath。它们确实需要一些曲线来学习，但是一旦你这样做了，你就会对你所取得的成就感到非常满意。 在 php.net 中阅读以下内容 http://php.net/manual/en/class.domdocument.php http://php.net/manual/en/class.domxpath.php 希望这有帮助。 这是 @saji89 答案的功能风格等效。 在任何级别上搜索具有所需类的任何元素（如果可能有多个类分配给一个元素，请使用 contains()），然后使用 text() 定位节点文本。将 XPath 对象转换为数组后，只需隔离 nodeValue 列即可。 代码：（演示） $dom = new DOMDocument(); $dom->loadHTML($html); $xpath = new DOMXPath($dom); foreach (['Heading1-H', 'Normal-H'] as $class) { var_export( array_column( iterator_to_array($xpath->query("//*[@class='$class']/text()")), 'nodeValue' ) ); echo "\n---\n"; } 输出： array ( 0 => 'Chapter 1', 1 => 'Chapter 2', 2 => 'Chapter 3', ) --- array ( 0 => 'This is chapter 1', 1 => 'This is chapter 2', 2 => 'This is chapter 3', ) --- // 从 URL 或文件创建 DOM $html = file_get_html('http://www.google.com/'); // 查找所有图像 foreach($html->find('img') as $element) echo $element->src . '<br>'; // 查找所有链接 foreach($html->find('a') as $element) echo $element->href . '<br>';

如何在PHP中解析HTML？

我知道我们可以使用 PHP DOM 来使用 PHP 解析 HTML。我也在 Stack Overflow 上发现了很多问题。但我有一个具体的要求。我有如下 HTML 内容 我知道我们可以使用 PHP DOM 来使用 PHP 解析 HTML。我也在 Stack Overflow 上发现了很多问题。但我有一个具体的要求。我有如下 HTML 内容 <p class="Heading1-P"> <span class="Heading1-H">Chapter 1</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 1</span> </p> <p class="Heading1-P"> <span class="Heading1-H">Chapter 2</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 2</span> </p> <p class="Heading1-P"> <span class="Heading1-H">Chapter 3</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 3</span> </p> 我想解析上面的 HTML 并将内容保存到两个不同的数组中，例如： $heading 和 $content $heading = array('Chapter 1','Chapter 2','Chapter 3'); $content = array('This is chapter 1','This is chapter 2','This is chapter 3'); 我可以简单地使用 jQuery 来实现这一点。但我不确定这是否是正确的方法。 如果有人能指出我正确的方向，那就太好了。 预先感谢。 我已经使用 DOMDocument 和 DOMXPath 来获得解决方案： $test = <<< HTML <p class="Heading1-P"> <span class="Heading1-H">Chapter 1</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 1</span> </p> <p class="Heading1-P"> <span class="Heading1-H">Chapter 2</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 2</span> </p> <p class="Heading1-P"> <span class="Heading1-H">Chapter 3</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 3</span> </p> HTML; $dom = new DOMDocument(); $dom->loadHTML($test); $xpath = new DOMXPath($dom); $heading = parseToArray($xpath,'Heading1-H'); $content = parseToArray($xpath,'Normal-H'); var_dump($heading); echo "<br/>"; var_dump($content); echo "<br/>"; function parseToArray(DOMXPath $xpath, string $class): array { $xpathquery = "//*[@class='$class']"; $elements = $xpath->query($xpathquery); $resultarray = []; foreach ($elements as $element) { $nodes = $element->childNodes; foreach ($nodes as $node) { $resultarray[] = $node->nodeValue; } } return $resultarray; } 尝试查看 PHP 简单 HTML DOM 解析器 它具有类似于 jQuery 的出色语法，因此您可以轻松地通过 ID 或类选择任何您想要的元素 // include/require the simple html dom parser file $html_string = ' <p class="Heading1-P"> <span class="Heading1-H">Chapter 1</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 1</span> </p> <p class="Heading1-P"> <span class="Heading1-H">Chapter 2</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 2</span> </p> <p class="Heading1-P"> <span class="Heading1-H">Chapter 3</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 3</span> </p>'; $html = str_get_html($html_string); foreach($html->find('span') as $element) { if ($element->class === 'Heading1-H') { $heading[] = $element->innertext; }else if($element->class === 'Normal-H') { $content[] = $element->innertext; } } 这是使用 DiDOM 解析 html 的另一种方法，它在速度和内存占用方面提供了显着的“更好的性能”。 composer require imangazaliev/didom <?php use DiDom\Document; require_once('vendor/autoload.php'); $html = <<<HTML <p class="Heading1-P"> <span class="Heading1-H">Chapter 1</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 1</span> </p> <p class="Heading1-P"> <span class="Heading1-H">Chapter 2</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 2</span> </p> <p class="Heading1-P"> <span class="Heading1-H">Chapter 3</span> </p> <p class="Normal-P"> <span class="Normal-H">This is chapter 3</span> </p> HTML; $document = new Document($html); // find chapter headings $elements = $document->find('.Heading1-H'); $headings = []; foreach ($elements as $element) { $headings[] = $element->text(); } // find chapter texts $elements = $document->find('.Normal-H'); $chapters = []; foreach ($elements as $element) { $chapters[] = $element->text(); } echo("Headings\n"); foreach ($headings as $heading) { echo("- {$heading}\n"); } echo("Chapter texts\n"); foreach ($chapters as $chapter) { echo("- {$chapter}\n"); } 您的一个选择是使用 DOMDocument 和 DOMXPath。它们确实需要一些曲线来学习，但是一旦你这样做了，你就会对你所取得的成就感到非常满意。 在 php.net 中阅读以下内容 http://php.net/manual/en/class.domdocument.php http://php.net/manual/en/class.domxpath.php 希望这有帮助。 // 从 URL 或文件创建 DOM $html = file_get_html('http://www.google.com/'); // 查找所有图像 foreach($html->find('img') as $element) echo $element->src . '<br>'; // 查找所有链接 foreach($html->find('a') as $element) echo $element->href . '<br>';

如何使用 PHP 简单 HTML DOM 解析器找到 HTML 文件中的最后一个元素？

根据 SIMPLE HTML DOM PARSER 的文档（在“如何修改 HTML 元素”选项卡下），此代码找到 的第一个实例： $html = str_get_html('<... 根据 SIMPLE HTML DOM PARSER 的文档（在“如何修改 HTML 元素”选项卡下），此代码找到 <div class="hello"> 的第一个实例： $html = str_get_html('<div class="hello">Hello</div><div class="world">World</div>'); $html->find('div[class=hello]', 0)->innertext = 'foo'; echo $html; // Output: <div class="hello">foo</div><div class="world">World</div> 如果我想将 'foo' 插入到 <div class="hello"> 的 last 实例中，假设 HTML 代码有很多 <div class="hello"> 实例，该怎么办。 应该用什么来代替 0？ 好吧，自从 // Find all anchors, returns a array of element objects $ret = $html->find('whatever'); 返回一个 array 包含所有 <whatever> 元素，您可以使用 PHP 的常规数组函数获取最后一个元素，例如与 end $last = end($ret); 如果SimpleHtmlDom完全实现了CSS3 Selectors进行查询，您还可以修改您的查询来使用 :last-of-type 仅查找返回节点列表中的最后一个同级。 来自手册： // Find lastest anchor, returns element object or null if not found (zero based) $ret = $html->find('a', -1); lastChild 属性返回元素的最后一个子对象。 编辑： 显然不是 JQuery :) 请参阅 W3C 选择器参考：http://www.w3.org/TR/css3-selectors/#last-child-pseudo 最初的帖子问题是“应该用什么代替 0？” 答案：-1

当 Angular 2 组件属性更改时更新 DOM

我最近刚刚从 Angular 1 迁移到 Angular 4，我很难理解为什么组件属性更新时 DOM 没有更新。我搜索并阅读了无数

获取 ul li 字符串值并将它们存储在变量或数组中 php [关闭]

我正在尝试将网站上列表项的字符串值存储到 PHP 中的变量/数组中，以对它们进行一些条件检查/语句。我在获取列表时遇到了一些困难...

BeautifulSoup：跳过 html 元素

我有以下html结构：这只是其中的一部分，但我认为这个片段足以解释我的问题。 色彩文摘 AgAkAZwCJ...

动态显示图像时显示轻微延迟

我有一个页面，当单击各种按钮时动态显示图像。一切都很完美。 但是，我希望每个新创建的图像都稍微延迟地出现在页面上，...