DOM操作一些常用的属性汇总

DOM（文档对象模型）操作是前端开发中非常重要的一环，掌握 DOM 操作能够帮助我们轻松地对 HTML 页面进行修改和交互。

以下是一些常用的 DOM 属性汇总：

获取元素

我们常常需要找到特定的 HTML 元素并进行修改，这时就需要用到 DOM 获取元素的方法。

getElementById

通过元素的 ID 获取特定元素。

const element = document.getElementById('myElement');

getElementsByClassName

通过元素的类名获取所有的元素。

const elements = document.getElementsByClassName('myClass');

getElementsByTagName

通过元素的标签名称获取所有的元素。

const elements = document.getElementsByTagName('div');

querySelector

使用 CSS 选择器来获取元素。

const element = document.querySelector('#myElement');

querySelectorAll

通过CSS 选择器获取一组元素。

const elements = document.querySelectorAll('.myClass');

修改元素

获取元素之后，我们通常需要对其进行修改。

innerHTML

获取或设置包含 HTML 元素的字符串。

const element = document.getElementById('myElement');
element.innerHTML = '<p>Hello World!</p>';

textContent

设置或获取指定节点的文本内容。

const element = document.getElementById('myElement');
element.textContent = 'Hello World!';

style

设置元素的样式。

const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.backgroundColor = 'yellow';

classList

获取或设置元素的类名。

const element = document.getElementById('myElement');
element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('active');

其他属性

parentNode

获取父级节点。

const element = document.getElementById('myElement');
const parent = element.parentNode;

childNodes

获取所有子节点。

const element = document.getElementById('myElement');
const children = element.childNodes;

这是 DOM 操作中常用的一些属性，其他的属性可以在 MDN web docs 中查看。