document.getElementById(idValue);

<div id="header">這是頭部</div>
<p id="content">這是內(nèi)容</p>
<button id="submitBtn">提交</button>

// 獲取 id 為 "content" 的元素
const contentElement = document.getElementById("content");
console.log(contentElement); // 輸出 <p id="content">這是內(nèi)容</p>

// 操作獲取到的元素（例如修改內(nèi)容）
contentElement.textContent = "修改后的內(nèi)容";

// 嘗試獲取不存在的 id，返回 null
const nonExistent = document.getElementById("none");
console.log(nonExistent); // 輸出 null

// 等效但不推薦的寫法
document.querySelector("#submitBtn"); // 通過 CSS 選擇器 #id 查找

document.getElementsByClassName(className);
// 或在某個(gè)父元素內(nèi)查找
parentElement.getElementsByClassName(className);

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box active">盒子3（激活）</div>
<p class="text">文本</p>

// 1. 獲取整個(gè)文檔中所有 class 為 "box" 的元素
const boxes = document.getElementsByClassName("box");
console.log(boxes.length); // 輸出：3（3個(gè)含 "box" 類的元素）

// 2. 遍歷集合（需用索引訪問，類似數(shù)組）
for (let i = 0; i < boxes.length; i++) {
  console.log(boxes[i].textContent); // 依次輸出：盒子1、盒子2、盒子3（激活）
}

// 3. 在特定父元素內(nèi)查找（假設(shè)頁(yè)面有個(gè) id 為 "container" 的容器）
const container = document.getElementById("container");
const activeItems = container.getElementsByClassName("active");
// 只查找 container 內(nèi)部 class 為 "active" 的元素

// 4. 多類名匹配（同時(shí)包含 "box" 和 "active" 的元素）
const activeBoxes = document.getElementsByClassName("box active");
console.log(activeBoxes.length); // 輸出：1（僅盒子3匹配）

// 從整個(gè)文檔中查找
document.getElementsByTagName(tagName);

// 從指定父元素內(nèi)查找（縮小范圍）
parentElement.getElementsByTagName(tagName);

<div>盒子1</div>
<p>段落1</p>
<div>盒子2</div>
<p>段落2</p>
<ul>
  <li>列表項(xiàng)1</li>
  <li>列表項(xiàng)2</li>
</ul>

// 1. 獲取整個(gè)文檔中所有 <div> 標(biāo)簽的元素
const divs = document.getElementsByTagName("div");
console.log(divs.length); // 輸出：2（2個(gè) div 元素）

// 2. 遍歷集合（通過索引訪問）
for (let i = 0; i < divs.length; i++) {
  console.log(divs[i].textContent); // 依次輸出：盒子1、盒子2
}

// 3. 在指定父元素內(nèi)查找（例如只找 <ul> 中的 <li>）
const ul = document.getElementsByTagName("ul")[0]; // 先獲取 ul 元素
const lis = ul.getElementsByTagName("li");
console.log(lis.length); // 輸出：2（ul 內(nèi)的 2 個(gè) li 元素）

// 4. 不區(qū)分大小寫（查找 <P> 等效于 <p>）
const paragraphs = document.getElementsByTagName("P");
console.log(paragraphs.length); // 輸出：2（2個(gè) p 元素）

const allElements = document.getElementsByTagName("*");

// 從整個(gè)文檔中查找第一個(gè)匹配的元素
document.querySelector(selector);

// 從指定父元素內(nèi)查找第一個(gè)匹配的元素
parentElement.querySelector(selector);

<div class="box">盒子1</div>
<div class="box highlight">盒子2（高亮）</div>
<p id="intro">介紹文本</p>
<ul>
  <li class="item">項(xiàng)目1</li>
  <li class="item">項(xiàng)目2</li>
</ul>

// 1. 通過 ID 選擇器（#id）獲取元素（等效于 getElementById）
const intro = document.querySelector("#intro");
console.log(intro.textContent); // 輸出：介紹文本

// 2. 通過類選擇器（.class）獲取第一個(gè)匹配元素
const firstBox = document.querySelector(".box");
console.log(firstBox.textContent); // 輸出：盒子1

// 3. 通過標(biāo)簽選擇器獲取元素
const firstLi = document.querySelector("li");
console.log(firstLi.textContent); // 輸出：項(xiàng)目1

// 4. 復(fù)雜選擇器（后代選擇器 + 類選擇器）
// 查找 ul 中 class 為 item 的第一個(gè)元素
const ulItem = document.querySelector("ul .item");
console.log(ulItem.textContent); // 輸出：項(xiàng)目1

// 5. 在指定父元素內(nèi)查找（如只在 .highlight 元素內(nèi)查找）
const highlightBox = document.querySelector(".highlight");
const nested = highlightBox.querySelector("span"); // 假設(shè) .highlight 內(nèi)有 span

// 查找 name 屬性為 "email" 的 input 元素
const emailInput = document.querySelector('input[name="email"]');

const allLis = document.querySelectorAll("li"); // 返回所有 li 的集合