js操作dom元素

当使用JavaScript操作DOM时，可以通过各种方法来实现对元素的获取、修改、创建、删除等操作。以下是一些详细的代码示例：

1. 获取元素

javascript复制代码

	// 通过ID获取元素
	var elementById = document.getElementById('myElementId');
	// 通过类名获取元素集合
	var elementsByClass = document.getElementsByClassName('myClassName');
	// 通过标签名获取元素集合
	var elementsByTagName = document.getElementsByTagName('div');
	// 通过CSS选择器获取元素
	var elementBySelector = document.querySelector('.myClassName');
	// 通过CSS选择器获取元素集合
	var elementsBySelector = document.querySelectorAll('.myClassName');

2. 修改元素内容

javascript复制代码

	// 获取元素并修改其HTML内容
	var element = document.getElementById('myElement');
	element.innerHTML = '<p>新的HTML内容</p>';
	// 获取元素并修改其文本内容
	element.innerText = '新的文本内容';
	// 获取元素并修改其文本内容（与innerText类似）
	element.textContent = '新的文本内容';

3. 修改元素属性

javascript复制代码

	// 获取元素并设置其属性
	var link = document.getElementById('myLink');
	link.setAttribute('href', 'https://example.com');
	link.setAttribute('target', '_blank');
	// 获取元素并获取其属性值
	var hrefValue = link.getAttribute('href');
	console.log(hrefValue); // 输出: https://example.com
	// 删除元素的属性
	link.removeAttribute('target');

4. 修改元素样式

javascript复制代码

	// 获取元素并直接修改其行内样式
	var myDiv = document.getElementById('myDiv');
	myDiv.style.color = 'red';
	myDiv.style.backgroundColor = 'lightgrey';
	// 使用classList添加类名
	myDiv.classList.add('highlight');
	// 使用classList删除类名
	myDiv.classList.remove('highlight');
	// 检查元素是否包含某个类名
	if (myDiv.classList.contains('highlight')) {
	console.log('myDiv包含highlight类');
	}

5. 创建和添加元素

javascript复制代码

	// 创建一个新的元素
	var newElement = document.createElement('p');
	// 设置新元素的文本内容
	var textNode = document.createTextNode('这是一个新的段落。');
	newElement.appendChild(textNode);
	// 将新元素添加到现有元素的子节点列表末尾
	var container = document.getElementById('container');
	container.appendChild(newElement);
	// 在参考节点之前插入新节点
	var referenceNode = container.firstChild;
	container.insertBefore(newElement, referenceNode);

6. 删除元素

javascript复制代码

	// 获取要删除的元素
	var elementToRemove = document.getElementById('elementToRemove');
	// 获取元素的父节点并删除该元素
	var parentElement = elementToRemove.parentNode;
	parentElement.removeChild(elementToRemove);

这些代码示例只是JavaScript操作DOM的基础部分。在实际应用中，可能会涉及到更复杂的DOM结构和操作，但基本的原理和方法是类似的。记住，DOM操作可能会引起页面重绘和重排，因此应尽量避免频繁的DOM操作，以提高页面性能。