JavaScript一些属性的操作
作者：互联网
创建文本节点
//创建文本结点
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>
标签：结点,color,getElementsByTagName,JavaScript,var,操作,div,document,属性 来源： https://blog.csdn.net/weixin_42223701/article/details/121031847