JavaScript中DOM操作

最新推荐文章于 2025-04-18 11:01:35 发布

原创最新推荐文章于 2025-04-18 11:01:35 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文深入讲解了使用JavaScript操作DOM的基本方法，包括选择元素、修改属性、添加和删除节点等核心技巧，适合初学者和需要复习DOM操作的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>js-DOM操作</title>
	</head>
	<body>

		<p>第一个p标签</p>
		<p>第二个<span>span标签</span></p>
		<p>第三个p标签</p>
		<a id="bdLink" href="https://www.baidu.com" target="_blank" title="百度一下">百度一下</a>
		<div class="content">

		</div>

	</body>
	<script>
		// 找到第一个p标签
		var p = document.querySelector('p')

		console.log(p)
		// 列表
		var p = document.querySelectorAll('p')[2]
		console.log(p)

		var results = document.getElementsByTagName('p')
		// console.log(results)
		// for循环遍历数组,取出每一个p标签
		for (var i = 0; i < results.length; i++) {
			//根据索引取出每一个p标签
			var p = results[i]
			console.log(p.innerHTML)
		}
		// 通过id找标签
		var link = document.getElementById('bdLink')
		console.log(link)
		// attributes获取标签所有的属性值
		console.log(link.attributes)
		// 获取标签的某个属性值
		console.log(link.target)
		// getAttribute()获取标签属性值
		console.log(link.getAttribute('href'))

		// 设置标签的属性值
		link.id = 'aa'
		//setAttribute('class','red blue green')
		link.setAttribute('class', 'red blue green')
		// className获取class属性值是一个字符串
		console.log(link.className)
		console.log(link.classList)
		// 这种给class赋值的方式,会覆盖原来的class值
		// link.className = '123'
		// 如果只想添加新class值
		link.classList.add('123')
		link.classList.remove('blue')

		var div = document.getElementsByClassName('content')[0]
		// 通过js代码,向div中添加标签
		// innerHTML 直接通过innerHTML添加
		div.innerHTML = '<h1>我是h1</h1>'
		// 通过js创建一个标签
		// TextNode 创建文本节点
		var h1 = document.createTextNode('<h1>我是第二个h1标签</h1>')


		// createElement()创建标签节点
		var h1 = document.createElement('h1')
		// 设置属性值
		h1.innerText = '我是h1标签'
		h1.title = '我是h1标签'
		// 设置样式
		h1.style.color = 'red'
		h1.style.textAlign = 'center'
		// appendChild()追加子标签
		div.appendChild(h1)

		// 通过js创建标签
		var div2 = document.createElement('div')
		div2.style.width = '600px'
		div2.style.height = '500px'
		div2.id = 'd2'
		div2.style.backgroundColor = 'red'
		// insertBefore 在某标签之前添加标签
		document.body.insertBefore(div2, div)

		// 替换标签
		// 		 var h2 = document.createElement('h2')
		// 		 h2.innerText = '我是新的h2标签'
		// replceChild 替换子标签
		// div.replaceChild(h2,h1)
		// removeChild删除子节点
		// div.removeChild(h2)

		// document  根节点
		document.body.style.backgroundColor = 'lightgray'
		// documentElement html根标签
		console.log(document.documentElement)

		// 隐藏红色的div块
		var d2 = document.getElementById('d2')
		// display不展示 不去占位置
		// d2.style.display = 'none'
		// visibility  hidden占位置,不显示
		// d2.style.visibility = 'hidden'
		// opacity透明度
		// d2.style.opacity = '0'
	</script>
</html>