js DOM 中基础功能练习

最新推荐文章于 2023-05-28 00:26:55 发布

原创最新推荐文章于 2023-05-28 00:26:55 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

JS DOM操作专栏收录该内容

1 篇文章

订阅专栏

本文介绍了使用JavaScript进行网页动态内容生成的实践案例，包括列表的动态填充与换肤功能等，展示了如何通过简单的编程技巧增强用户体验。

11111

<title></title>
<style type="text/css">
   .red_li{
    height: 100px;
    background: red;
   }
   .blue_li{
    height: 100px;
    background: blue;
   }
</style>
<script type="text/javascript">
   onload = function(){
    #创建ul元素,注意是数组,取[0]
    var my_lis = document.getElementsByTagName("ul")[0];
    #定义循环次数,9行
       var loop_times = 9;
       #for 循环遍历元素
    for (var i = 0;i<loop_times;i++){
     #创建li元素,并出入文本innerText
     var my_li = document.createElement("li");
     my_li.innerText = i+1;
     #做出判断,偶数行奇数行的不同颜色
     if(i%2 == 0){
      #调用style里的定义颜色的方法.
      my_li.className="red_li";
     }
     else{
      my_li.className="blue_li";
     }
     #把创建的li 赋值到ul中
     my_lis.appendChild(my_li);
    }
   }
</script>


</head>
<body>
<ul>

</ul>

</body>
</html>

二：动态表格练习，实现用户输入id/name/tel/并保存到table中，操作可删除


	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript">
	function save_msg(){
	// 拿到我们的用户输入信息
	var id_input = document.getElementById("user_id").value;
	var name_input = document.getElementById("user_name").value;
	var user_phone = document.getElementById("user_phone").value;
	var id_td = document.createElement("td");
	id_td.innerText = id_input;
	//创建对应td
	var name_td = document.createElement("td");
	name_td.innerText = name_input;

	var tel_td = document.createElement("td");
	tel_td.innerText = user_phone;

	//需要给删除的那个td添加样式和相应方法
	var operate_td = document.createElement("td");
	operate_td.innerText = "删除";
	operate_td.style.color = "blue";
	operate_td.onclick = function(){
	var select_td = this;
	// 通过使用parentNode 拿到我们的一行然后调用remove删除
	select_td.parentNode.remove();
	}
	//创建tr 行标签将所有的td追加到tr内
	var my_tr = document.createElement('tr');
	my_tr.appendChild(id_td);
	my_tr.appendChild(name_td);
	my_tr.appendChild(tel_td);
	my_tr.appendChild(operate_td);

	//获取table，添加tr
	var my_table = document.getElementsByTagName('table')[0];
	my_table.appendChild(my_tr);
	}
	</script>
	</head>
	<body>
	ID:<input type="text" id="user_id" />
	姓名: <input type="text" id="user_name" />
	电话: <input type="text" id="user_phone" />
	<button onclick="save_msg()">保存</button>
	<table border="1px">
	<tr>
	<td>Id</td>
	<td>Name</td>
	<td>Tel</td>
	<td>操作</td>
	</tr>
	</table>
	</body>
	</html>

三：给页面换肤，#id互换

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	#container{
	width: 100%;
	height: 600px;
	border: 1px solid red;
	background-image: url(img/bg1.gif);
	}
	#container_new{
	width: 100%;
	height: 600px;
	border: 1px solid red;
	background-image: url(img/bg2.jpg);
	}
	#btn_container{
	height: 200px;
	width: 300px;
	background: darkseagreen;
	margin: 0 auto;
	}
	</style>
	<script type="text/javascript">
	function changeOne(){
	var my_container = document.getElementById("container_new");
	if (my_container == null) {
	console.log("当前就是1背景");
	} else {
	my_container.id = "container";
	}

	}
	function changeTwo(){
	var my_container = document.getElementById("container");
	if (my_container == null) {
	console.log("当前就是2背景");
	} else {
	my_container.id = "container_new";
	}
	}
	</script>
	</head>
	<body>
	<div id="container">
	<div id="btn_container">
	<button onclick="changeOne()">皮肤1</button>
	<button onclick="changeTwo()">皮肤2</button>
	</div>
	</div>
	</body>
	</html>