DOM 获取和修改元素 ​

• getElementById(): 根据元素的 ID 获取元素节点。
• getElementsByClassName(): 根据类名获取元素节点集合。
• getElementsByTagName(): 根据标签名获取元素节点集合。
• querySelector(): 根据选择器获取匹配的第一个元素节点。
• querySelectorAll(): 根据选择器获取匹配的所有元素节点。
• innerHTML: 获取或设置元素的 HTML 内容。
• textContent: 获取或设置元素的文本内容。

获取元素 ​

通过 ID 获取元素：使用 getElementById 方法，传入元素的 ID。

const element = document.getElementById('elementId')

通过类名获取元素：使用 getElementsByClassName 方法，传入类名。

const elements = document.getElementsByClassName('className')

通过标签名获取元素：使用 getElementsByTagName 方法，传入标签名。

const elements = document.getElementsByTagName('tagName')

使用选择器获取元素：使用 querySelector 方法，传入 CSS 选择器。

const element = document.querySelector('.className')

修改元素 ​

修改元素的文本内容：使用 textContent 属性或 innerText 属性。

element.textContent = 'New content'

// 或者 element.innerText = 'New content'; 修改元素的 HTML 内容：使用 innerHTML 属性。

element.innerHTML = '<p>New HTML content</p>'

修改元素的属性：使用 setAttribute 方法。

element.setAttribute('attributeName', 'attributeValue')

修改元素的样式：使用 style 属性。

element.style.property = 'value'