Javascript 使用jquery closest（）和find（）返回实际的HTML元素

我的HTML网页上有以下类型的元素

<div class="form-group>
    <div class="car">
        <div class="carIventory carDescription" contenteditable="true">This is car # 1</div>
    </div>
    <div class="tool">
        <button>Select me!</button>
    </div>
</div>

产生以下结果：

jQuery.fn.init [div.carIventory.carDescription, prevObject: jQuery.fn.init(1)]

但如果我使用此代码：

const $element = document.querySelector('.carDescription');
console.log("carDescription ", $element);

我得到了我想要的格式：

<div class="carIventory carDescription" contenteditable="true">This is car # 1</div>

这是一辆车

有没有一种方法可以像

querySelector（）

那样使用

closest（）

和

find（）

返回实际的HTML元素

谢谢

像这样使用

var $element = $(e.target).closest('.form-group').find('.carDescription');
console.log("carDescription ", $element.parent().html());

---

它将给出HTML输出。

您看到的是显示DOM元素的控制台。根据浏览器的调试器，它们输出不同的内容。在本例中，您看到的是一个jQuery对象，而不是对DOM的引用

如果希望使用的DOM或

[0]

从jQuery的类数组对象引用DOM元素

var $element = $(e.target).closest('.form-group').find('.carDescription');
console.log("carDescription ", $element.get(0));
console.log("carDescription ", $element[0]);

或者干脆使用现代DOM方法，同时跳过jQuery

var element = document.querySelector(e.target).closest(".form-group").querySelector('.carDescription');
console.log(element);

---

在jQuery中可以看到数组中的第一项是DOM元素，因此可以在jQuery代码中使用

$element[0]

，

$element

是该元素的jQuery表示形式，因此可以得到jQuery.nf.init。您可以使用jquery，例如

console.log（“carDescription”、$element.text（））

或者您可以使用

$element[0]

将其转换为DOM节点，类似于

console.log（“carDescription”，$element[0].innerHTML）-就我个人而言，我会坚持使用jquery（因此是“类似的”）@freedomn-m谢谢
text（）
确实像这样向我显示了
的内容：
这是车#1
。但是它没有显示实际的HTML元素，如我上面需要的格式。如果需要DOM，为什么要使用jQuery？然后
$element[0]。outerHTML
？这与querySelector不同。。。。。字符串不是DOM元素…谢谢！第二个选择确实奏效了。我不知道你可以像那样组合
querySelector（）
和
closest（）
。
var element = document.querySelector(e.target).closest(".form-group").querySelector('.carDescription');
console.log(element);