标签：结点 color getElementsByTagName JavaScript var 操作 div document 属性
创建文本节点
//创建文本结点
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。