Web前端入门第 70 问：JavaScript DOM 节点查找常用方法
<p>虽然目前的开发场景基本都是使用 React/Vue/Angular 等框架，但是对于一些基础的 DOM 操作，还是需要了解学习。</p><p>曾经我们讨论过这样一个问题：Vue 这些开发框架，用它们渲染页面，真的就比不用开发框架快吗？</p>
<p>其实这个问题很好回答的，开发框架只是优化了项目的开发效率，对于浏览器的渲染速度，其实并没有想象中的那么快。</p>
<p>目前的前后端分离的开发模式，大致分为两种：一是浏览器端运行 Vue 等单页应用框架，由前端发起接口请求渲染页面从而实现前后端分离；二是在服务端运行 node.js ，由 node.js 发起接口请求渲染页面，从而实现前后端分离。这两种开发模式都绕不开的一个问题是：都要请求一次接口，http 通信都是很耗时的，相比于古老的后端渲染来说，其实已经算很慢了。</p>
<p>那么就有一个问题：为何 node.js 不直接写 SQL 查询数据库？嘿。。这个问题嘛就涉及到方方面面了，比如全栈开发和前端开发的价格那可不一样，会 JS 的前端和会 SQL 的前端又不一样了，前端踩过线去干后端的事这就矛盾来了...</p>
<p>废话太多了，咱们进入正题~~</p>
<h2 id="dom-查询">DOM 查询</h2>
<p>DOM 查询就是要找到 HTML 中的某个节点，方便对这个节点干一些不可描述的事~~</p>
<p>比如说给这个 HTML 元素加点小料，给 HTML 元素换个皮肤，让 HTML 元素动起来啥的。要干这些事的前提是要找对 HTML 元素，找错了就乱套了~~</p>
<pre><code class="language-js">/*
通过 ID 选择
查找页面上 id="header" 的第一个元素
比如：
<div id="header"></div>
<section id="header"></section>
<header id="header"></header>
只要是 ID为 header 的元素，都能选择，但是只会找第一个
*/
const header = document.getElementById("header");
/*
通过类名选择（返回动态集合）
查找页面上 class="btn" 的所有元素
比如：
<button class="btn"></button>
<a class="btn"></a>
<div class="btn"></div>
*/
const buttons = document.getElementsByClassName("btn");
/*
通过标签名选择
与 getElementsByClassName 类似，只是选择页面上所有的 img 元素
*/
const images = document.getElementsByTagName("img");
/*
通过 CSS 选择器（静态集合）
此方法可以使用 CSS 选择器来获取页面上的元素
比如可以使用 .item:nth-child(3) 选择页面上 class="item" 的第三个元素
*/
const firstButton = document.querySelector(".btn:first-child");
const allButtons = document.querySelectorAll(".btn");
</code></pre>
<h3 id="动态集合-vs-静态集合">动态集合 vs 静态集合</h3>
<p>顾名思义，动态集合就是会根据 HTML 内容变化而变化，而静态集合就是不管 HTML 怎么变，都是选择器方法执行的那一瞬间就确定了他的样子。</p>
<pre><code class="language-html"><ul class="list">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
</ul>
<script>
const item1 = document.querySelectorAll('.item')
const item2 = document.getElementsByClassName('item')
// 创建一个新的 li 元素
const li = document.createElement('li')
li.classList.add('item')
// list 元素中新增一个 li 元素
document.querySelector('.list').appendChild(li)
console.log('🚀 ~ item2:', item1); // NodeList(5)
console.log('🚀 ~ item:', item2); // HTMLCollection(6)
</script>
</code></pre>
<h3 id="节点关系">节点关系</h3>
<p>除了直接查找节点的方法外，还能通过获取到的节点关系属性，取到相对于的节点，比如：</p>
<p><code>parentNode</code> 用于选择父节点。<br>
<code>childNodes</code> 用于选择所有子节点，包括所有的子内容（比如：注释、空格、文本内容等）。<br>
<code>children</code> 仅选择元素节点内容。</p>
<p><code>firstChild</code> 选择第一个子内容，可以是注释、文本内容、换行符等。<br>
<code>lastChild</code> 选择最后一个子内容，可以是注释、文本内容、换行符等。<br>
<code>firstElementChild</code> 选择第一个元素节点。<br>
<code>lastElementChild</code> 选择最后一个元素节点。</p>
<p><code>nextSibling</code> 选择当前节点后一个内容，可以是注释、文本内容、换行符等。<br>
<code>previousSibling</code> 选择当前节点前一个内容，可以是注释、文本内容、换行符等。<br>
<code>nextElementSibling</code> 选择当前节点后一个元素节点。<br>
<code>previousElementSibling</code> 选择当前节点前一个元素节点。</p>
<pre><code class="language-html"><ul class="list">1122
<!-- 注释 -->
<li class="item">1</li>
<li class="item">2</li>
321<li class="item">3</li>123
<li class="item">4</li>
<li class="item">5</li>
</ul>
<script>
const parentNode = document.querySelector('.item:nth-child(3)').parentNode
console.log('🚀 ~ parentNode:', parentNode); // 获得 ul.list
const childNodes = document.querySelector('.list').childNodes
console.log('🚀 ~ childNodes:', childNodes); // 获得所有的子内容
const children = document.querySelector('.list').children
console.log('🚀 ~ children:', children); // 获取所有的 .item 元素
const firstChild = document.querySelector('.list').firstChild
console.log('🚀 ~ firstChild:', firstChild); // 获得文本 11122
const lastChild = document.querySelector('.list').lastChild
console.log('🚀 ~ lastChild:', lastChild); // 获得最后的换行符 \n
const firstElementChild = document.querySelector('.list').firstElementChild
console.log('🚀 ~ firstElementChild:', firstElementChild); // 获得第一个 li.item
const lastElementChild = document.querySelector('.list').lastElementChild
console.log('🚀 ~ lastElementChild:', lastElementChild); // 获最后一个 li.item
const nextSibling = document.querySelector('.item:nth-child(3)').nextSibling
console.log('🚀 ~ nextSibling:', nextSibling); // 获得文本 123
const previousSibling = document.querySelector('.item:nth-child(3)').previousSibling
console.log('🚀 ~ previousSibling:', previousSibling); // 获得文本 321
const nextElementSibling = document.querySelector('.item:nth-child(3)').nextElementSibling
console.log('🚀 ~ nextElementSibling:', nextElementSibling); // 获得第四个 li.item
const previousElementSibling = document.querySelector('.item:nth-child(3)').previousElementSibling
console.log('🚀 ~ previousElementSibling:', previousElementSibling); // 获得第二个 li.item
</script>
</code></pre>
<h2 id="写在最后">写在最后</h2>
<p>常用的 DOM 查找方法基本就这些，还有些不太常用的方法本文就不一一列举，有兴趣可以查看 MDN 文档 https://developer.mozilla.org/zh-CN/docs/Web/API/Element。</p>
</div>
<div id="MySignature" role="contentinfo">
<p> </p>
<p style="font-size: 18px;font-weight: bold;">文章首发于微信公众号【<span style="color:rgb(255, 71, 87)">前端路引</span>】，欢迎 <span style="color:#4ec259">微信扫一扫</span> 查看更多文章。</p>
<p>
<img style="max-width: 320px;" src="https://images.cnblogs.com/cnblogs_com/linx/2447020/o_250228035031_%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.png"/>
</p>
<p>本文来自博客园，作者：前端路引，转载请注明原文链接：https://www.cnblogs.com/linx/p/18947426</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/linx/p/18947426
頁:
[1]