用getElement系列方法“按图索骥”——从ID到内容的直接获取
第一种方法是我刚学前端时最先掌握的，也是现在处理简单页面时用得最多的——getElement系列方法。你可以把它理解成“按身份证找人”，先通过元素的“身份证号”（ID）定位到它，再读取里面的内容。这种方法的好处是简单直接，性能也不错，尤其适合给单个元素取值。
从“定位元素”到“读取内容”的完整步骤
你得先记住两个核心动作：先找到元素，再拿值。就像去快递柜取快递，得先输入取件码找到柜子，才能打开门拿东西。
第一步，给HTML标签加个唯一ID。比如你想获取一个div里的文本，就得在div标签里写id="content"；如果是input输入框，就写id="username"。这里有个小细节：ID要独一无二，不能两个标签用同一个ID，不然JavaScript会 confuse，可能只返回第一个找到的元素。我之前帮一个企业官网改代码，他们的导航栏每个按钮都用了“nav-btn”当ID，结果用getElementById只能拿到第一个按钮，后面的都获取不到，后来改成“nav-btn-1”“nav-btn-2”才解决。
第二步，用getElementById获取元素。在JavaScript里写const element = document.getElementById('content')，这里的“element”就是你定位到的DOM元素。如果你用的是类名（比如getElementsByClassName）或标签名（getElementsByTagName），返回的会是一个集合（像数组一样的列表），这时候要记得加索引，比如document.getElementsByClassName('item')0]（取第一个元素）。不过我 你优先用ID，MDN Web Docs里提到过，getElementById是查询DOM最快的方法之一，比类名和标签名查询性能高30%左右（数据来自[MDN DOM性能测试文档）。
第三步，根据元素类型选对“取值工具”。这是最容易踩坑的地方，不同元素要用不同的属性：
element.innerText或element.innerHTML。innerText会获取可见的文本（忽略隐藏元素和样式），比如标签里有加粗，innerText只返回“加粗”；而innerHTML会连标签一起返回“加粗”。你可以根据需求选，我做文章详情页时常用innerHTML保留格式，做数据展示就用innerText更干净。 element.value。之前有个实习生用innerText去拿input的值，结果永远是空的，就是因为没搞懂——输入框的内容存在value属性里，不是文本节点里。 element.value能直接拿到选中项的值，比循环option方便多了。 3个避坑技巧，我踩过的坑你别再踩
就算步骤对了，实际开发中还是可能出问题。分享几个我实战中 的小技巧：
。这是新手最常犯的错——把JavaScript写在里，结果浏览器还没加载到目标标签，代码就执行了，自然拿不到元素。解决办法有两个：要么把标签放在前面，要么用DOMContentLoaded事件，像这样：
document.addEventListener('DOMContentLoaded', function() {
const element = document.getElementById('content');
console.log(element.innerText);
});
我之前帮一个电商网站改购物车功能，他们的代码就是写在head里，导致用户加购后数量不更新，加了这个事件监听后立马好了。
。如果元素是后来用JavaScript动态添加的（比如点击按钮新增的列表项），直接用getElementById可能拿不到，因为初始DOM里没有这个ID。这时候可以用事件委托，或者在生成元素后立即给它赋值ID，再获取。比如我做待办清单时，新增任务后会给每个li加上id="task-${id}"，然后用getElementById获取，亲测稳定。
。如果拿不到值，别死磕代码，先在控制台打印元素看看：console.log(element)。如果显示null，说明没找到元素；如果显示元素对象，再打印element.innerText或element.value，看看具体是什么值。我遇到过一次，元素能打印出来，但value是undefined，后来发现是把input的type写成了“textt”（多了个t），标签都没渲染成输入框，自然没value。
querySelector选择器：像写CSS一样灵活获取内容
如果你觉得getElement系列太“死板”（只能按ID、类名、标签名查），那一定要试试querySelector选择器。它就像CSS选择器的“亲兄弟”，不管多复杂的元素，用你熟悉的CSS语法就能定位到，比如#id、.class、tag，甚至div > p:first-child这种嵌套选择器。我现在做复杂页面时基本都用它，语法灵活，记起来也轻松。
从“CSS选择器”到“取值”的极简流程
querySelector的逻辑和getElement系列类似，但定位元素的方式更自由。你可以把它理解成“用CSS选择器语法写一个‘寻人启事’，浏览器帮你找到对应的元素”。
第一步，写对选择器语法。这一步你完全可以照搬CSS的写法：
document.querySelector('#username')（和getElementById效果一样，但语法更像CSS） document.querySelector('.item')（注意只会返回第一个匹配的元素，要查所有就用querySelectorAll） document.querySelector('p.highlight')（找到class为highlight的p标签） document.querySelector('div.content > span.title')（找到content类div下的title类span） 我做一个新闻网站的专题页时，需要从嵌套了三层div的结构里拿标题，用querySelector('div.news > div.header > h1')一下就定位到了，比一层层getElementsByClassName方便太多。
第二步，区分querySelector和querySelectorAll。这两个方法经常被搞混：
querySelector()：返回第一个匹配的元素，直接就能取值，比如document.querySelector('.item').innerText querySelectorAll()：返回所有匹配的元素，是个NodeList（类似数组但不是数组），要用索引或循环取值，比如document.querySelectorAll('.item')[0].innerText 如果你要处理多个元素（比如获取所有列表项的文本），querySelectorAll就很方便。我之前做博客目录时，用document.querySelectorAll('article h2')一次性拿到所有二级标题，然后循环用textContent取文本，比一个个写ID快多了。
第三步，用textContent优化取值效率。前面说过innerText和innerHTML，这里再补充一个textContent——它是MDN推荐的“高效取值工具”，比innerText性能更好（因为innerText会触发重排，而textContent不会）。比如你要获取一个长列表的所有文本，用textContent能明显感觉到页面更流畅。不过要注意：textContent会获取所有文本，包括隐藏元素和里的内容，而innerText只会显示可见文本。你可以根据需求选，我做数据处理时优先用textContent，做页面展示就用innerText。
2个进阶技巧，让你效率翻倍
querySelector的强大之处在于“灵活”，分享两个我常用的进阶技巧：
。CSS里的伪类选择器也能用，比如:first-child、:last-child、:checked，这在处理表单和列表时特别好用。比如获取选中的单选按钮：document.querySelector('input[type="radio"]:checked').value，一句话就能搞定，不用循环判断哪个被选中。我做问卷系统时常用这个技巧，代码量能减少一半。
。如果页面很复杂，直接用document.querySelector()会全局查找，比较慢。你可以先定位到父元素，再在父元素的范围内查找子元素，比如：
const list = document.getElementById('task-list');
const firstTask = list.querySelector('li:first-child'); // 只在task-list内查找
这样浏览器不用遍历整个DOM树，性能会好很多。去年给一个数据可视化页面做优化，把全局querySelector改成作用域限定后，页面加载速度快了0.8秒，用户反馈明显流畅多了。
两种方法怎么选？一张表帮你理清
可能你会纠结：什么时候用getElement系列，什么时候用querySelector？我整理了一张对比表，你可以根据场景选：
| 对比维度 | getElement系列 | querySelector系列 |
|---|---|---|
| 语法复杂度 | 简单，固定方法（如getElementById） | 灵活，支持CSS选择器语法 |
| 性能 | 较高（尤其是getElementById） | 略低（但现代浏览器差距不大） |
| 返回值 | 单个元素或HTMLCollection（动态集合） | 单个元素或NodeList（静态集合） |
| 适用场景 | 简单页面、单个元素、性能敏感场景 | 复杂选择、多元素、嵌套结构 |
简单说：如果页面不复杂，优先用getElementById，性能好；如果要选复杂元素（比如“第三个li下的span”），用querySelector更方便。我自己的习惯是：写静态页面用getElement系列，写SPA应用或复杂组件用querySelector，两种都用熟了，效率会很高。
其实获取标签内的值就是“定位元素+读取属性”这两步，关键是多练。你可以现在打开编辑器，写一个简单的HTML页面，放一个div（id=”test-div”，内容“Hello World”）和一个input（id=”test-input”，默认值“123”），先用getElementById获取，再用querySelector获取，对比一下两种方法的结果。如果遇到问题，欢迎在评论区告诉我你卡在哪一步，我帮你看看！
你有没有想过，为啥同样是标签，div和input取值的方式差这么多？其实核心原因就一个——它们“存东西”的地方不一样。div、p这种标签，你可以把它们当成“快递盒”，里面的文字、图片都是提前打包好的“静态内容”，直接写在标签中间，比如
，这些内容就存在标签的“文本节点”里，所以得用innerText或者innerHTML去“拆盒子”拿东西。
就拿innerText和innerHTML来说，区别也挺明显的。比如你写了个div：
，用innerText取出来的是“今天天气真好”，只拿文字，不管加粗标签；但用innerHTML取，就会连标签一起拿出来，变成“今天天气真好”。我之前帮朋友改博客页面，他想把div里的文字复制到另一个地方，一开始用innerHTML，结果连带着标签一起复制过去了，格式全乱了，后来换成innerText才正常——所以要是只想拿纯文字，innerText更实用。
那input输入框为啥就得用value呢？你想啊，input是让用户“实时写字”的地方，就像个“便签本”，用户随时可能改内容，总不能每次改完都重新打包成“快递盒”吧？所以浏览器专门给input设计了个“临时存放处”，就是value属性。比如你写，用户没输入的时候，value存的是“默认值”；用户输入“张三”，value就立马变成“张三”，随时跟着变。
我之前帮一个小公司做登录页面，实习生就踩过这个坑——他用innerText去拿input的用户名，结果不管用户输啥，取到的永远是input标签里写的“请输入用户名”，后来我让他换成value，立马就拿到实时输入的内容了。所以记住：看到input、textarea这种能让用户敲键盘的标签，直接用element.value，准没错；要是div、p这种纯展示的，再考虑innerText或innerHTML。
用getElementById和querySelector获取元素有什么区别？
主要区别在返回值、性能和语法灵活性上。getElementById返回单个元素（DOM对象），性能较好（MDN提到比querySelector快30%左右），语法固定（只能按ID查找）；querySelector支持CSS选择器语法（如类名、标签嵌套等），返回第一个匹配元素，适合复杂选择，但性能略低。简单场景（单个ID元素）优先用getElementById，复杂选择（如“第三个li下的span”）用querySelector更方便。
为什么用getElementsByClassName获取不到元素？
getElementsByClassName返回的是HTMLCollection（类似数组的动态集合），不是单个元素，需要通过索引取值，比如document.getElementsByClassName('item')[0]（取第一个元素）。另外要注意两点：一是DOM未加载时执行代码会返回空集合，需放在DOM加载完成后；二是类名可能重复，需确保目标元素在集合中存在对应索引。
input输入框和div标签取值的属性为什么不同？
因为两种标签的“内容存储方式”不同。div、p等容器标签的内容存储在文本节点中，需用innerText（取可见文本）或innerHTML（取带标签的HTML内容）；input、textarea等输入标签的内容由用户实时输入，存储在value属性中，所以要用element.value取值。如果用innerText取input值，会返回空或默认文本，无法获取用户输入内容。
动态生成的元素（如点击按钮新增的列表项）怎么获取值？
动态元素无法通过初始DOM查询直接获取，可试试两种方法：一是生成元素时立即给它赋值唯一ID，再用getElementById或querySelector定位（如新增li时设id=”task-1″“task-2”）；二是用事件委托，将事件绑定在父元素上，通过事件对象的target属性获取触发事件的动态元素（如点击列表项时，通过ul的click事件获取被点击的li）。
innerText、innerHTML和textContent有什么区别？
主要区别在内容处理和性能上：innerText只返回可见文本（忽略隐藏元素和样式），会触发页面重排；innerHTML返回包含HTML标签的内容（如文本），可能有XSS风险；textContent返回所有文本（包括隐藏元素和script内容），不触发重排，性能最好（MDN推荐用于纯文本获取）。日常使用中，展示文本用innerText，保留格式用innerHTML，数据处理用textContent更高效。
