如何用JavaScript/JQuery获取指定ID的DIV、INPUT元素值及div1的firstName值

嘿，这两个JavaScript/jQuery的小需求我帮你拆解清楚，直接上代码和解释，一看就懂！

需求1：获取指定DIV和INPUT元素的值 #

不管用原生JS还是jQuery都很简单，看你习惯哪种：

原生JavaScript写法 #

// 拿到ID为FullName的DIV的文本内容
const fullNameText = document.getElementById('FullName').textContent;
// 拿到ID为FirstName的输入框的值
const firstNameInputVal = document.getElementById('FirstName').value;

// 可以打印出来验证结果
console.log('FullName DIV的内容:', fullNameText);
console.log('FirstName输入框的值:', firstNameInputVal);

小提示：如果DIV里有HTML标签，innerText只会提取纯文本，textContent会包含所有文本（包括隐藏元素的内容），按需选择就行~

jQuery写法 #

// 获取DIV的文本
const fullNameText = $('#FullName').text();
// 获取输入框的值
const firstNameInputVal = $('#FirstName').val();

// 验证输出
console.log('FullName DIV的内容:', fullNameText);
console.log('FirstName输入框的值:', firstNameInputVal);

需求2：获取div1的firstName值并输出"Srinath" #

这里我列出几种常见场景，你对应自己的HTML结构选就行：

场景1：div1带有data-firstName属性 #

比如你的HTML是这样的：<div id="div1" data-firstName="Srinath"></div>

原生JS实现

const firstNameVal = document.getElementById('div1').dataset.firstName;
console.log(firstNameVal); // 控制台输出Srinath

jQuery实现

const firstNameVal = $('#div1').data('firstName');
console.log(firstNameVal); // 控制台输出Srinath

场景2：div1内部有个存放firstName的子元素 #

比如HTML结构：<div id="div1"><span class="firstName">Srinath</span></div>

原生JS实现

const firstNameVal = document.querySelector('#div1 .firstName').textContent;
console.log(firstNameVal); // 输出Srinath

jQuery实现

const firstNameVal = $('#div1 .firstName').text();
console.log(firstNameVal); // 输出Srinath

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