DOM 访问学习笔记

DOM（Document Object Model）是一种用于处理 HTML 或 XML 文档的编程接口。通过使用 DOM，你可以对文档进行访问、操作和更新。

获取元素

通过 ID 获取元素

jsCopy Code
const element = document.getElementById('elementId');

通过标签名获取元素

jsCopy Code
const elements = document.getElementsByTagName('tagName');

通过类名获取元素

jsCopy Code
const elements = document.getElementsByClassName('className');

通过选择器获取元素

jsCopy Code
const element = document.querySelector('selector');
const elements = document.querySelectorAll('selector');

操作元素

修改元素属性

jsCopy Code
element.setAttribute('attributeName', 'attributeValue');
element.removeAttribute('attributeName');

修改元素文本

jsCopy Code
element.textContent = 'newTextContent';

修改元素样式

jsCopy Code
element.style.propertyName = 'propertyValue';

添加、移除、切换 CSS 类

jsCopy Code
element.classList.add('className');
element.classList.remove('className');
element.classList.toggle('className');

实例

获取文本框中的值

htmlCopy Code
<input type="text" id="myInput">
<button onclick="getValue()">获取值</button>

<script>
function getValue() {
  const input = document.getElementById('myInput');
  const value = input.value;
  alert(value);
}
</script>

动态添加列表项

htmlCopy Code
<ul id="myList">
  <li>第一项</li>
  <li>第二项</li>
</ul>
<button onclick="addItem()">添加项</button>

<script>
function addItem() {
  const list = document.getElementById('myList');
  const newItem = document.createElement('li');
  newItem.textContent = '新项';
  list.appendChild(newItem);
}
</script>

以上是一些常用的 DOM 访问和操作方法，希望能对你的学习有所帮助。