JS 中常见的七种获取元素的方法

1. 通过ID获取元素：使用 document.getElementById() 方法通过元素的 ID 属性获取元素。

<div id="myElement">Hello, World!</div>

const elementById = document.getElementById('myElement');
elementById.style.color = 'red';

2. 通过类名获取元素：使用 document.getElementsByClassName() 方法通过元素的类名获取元素集合。

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

const elementsByClassName = document.getElementsByClassName('item');
elementsByClassName[0].style.fontWeight = 'bold';

3. 通过标签名获取元素：使用 document.getElementsByTagName() 方法通过元素的标签名获取元素集合。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

const listItems = document.getElementsByTagName('li');
for (let item of listItems) {
  item.style.color = 'green';
}

4. 通过选择器获取元素：使用 document.querySelector() 方法通过 CSS 选择器获取匹配的第一个元素，使用 document.querySelectorAll() 方法获取所有匹配的元素。

<div class="container">
  <p class="text">通过选择器获取元素</p>
  <p class="text">通过选择器获取元素</p>
  <p class="text">通过选择器获取元素</p>
</div>

const elementBySelector = document.querySelector('.container .text');
elementBySelector.style.fontSize = '16px';

5. 通过属性获取元素：使用 document.getElementsByName() 方法通过元素的 name 属性获取元素集合，或者使用 document.querySelector(‘[attributeName=“value”]’) 通过属性选择器获取元素。

<div attributeName="value">one</div>
<div attributeName="value">two</div>
<div attributeName="something" name="three">three</div>

const attributeElements = document.querySelectorAll('[attributeName="value"]');
for (let attributof attributeElements ) {
  attribut.style.fontWeight = 'bold';
}

6. 通过父元素获取子元素：通过父元素的方法（如 parentElement.querySelector()、parentElement.children）获取子元素。

<div id="parentElement">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>

const parentElement = document.getElementById('parentElement');
const childElement = parentElement.querySelector('.child');
childElement.style.color = 'blue';

7. 通过特定选择器获取元素：使用特定的选择器方法（如 document.title、document.body、document.forms、document.images、document.links）获取特定类型的元素。

<form id="myForm">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
</form>

const formElements = document.getElementById('myForm').elements;
const usernameInput = formElements['username'];
usernameInput.style.border = '1px solid #ccc';