如何在JavaScript中从HTML获取数据输出？及如何从指定代码中获取'123'值的问题

嘿，我来帮你搞定这两个问题！

在JS里从HTML捞数据核心就是DOM操作，这里给你几种常用的路子：

• 通过元素ID精准获取：用document.getElementById('id名')直接定位元素，然后可以用textContent/innerText拿文本内容，或者getAttribute('属性名')提取自定义属性值
  示例代码：

  <div id="user-name">张三</div>
  

  const userEl = document.getElementById('user-name');
  console.log(userEl.textContent); // 控制台输出"张三"
  

• 通过类名/复杂选择器获取：如果元素没有ID，用document.querySelector('.类名')（返回第一个匹配的元素）或者document.querySelectorAll('.类名')（返回所有匹配元素的集合），支持CSS里的各种选择器写法，非常灵活
  示例：

  <p class="user-info">年龄：25</p>
  

  const infoEl = document.querySelector('.user-info');
  console.log(infoEl.innerText); // 输出"年龄：25"
  

• 表单数据获取：针对输入框、下拉框这类表单元素，直接用.value就能拿到用户输入或预设的值
  示例：

  <input type="text" id="login-username" value="testuser123">
  

  const usernameInput = document.getElementById('login-username');
  console.log(usernameInput.value); // 输出"testuser123"
  

输出方式除了用console.log()打在浏览器控制台，还可以把数据插到页面里，比如通过修改元素的innerHTML：

document.body.innerHTML += `<p>获取到的用户名：${userEl.textContent}</p>`;

看你的代码，问题一目了然——选择器写错了！

你的HTML里目标元素的类是name，但JS里用的是document.querySelector('.element')，这个选择器会找页面上第一个类叫element的元素，根本不是你要的那个带my-data="123"的div。如果页面上刚好有另一个类为element的元素内容是邮箱，那自然就输出邮箱内容了。

给你修正后的代码：

<div id="home"> <div class="name" my-data="123">Email: test@gmail.com</div> </div>

// 用正确的类名选择器定位目标元素
var element = document.querySelector('.name');
// 也可以结合父元素ID写更精准的选择器，避免冲突
// var element = document.querySelector('#home .name');
var dataAttribute = element.getAttribute('my-data');
console.log(dataAttribute); // 现在会正确输出"123"

另外提个小建议：自定义属性最好用HTML5标准的data-*格式，比如把my-data改成data-my-data，这样更规范，还能通过dataset属性更便捷地获取值（注意驼峰命名）：

<div class="name" data-my-data="123">Email: test@gmail.com</div>

var element = document.querySelector('.name');
var dataAttribute = element.dataset.myData;
console.log(dataAttribute); // 同样输出"123"

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