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>的元素”。这意味着“使用两个类i和fa创建一个新的fa-camera元素。它是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，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或其他内容，则需要沿着相同的行添加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 link here扩展了你的榜样;

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

6 个答案: