JavaScript（三）——JavaScript操作DOM结点

最新推荐文章于 2020-08-23 19:41:27 发布

程序员的时光

最新推荐文章于 2020-08-23 19:41:27 发布

阅读量316

点赞数

分类专栏： ● Web前端基础篇

本文链接：https://blog.csdn.net/qq_37084904/article/details/88864237

版权

● Web前端基础篇专栏收录该内容

33 篇文章 3 订阅

订阅专栏

1 JavaScript处理DOM事件

2.JavaScript操作做DOM结点

3.JavaScript修改DOM结点CSS样式；

1 JavaScript处理DOM事件

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

运行结果：

2.JavaScript操作做DOM结点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript操作DOM节点</title>
<script type="text/javascript">
	function modifyDOM(){
		document.getElementById("txt").innerHTML="用户名：";
		document.getElementById("userName").value="Jack";
	}
	
	function addDOM(){
		var para=document.createElement("p");
		var node=document.createTextNode("...前...");
		var para2=document.createElement("p");
		var node2=document.createTextNode("...后...");
		para.appendChild(node);
		para2.appendChild(node2);
		var parent=document.getElementById("parent");
		var son1=document.getElementById("son1");
		parent.insertBefore(para, son1);
		parent.appendChild(para2);
	}
	
	function removeDOM(){
		var parent=document.getElementById("parent");
		var son1=document.getElementById("son1");
		parent.removeChild(son1);
	}
</script>
</head>
<body>
<div id="parent">
	<div id="son1">
		<font id="txt">:</font><input type="text" id="userName" name="userName"/>
	</div>
</div>
<input type="button" value="修改DOM节点" onclick="modifyDOM()"/>
<input type="button" value="添加DOM节点" onclick="addDOM()"/>
<input type="button" value="删除DOM节点" onclick="removeDOM()"/>
</body>
</html>

运行结果：

3.JavaScript修改DOM结点CSS样式；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript修改DOM节点CSS样式</title>
<script type="text/javascript">
	function modifyDOMCSS(){
		document.getElementById("gril").style.color="red";
	}
</script>
</head>
<body>
<p id="gril">女程序猿</p>
<input type="button" value="修改DOM节点样式" onclick="modifyDOMCSS()"/>
</body>
</html>

运行结果：

程序员的时光

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（三）——JavaScript操作DOM结点

目录1 JavaScript处理DOM事件2.JavaScript操作做DOM结点3.JavaScript修改DOM结点CSS样式；1 JavaScript处理DOM事件<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title h...
复制链接

扫一扫

专栏目录