js dom操作api集合

选择 DOM 节点

方法	参数	描述	示例代码
document.getElementById(id)	id (字符串)	返回带有指定 ID 的元素	const element = document.getElementById('myElement');
document.getElementsByClassName(className)	className (字符串)	返回带有指定类名的元素集合	const elements = document.getElementsByClassName('myClass');
document.getElementsByTagName(tagName)	tagName (字符串)	返回带有指定标签名的元素集合	const elements = document.getElementsByTagName('div');
document.querySelector(selectors)	selectors (字符串)	返回匹配指定 CSS 选择器的第一个元素	const element = document.querySelector('.myClass');
document.querySelectorAll(selectors)	selectors (字符串)	返回匹配指定 CSS 选择器的所有元素	const elements = document.querySelectorAll('.myClass');

操作 DOM 内容

方法	参数	描述	示例代码
element.innerHTML	html (字符串)	获取或设置元素的 HTML 内容	element.innerHTML = '<p>New content</p>';
element.textContent	text (字符串)	获取或设置元素的文本内容	element.textContent = 'New text content';

操作 DOM 属性

方法	参数	描述	示例代码
element.setAttribute(name, value)	name (字符串), value (字符串)	设置元素的属性	element.setAttribute('class', 'newClass');
element.getAttribute(name)	name (字符串)	获取元素的属性值	const className = element.getAttribute('class');
element.removeAttribute(name)	name (字符串)	移除元素的属性	element.removeAttribute('class');

操作 DOM 结构

方法	参数	描述	示例代码
document.createElement(tagName)	tagName (字符串)	创建一个新的元素	const newElement = document.createElement('div');
element.appendChild(child)	child (Node)	向元素的子节点列表的末尾添加新的子节点	element.appendChild(newElement);
element.insertBefore(newNode, referenceNode)	newNode (Node), referenceNode (Node)	在某个子节点前面插入新的子节点	parent.insertBefore(newChild, existingChild);
element.removeChild(child)	child (Node)	从子节点列表中移除一个子节点	parent.removeChild(existingChild);
element.replaceChild(newNode, oldNode)	newNode (Node), oldNode (Node)	用一个新的子节点替换一个旧的子节点	parent.replaceChild(newChild, existingChild);

操作 DOM 样式

方法	参数	描述	示例代码
element.style.propertyName	propertyName (字符串), value (字符串)	获取或设置元素的样式属性	element.style.color = 'red';
element.classList.add(className)	className (字符串)	向元素添加一个或多个类	element.classList.add('newClass');
element.classList.remove(className)	className (字符串)	从元素中移除一个或多个类	element.classList.remove('oldClass');
element.classList.toggle(className, force)	className (字符串), force (布尔值, 可选)	切换元素中的类。如果类存在，则移除它；如果类不存在，则添加它。	element.classList.toggle('active');

操作 DOM 事件

方法	参数	描述	示例代码
element.addEventListener(type, listener, options)	type (字符串), listener (函数), options (对象， 可选)	向元素添加事件监听器	element.addEventListener('click', function() { alert('Element clicked!'); });
element.removeEventListener(type, listener, options)	type (字符串), listener (函数), options (对象， 可选)	移除元素的事件监听器	element.removeEventListener('click', handleClick);

示例代码

以下是一个综合使用多种 DOM 操作 API 的示例：

HTML:

<div id="container">
  <p class="text">This is a paragraph.</p>
  <p class="text">This is another paragraph.</p>
</div>

JavaScript:

// 选择元素
const container = document.getElementById('container');
const paragraphs = document.querySelectorAll('.text');

// 创建新元素
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';

// 添加新元素
container.appendChild(newParagraph);

// 修改样式
newParagraph.style.color = 'blue';

// 添加类
newParagraph.classList.add('newClass');

// 添加事件监听器
newParagraph.addEventListener('click', function() {
  alert('New paragraph clicked!');
});

// 插入新元素
const anotherParagraph = document.createElement('p');
anotherParagraph.textContent = 'This is another new paragraph.';
container.insertBefore(anotherParagraph, newParagraph);

// 替换元素
const replacementParagraph = document.createElement('p');
replacementParagraph.textContent = 'This paragraph replaced the new paragraph.';
container.replaceChild(replacementParagraph, newParagraph);

// 移除元素
container.removeChild(anotherParagraph);

通过这些 API，你可以全面地操作和控制 DOM，动态地更新网页内容和结构。