// 获取DOM对象
const domElement = document.getElementById('myElement');

// 检测方法
if (domElement instanceof HTMLElement) {
    console.log('这是一个DOM对象');
}

// 或者更简单的方式
if (domElement.nodeType) {
    console.log('这是一个DOM对象');
}

// 获取jQuery对象
const $jQueryElement = $('#myElement');

// 检测方法
if ($jQueryElement instanceof jQuery) {
    console.log('这是一个jQuery对象');
}

// 或者检查jQuery特有的属性
if ($jQueryElement.jquery) {
    console.log('这是一个jQuery对象，版本是：' + $jQueryElement.jquery);
}

const domElement = document.getElementById('myElement');
const $jQueryElement = $(domElement); // 用$()包装

const $jQueryElement = $('#myElement');
const domElement = $jQueryElement[0]; // 通过索引获取
// 或者
const domElement = $jQueryElement.get(0);

// 错误示例
document.getElementById('myElement').hide(); // DOM对象没有hide方法

// 正确做法
$(document.getElementById('myElement')).hide(); // 先转换为jQuery对象

const $element = $('#nonExistentElement');
if ($element.length) {
    // 元素存在
    $element.doSomething();
} else {
    console.log('元素不存在');
}

// 混合使用示例
const $buttons = $('.btn'); // jQuery对象

$buttons.each(function() {
    // 在each回调中，this是DOM对象
    const domButton = this;
    const $jQueryButton = $(this);
    
    // 检测类型
    if (domButton instanceof HTMLElement) {
        console.log('DOM按钮');
    }
    
    if ($jQueryButton.jquery) {
        console.log('jQuery包装的按钮');
    }
    
    // 实际应用
    $(this).on('click', function() {
        // 这里的this也是DOM对象
        this.classList.add('active'); // 直接操作DOM
        $(this).fadeOut(); // 使用jQuery方法
    });
});