JavaScript操作节点

最新推荐文章于 2023-09-05 16:55:55 发布

慕北丶

最新推荐文章于 2023-09-05 16:55:55 发布

阅读量166

点赞数

分类专栏： JavaScript 前端

本文链接：https://blog.csdn.net/qq_42539533/article/details/88685087

版权

JavaScript 同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

前端

54 篇文章 0 订阅

订阅专栏

操作dom节点

之前我们能取得的节点对象，但是仅仅是取得而没有做其他操作，那么我们也可以创建一个节点然后动态的插入到dom节点树种

创建一个文本节点

//获取div节点
var div=document.getElementsByTagName("div")[0];
//创建文本节点
var textNode=document.createTextNode("<p>文本节点</p>");
//将新创建的节点追加到div中
div.appendChild(textNode);

在这里插入图片描述
以上创建的是一个文本节点，所有p标签被当成一个普通文本输出，我们还可以创建元素节点追加

创建一个元素节点

//获取div节点
var div=document.getElementsByTagName("div")[0];
//创建元素节点
var elementNode=document.createElement("h1")
//为新建的元素节点增加文本内容
elementNode.textContent="为新建的元素节点增加文本内容";
//将新创建节点追加到div中
div.appendChild(elementNode);

在这里插入图片描述

插入节点的其他方法

插入节点不仅可以使用appendChild，还可以使用insertBefore实现

//获取div节点
var div=document.getElementsByTagName("div")[0];
//创建元素节点
var elementNode1=document.createElement("h1");
var elementNode2=document.createElement("h1");
//为新建的元素节点增加文本内容
elementNode1.textContent="使用insertBefore增加的节点";
elementNode2.textContent="使用appendChild增加的节点";
//将新创建节点追加到div中
div.insertBefore(elementNode1,document.getElementsByTagName("p")[0]);
div.appendChild(elementNode2);

在这里插入图片描述
使用insertBefore插入节点的时候需要两个参数，第一个参数是新的节点，第二个参数的插新节点的时候的参考（将新节点插入到第二个参数代表的节点之前）

使用appendChild则直接将新的节点作为最后一个子节点插入即可

删除节点

div.removeChild(document.getElementsByTagName("h1")[1]);

//获取div节点
var div=document.getElementsByTagName("div")[0];
//创建元素节点
var elementNode1=document.createElement("h1");
var elementNode2=document.createElement("h1");
//为新建的元素节点增加文本内容
elementNode1.textContent="使用insertBefore增加的节点";
elementNode2.textContent="使用appendChild增加的节点";
//将新创建节点追加到div中
div.insertBefore(elementNode1,document.getElementsByTagName("p")[0]);
div.appendChild(elementNode2);
//删除节点
div.removeChild(document.getElementsByTagName("h1")[1]);

在这里插入图片描述
该方法是由父节点调用的，可以删除指定的子节点，但是不能删除孙子节点

操作css样式

可以使用JS操作元素的css样式

<style>
			div{
				margin: 0 auto;
				height: 500px;
				width: 90%;
				background-color: pink;
				color: black;
			}
		</style>
	</head>
	<body>
		<center>
			<button type="button" onclick="changeColor('black')">夜间模式</button>
			<button type="button" onclick="changeColor('green')">护眼模式</button>
			<button type="button" onclick="changeColor('yellow')">黄昏模式</button>
		</center>
		<div>
			<p>第一段落</p>
			<p>第二段落</p>
			<p>第三段落</p>
		</div>
	</body>

JS代码

function changeColor(color){
	var div=document.getElementsByTagName("div")[0];
	div.style.backgroundColor=color;
}

慕北丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript操作节点

操作dom节点之前我们能取得的节点对象，但是仅仅是取得而没有做其他操作，那么我们也可以创建一个节点然后动态的插入到dom节点树种创建一个文本节点//获取div节点var div=document.getElementsByTagName("div")[0];//创建文本节点var textNode=document.createTextNode("<p>文本节点</p...
复制链接

扫一扫