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

Question

我需要能够 select 并修改 HTML 文档中的元素。使用 jQuery 查找元素的通常方法是使用 select 或 select 按属性、id、class 或元素类型。但是在我的例子中，我有元素的 HTML DOM 并且我想在我的文档中找到与此 DOM.

匹配的元素

重要：

我知道我可以使用 class select 或 ID select 等。但有时我得到的 HTML 没有 class 或 ID 或 select 的属性，所以我需要能够 select 从元素的 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

您应该使用 Javascript 通过类似

的方式获取元素

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

Javascript 返回带有您选择的 ID、Class 或标记名称的元素。

Answer 2

您可以通过 document.querySelector('.fa-camera')

获取 en 元素

使用 querySelector 您可以 select IDs 和 Classes

Answer 3

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

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

类似于这个答案

这是一个完整的例子：

<!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 4

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

这不是说 "find the element that looks like <i class="fa fa-camera"></i>"。它的意思是“用两个 classes fa 和 fa-camera 创建一个新的 i 元素。它是 the signature for creating new elements on the fly.

jQuery select或者看起来像 CSS，不像 HTML。要找到具有这两个 class 的 i 元素，您需要 select 或 i.fa.fa-camera.

此外 $("document") 查找名为 document 的 HTML 元素。这不存在。要 select 实际文档，您需要 $(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');

请注意，这将仅使用标签名称和 class 名称来查找元素。如果您还需要 ID 或其他内容，则需要按照相同的方式添加。

Answer 5

如果您确定浏览器如何解析它，您可以按 outerHTML 属性过滤它：

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

Answer 6

您可以使用的一件事是检查元素具有的属性（class 和 id 也以某种方式出现在这里），以及构建 jQuery 选择器或 DOM querySelector找到你需要的元素。最难的部分是找到基于 innerHTML 属性 - "Element" 文本的元素，对于这个你可能必须抓住所有相似的元素然后搜索它们。

<span class='hello' data='na'>Element</span>
jQuery('body').find('span.hello[data=\'na\']').html('modified element')

注意 'span' - 那是标签选择器，'.hello' - class，'[data="na"]' 带有数据名称的数据属性。

Jsfiddle link here 扩展了您的示例；

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

Find element in document using HTML DOM

html

javascript

jquery

dom

jquery-selectors