JavaScript一些属性的操作

2023-08-16 09:44:40

创建文本节点

//创建文本结点
var div = document.getElementsByTagName("div")[0];
var textNode = document.createTextNode("<p>好好学习天天向上</p>");
div.appendChild(textNode);//在末尾

创建元素结点

//创建元素结点
var div = document.getElementsByTagName("div")[0];
var elementNode = document.createElement("h1");
elementNode.textContent="好好学习天天向上";
div.appendChild(elementNode);
var elementNode1 = document.createElement("h1");
var elementNode2 = document.createElement("h1");
elementNode1.textContent="insertBefore第一个元素结点";
elementNode2.textContent="appendChild第二个元素结点";
div.insertBefore(elementNode1,document.getElementsByTagName("p")[1]);//在索引1的p段落之前加入
div.appendChild(elementNode2);

删除节点

//删除节点是由父节点调用的，删除指定的子节点
var div = document.getElementsByTagName("div")[0];
div.removeChild(document.getElementsByTagName("p")[0]);

改变css样式

//改变css样式
function changeColor(color){
	//alert(color);
	document.getElementsByTagName("div")[0].style.backgroundColor=color;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<!-- 导入函数库文件funlib -->
	<!-- <script src="js/funlib.js"></script> -->
	<!-- 导入index.js -->
	<style type="text/css">
		div{
			margin: 0 auto;
			height: 500px;
			width: 90%;
			text-align: center;
			background-color: grey;color: white;
		}
	</style>
</head>
<body>
	<center>
			<button type="button" onclick="changeColor('black')">护眼模式</button>
			<button type="button" onclick="changeColor('grey')">正常模式</button>
			<button type="button" onclick="changeColor('blue')">其他模式</button>
		</center>
	<div>
	</div>

</body>
</html>
<script src="js/caozuosx.js"></script>

码农公寓

创建文本节点

创建元素结点

删除节点

改变css样式

相关文章