JQuery与JavaScript通过ID获取元素的差异及取值异常问题

问题场景 #

为表单校验添加动态元素时，尝试用$(' #id ')替代document.getElementById(' id ')简化代码，却发现两者获取的信息不一致：jQuery方法获取输入框的value时始终返回undefined，但原生JS方法可以正常获取。已确认jQuery CDN为最新版本且无冲突，相关代码片段如下：

var validation = true;

function checkSubmit() {
  
    // Using Javascript method
    const firstname = document.getElementById('firstname');
    const firstname_title = document.getElementById('firstname-title');

    if (firstname.value.length == 0) { // JQuery method doesn't return correct value here
        if (validation) {
            validation = false;
            firstname.style = "border-color: red;color: whitesmoke;transition: 0.25s;";
            firstname_title.style = "border-color: red;transition: 0.25s;";
            
            name_label = document.createElement('label');
              name_label.className = "d-flex justify-content-center fade-content-label";
              name_label.id = 'name-label';
              name_label.style = "color: red;font-size: 20px";
              name_label_node = document.createTextNode('Please enter a firstname');
              name_label.appendChild(name_label_node);
            var insert = $(' #name-insert '); // JQuery method works here
            insert.prepend(name_label);
        }
    }
}

两者的本质差异 #

• 原生document.getElementById('id')：返回浏览器原生的DOM元素对象，直接对应页面上的DOM节点，可直接访问原生DOM属性（如.value、.style）并调用原生方法。
• jQuery的$('#id')：返回的是jQuery包装后的对象，是一个包含原生DOM元素的集合类对象，并非原生DOM节点本身。因此不能直接使用原生DOM的属性（如.value），必须使用jQuery提供的专属方法操作，比如获取值用.val()，设置样式用.css()。

问题解决方法 #

如果想用jQuery获取输入框的值，需要替换成jQuery的.val()方法：

// 错误写法：jQuery对象没有.value属性，会返回undefined
// const firstname = $('#firstname').value;

// 正确写法：使用jQuery的.val()方法获取值
const firstnameVal = $('#firstname').val();
if (firstnameVal.length === 0) {
    // 后续校验逻辑
}

如果非要从jQuery对象中获取原生DOM元素，也可以通过索引或.get()方法提取：

// 方式1：通过索引获取第一个匹配的原生DOM元素
const firstnameDom = $('#firstname')[0];
// 此时可以直接用.value
if (firstnameDom.value.length === 0) {
    // 逻辑代码
}

// 方式2：使用.get()方法
const firstnameDom = $('#firstname').get(0);

你代码里$(' #name-insert ').prepend(name_label)能正常工作，是因为.prepend()是jQuery对象提供的方法，符合jQuery调用规范，所以没有问题。

内容的提问来源于stack exchange，提问作者p_sky