web初探-JavaScript-操作 DOM 节点

最新推荐文章于 2024-07-26 11:41:15 发布

哥兜兜里有泡泡糖

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量114

点赞数

分类专栏：其他文章标签： web javascript 操作DOM节点

本文链接：https://blog.csdn.net/weixin_44512194/article/details/98490204

版权

其他专栏收录该内容

105 篇文章 5 订阅

订阅专栏

JavaScript 处理 DOM 事件

一个最简单的：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript">
function chick()
{
	alert("点我干嘛");
	}
	</script>
</head>
<body>
<input type = "button" value = "点我一下" onclick="chick()"/>
</body>
</html>

效果：当点击按钮时，就会弹出一个提示。

JavaScript 操作 DOM 节点

1，JavaScript 修改 DOM 节点
eg：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript">
function chick()
{
	document.getElementById("txtfont").innerHTML="用户名：";
	document.getElementById("text1").value="banjiemin";
}
</script>
</head>
<body >
<font id = "txtfont">:</font><input type = "text" value="这是一个黑熊精" id = "text1"/><br/>
<input type = "button" value = "点我一下" onclick="chick()"/>
</body>
</html>

2，JavaScript 添加 DOM 节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript">
function chick()
{
	document.getElementById("txtfont").innerHTML="用户名：";
	document.getElementById("text1").value="banjiemin";
}

function insert()
{

	var para = document.createElement("p");    //创建一个元素
	var node = document.createTextNode("这是柠檬精"); //创建一个dom节点
	para.appendChild(node);  //添加
	var parent = document.getElementById("parent");  //找到父节点
	var son1 = document.getElementById("son1");  //找到子节点
	parent.insertBefore(para,son1);   
	}
</script>
</head>
<body>
<div id = "parent">
	<div id = "son1">
		<font id = "txtfont">:</font><input type = "text" value="这是一个黑熊精" id = "text1"/><br/>
	</div>
	<input type = "button" value = "修改DOM节点" onclick="chick()"/>
	<input type = "button" value = "插入DOM节点" onclick="insert()"/>
</div>
</body>
</html>

3，JavaScript 删除 DOM 节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript">
function chick()
{
	document.getElementById("txtfont").innerHTML="用户名：";
	document.getElementById("text1").value="banjiemin";
}

function insert()
{

	var para = document.createElement("p");    //创建一个元素
	var node = document.createTextNode("这是柠檬精"); //创建一个dom节点
	para.appendChild(node);  //添加
	var parent = document.getElementById("parent");
	var son1 = document.getElementById("son1");
	parent.insertBefore(para,son1);
	document
	}
	
function remove()
{
	var parent2 = document.getElementById("parent");
	var son2 = document.getElementById("son1");
	parent2.removeChild(son2);
}
</script>
</head>
<body>
<div id = "parent">
	<div id = "son1">
		<font id = "txtfont">:</font><input type = "text" value="这是一个黑熊精" id = "text1"/><br/>
	</div>
	<input type = "button" value = "修改DOM节点" onclick="chick()"/>
	<input type = "button" value = "插入DOM节点" onclick="insert()"/>
	<input type = "button" value = "删除DOM节点" onclick="remove()"/>
</div>
</body>
</html>

JavaScript 修改 DOM 节点 CSS 样式

eg：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript">

function change()
{
	document.getElementById("123").style.color = "red";
	}
</script>
</head>
<body>
<p id = "123">这是一只黑熊怪</p>
<input type = "button" value = "修改颜色" onclick = "change()"/>
</body>
</html>

哥兜兜里有泡泡糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web初探-JavaScript-操作 DOM 节点

JavaScript 处理 DOM 事件一个最简单的：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript">function ...
复制链接

扫一扫

专栏目录