使用HTML DOM在文档中查找元素

Question

我需要能够选择和修改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获得所需结果？

Answer 1

如果确定浏览器如何解析它，则可以按outerHTML属性对其进行过滤：

var $el = jQuery("body *").filter(function(){
   return this.outerHTML === '<span class="hello" data="na">Element</span>';
});
$el.html("modified element");

Answer 2

el = jQuery('<i class="fa fa-camera"></i>');

这并不是说“找到看起来像<i class="fa fa-camera"></i>的元素”。 它的意思是“使用fa和fa-camera这两个类创建新的i元素。这是动态创建新元素的签名 。

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，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或其他名称，则需要在同一行中添加。

Answer 3

您应该使用Javascript通过类似的方式获取元素

document.getElementById...
document.getElementsByClassName...
document.getElementsByTagName...

Javascript正在返回具有您选择的ID，类或标记名的元素。

Answer 4

您可以使用document.querySelector('.fa-camera')获取en元素

使用querySelector您可以选择IDs和Classes

Answer 5

您可以简单地通过其类名来引用它。

$('.fa.fa-camera').html("modified html");

类似于此答案https://stackoverflow.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>`

Answer 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 链接扩展了您的示例；