使用 HTML DOM 在文档中查找元素
Posted
技术标签:
【中文标题】使用 HTML DOM 在文档中查找元素【英文标题】：Find element in document using HTML DOM 【发布时间】：2017-04-10 18:59:13 【问题描述】：我需要能够选择和修改 html 文档中的元素。使用 jQuery 查找元素的常用方法是使用按属性、id、类或元素类型进行选择的选择器。 但是在我的例子中，我有元素的 HTML DOM，我想在我的文档中找到与这个 DOM 匹配的元素。
重要：
我知道我可以使用类选择器或 ID 选择器等。但有时我得到的 HTML 没有可供选择的类或 ID 或属性，所以我需要能够从元素的HTML。
例如这里是我需要找到的元素：
<span class='hello' data='na'>Element</span>
我尝试使用 jQuery 的 Find() 但它不起作用，这里是试用的 jsfiddle：https://jsfiddle.net/ndn9jtbj/
试用：
el = jQuery("<span class='hello' data='na'>Element</span>");
jQuery("body").find(el).html("modified element");
以下代码不会对存在于我的 HTML 中且与我提供的 DOM 相对应的元素进行任何更改。 有什么方法可以使用本机 javascript 或 jQuery 获得所需的结果？
【问题讨论】：
请试试这个：jQuery("body").find(el).html("modified html");
那么使用任何相关选择器有什么问题，例如：$('i.fa.fa-camera').html("modified html");???
@Alexandru-IonutMihai 我也尝试过 body 但结果相同
你包含 jquery 脚本吗？
@A.Wolff 由于我构建数据的方式，我不能那样使用选择器，我需要能够使用所需元素的完整 html DOM 进行选择。
【参考方案1】：
如果您确定浏览器如何解析它，您可以通过outerHTML 属性对其进行过滤：
var $el = jQuery("body *").filter(function()
return this.outerHTML === '<span class="hello" data="na">Element</span>';
);
$el.html("modified element");
【讨论】：
这是唯一有效的解决方案，非常感谢！ 这既聪明又有点可怕。 +1【参考方案2】：el = jQuery('<i class="fa fa-camera"></i>');
这不是说“找到看起来像<i class="fa fa-camera"></i>的元素”。它的意思是“用fa 和fa-camera 两个类创建一个新的i 元素。它是the signature for creating new elements on the fly。
jQuery 选择器看起来像 CSS，而不像 HTML。要找到具有这两个类的 i 元素，您需要像 i.fa.fa-camera 这样的选择器。
此外，$("document") 会查找名为 document 的 HTML 元素。这不存在。要选择实际文档，您需要$(document)。您可以这样做：
$(document).find('i.fa.fa-camera').html("modified html")
或者，更简单地说，您可以这样做：
$('i.fa.fa-camera').html('modified html');
您在对问题的评论中指出，您需要根据收到的 HTML 字符串查找元素。委婉地说，这很困难，因为从本质上讲，一旦浏览器解析了 HTML，它就不再存在。它变成了一个 DOM 结构。它不能只是一个字符串搜索。
你能做的最好的事情是这样的：
var searchEl = jQuery('<i class="fa fa-camera"></i>');
var tagName = searchEl.prop('tagName');
var classes = [].slice.apply(searchEl.prop('classList'));
$(tagName + "." + classes.join('.')).html('modified html');
请注意，这只会使用标签名和类名来查找元素。如果您还需要 ID 或其他内容，则需要按照相同的方式添加。
【讨论】：
如果我们保证总会有至少一个选择器，这是一个很好的解决方案，但是当没有选择器时它就不起作用 @FaouziFJTech “当没有选择器时”是什么样的？能举个例子吗？ 是的，例如，这是一个例子【参考方案3】：您应该使用 Javascript 通过类似的方式获取元素
document.getElementById...
document.getElementsByClassName...
document.getElementsByTagName...
Javascript 正在返回具有您选择的 Id、类或标记名称的元素。
【讨论】：
【参考方案4】：你可以通过document.querySelector('.fa-camera')获取en元素
使用 querySelector，您可以选择 IDs 和 Classes
【讨论】：
我需要使用完整的 html，不能使用选择器，因为在某些情况下我可能没有任何选择器【参考方案5】：你可以简单地通过它的类名来引用它。
$('.fa.fa-camera').html("modified html");
类似于这个答案https://***.com/a/1041352/409556
这是一个完整的例子：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function()
$('.fa.fa-camera').html("modified html");
);
</script>
</head>
<body>
<i class="fa fa-camera"><h1>Some HTML</h1></i>
</body>
</html>`
【讨论】：
我需要使用完整的 html，使用选择器不是一种选择，因为在某些情况下我可能没有任何选择器。【参考方案6】：您可以使用的一件事是检查该元素具有的属性（类和 id 也以某种方式出现在这里），并构建 jQuery 选择器或DOM querySelector 以找到您需要的元素。最难的部分是根据 innerHTML 属性找到元素 - 其中的“元素”文本，对于这个你可能必须抓取所有相似的元素，然后搜索它们。
<span class='hello' data='na'>Element</span>
jQuery('body').find('span.hello[data=\'na\']').html('modified element')
注意 'span' - 那是标签选择器，'.hello' - 类，'[data="na"]' 数据属性和数据名称。
Jsfiddle link here 扩展了您的示例；
【讨论】：
以上是关于使用 HTML DOM 在文档中查找元素的主要内容，如果未能解决你的问题，请参考以下文章