Web前端入门第 70 问：JavaScript DOM 节点查找常用方法
虽然目前的开发场景基本都是使用 React/Vue/Angular 等框架，但是对于一些基础的 DOM 操作，还是需要了解学习。曾经我们讨论过这样一个问题：Vue 这些开发框架，用它们渲染页面，真的就比不用开发框架快吗？
其实这个问题很好回答的，开发框架只是优化了项目的开发效率，对于浏览器的渲染速度，其实并没有想象中的那么快。
目前的前后端分离的开发模式，大致分为两种：一是浏览器端运行 Vue 等单页应用框架，由前端发起接口请求渲染页面从而实现前后端分离；二是在服务端运行 node.js ，由 node.js 发起接口请求渲染页面，从而实现前后端分离。这两种开发模式都绕不开的一个问题是：都要请求一次接口，http 通信都是很耗时的，相比于古老的后端渲染来说，其实已经算很慢了。
那么就有一个问题：为何 node.js 不直接写 SQL 查询数据库？嘿。。这个问题嘛就涉及到方方面面了，比如全栈开发和前端开发的价格那可不一样，会 JS 的前端和会 SQL 的前端又不一样了，前端踩过线去干后端的事这就矛盾来了...
废话太多了，咱们进入正题~~
DOM 查询
DOM 查询就是要找到 HTML 中的某个节点，方便对这个节点干一些不可描述的事~~
比如说给这个 HTML 元素加点小料，给 HTML 元素换个皮肤，让 HTML 元素动起来啥的。要干这些事的前提是要找对 HTML 元素，找错了就乱套了~~
/*
通过 ID 选择
查找页面上 id="header" 的第一个元素
比如：
<section id="header"></section>
<header id="header"></header>
只要是 ID为 header 的元素，都能选择，但是只会找第一个
*/
const header = document.getElementById("header");
/*
通过类名选择（返回动态集合）
查找页面上的所有元素
比如：
<button ></button>
*/
const buttons = document.getElementsByClassName("btn");
/*
通过标签名选择
与 getElementsByClassName 类似，只是选择页面上所有的 img 元素
*/
const images = document.getElementsByTagName("img");
/*
通过 CSS 选择器（静态集合）
此方法可以使用 CSS 选择器来获取页面上的元素
比如可以使用 .item:nth-child(3) 选择页面上的第三个元素
*/
const firstButton = document.querySelector(".btn:first-child");
const allButtons = document.querySelectorAll(".btn");动态集合 vs 静态集合
顾名思义，动态集合就是会根据 HTML 内容变化而变化，而静态集合就是不管 HTML 怎么变，都是选择器方法执行的那一瞬间就确定了他的样子。
<ul >
<li >1</li>
<li >2</li>
<li >3</li>
<li >4</li>
<li >5</li>
</ul>节点关系
除了直接查找节点的方法外，还能通过获取到的节点关系属性，取到相对于的节点，比如：
parentNode 用于选择父节点。
childNodes 用于选择所有子节点，包括所有的子内容（比如：注释、空格、文本内容等）。
children 仅选择元素节点内容。
firstChild 选择第一个子内容，可以是注释、文本内容、换行符等。
lastChild 选择最后一个子内容，可以是注释、文本内容、换行符等。
firstElementChild 选择第一个元素节点。
lastElementChild 选择最后一个元素节点。
nextSibling 选择当前节点后一个内容，可以是注释、文本内容、换行符等。
previousSibling 选择当前节点前一个内容，可以是注释、文本内容、换行符等。
nextElementSibling 选择当前节点后一个元素节点。
previousElementSibling 选择当前节点前一个元素节点。
<ul >1122
<li >1</li>
<li >2</li>
321<li >3</li>123
<li >4</li>
<li >5</li>
</ul>写在最后
常用的 DOM 查找方法基本就这些，还有些不太常用的方法本文就不一一列举，有兴趣可以查看 MDN 文档 https://developer.mozilla.org/zh-CN/docs/Web/API/Element。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 感谢，下载保存了 感谢分享，学习下。 分享、互助 让互联网精神温暖你我 前排留名，哈哈哈 谢谢楼主提供！ 这个有用。 yyds。多谢分享 喜欢鼓捣这些软件，现在用得少，谢谢分享！ 懂技术并乐意极积无私分享的人越来越少。珍惜 过来提前占个楼 感谢发布原创作品，程序园因你更精彩 东西不错很实用谢谢分享 这个有用。 不错，里面软件多更新就更好了 鼓励转贴优秀软件安全工具和文档！ 谢谢分享，试用一下 分享、互助 让互联网精神温暖你我 鼓励转贴优秀软件安全工具和文档！ 过来提前占个楼
页:
[1]
2