Javascript 基础 DOM 基础

最新推荐文章于 2025-12-25 09:07:35 发布

原创最新推荐文章于 2025-12-25 09:07:35 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #dom

前端之Javascript 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript进行DOM操作，包括获取元素、设置样式、修改HTML内容和属性等基本操作。通过实例展示了getElementById和getElementsByTagName的用法，并介绍了innerHTML、className属性及getAttribute、setAttribute和removeAttribute方法。

DOM

1. 获取元素

- document.getElementById()

- document.getElementsByTagName()

2. 给元素设置样式

- element.style.styleName = styleValue (设置element元素的CSS样式)

说明：a. element为要设置样式的DOM对象

b. styleName为要设置的样式名称（当styleName中有符号-时，使用驼峰形式：font-size,转换为fontSize）

c. styleValue为设置的样式值

<!DOCTYPE html>
<html>
<head>
	<title>JSTest</title>
	<meta charset="utf-8">
</head>
<body>
	<div class="box" id="box">元素一</div>
	<ul id="list1">
		<li>first</li>
		<li>second</li>
		<li>third</li>
	</ul>
	<ol>
		<li>原生</li>
		<li>框架</li>
	</ol>
	<script type="text/javascript">
		var box = document.getElementById("box");
		box.style.color = "red";
		box.style.fontWeight = "bold";

		// 返回数组 lis2
		var lis2 = document.getElementById("list1").getElementsByTagName("li")
		for(var i = 0, len = lis2.length; i<len; i++){
			lis2[i].style.color = "#00f";
			if(i == 0){
				lis2[i].style.backgroundColor="#ccc"
			}
			else if(i==1){
				lis2[i].style.backgroundColor="#666"
			}
			else{
				lis2[i].style.backgroundColor="#555"
			}
		}

	</script>
</body>
</html>

3. innerHTML属性和 className属性

- element.innerHTML(赋值／获取)

获取、设置element元素在开始标签与结束标签之间的html文本内容

	<script type="text/javascript">
		var box = document.getElementById("box");
		box.style.color = "red";
		box.style.fontWeight = "bold";

		// 返回数组 lis2
		var lis2 = document.getElementById("list1").getElementsByTagName("li")
		for(var i = 0,len = lis2.length; i < len; i++){
			document.write(lis2[i].innerHTML + "<br />");
		}
		lis2[0].innerHTML += "第一个"


	</script>

- element.className(赋值／获取)

	<script type="text/javascript">
		var box = document.getElementById("box");
		box.style.color = "red";
		box.style.fontWeight = "bold";

		// 返回数组 lis2
		var lis2 = document.getElementById("list1").getElementsByTagName("li")
		for(var i = 0,len = lis2.length; i < len; i++){
			document.write(lis2[i].innerHTML + "<br />");
		}
		lis2[0].innerHTML += "第一个"
		lis2[2].className = "current"

	</script>

4. DOM属性设置与获取

ele.getAttribute("attribute")

说明：获取 ele 元素的 attribute 属性

<body>
	<p class="text" id="text" align="center" datatype="title">文本</p>

	<script type="text/javascript">
		var p = document.getElementById("text");
		document.write(p.align + "<br />")
		document.write(p.className + "<br />")
		document.write(p.datatype)
		document.write(p.getAttribute("datatype"))
	</script>
</body>

ele.setAttribute("attribute",value)

说明：在 ele 元素上设置属性

ele.removeAttribute("attribute")

说明：删除 ele 元素的一个属性

<body>
	<p class="text" id="text" align="center" datatype="title">文本</p>

	<script type="text/javascript">
		var p = document.getElementById("text");
		document.write(p.align + "<br />")
		document.write(p.className + "<br />")
		document.write(p.getAttribute("datatype"))

		// 设置一个属性
		p.setAttribute("isRead","false")

		// 删除一个属性
		p.removeAttribute("align")
	</script>
</body>