9月28日

最新推荐文章于 2024-10-06 20:16:20 发布

葫芦岛老八

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量53

点赞数

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/m0_73646543/article/details/127083988

版权

浏览器的分层与结构

选择器的应用

利用类选择器，写表格 id选择器完善表格格式颜色大小

表格的添加，修改，删除节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul(
			width: 300px;
			list-style: none;
			)
			ul li{
				border: 1px solid red;
				padding: 10px 20px;
				margin-bottom: 5px;
			}
		</style>
	</head>
	<body>
		<input type="text" id="txt" value="" />
		<input type="button" value="添加节点" onclick="add()"/>&nbsp;
		<input type="button" value="删除节点" onclick="del()"/>&nbsp;
		<input type="button" value="修改节点" onclick="update()"/>
		
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		
		<script type="text/javascript">
			function add(){
				var key=document.getElementById("txt").value
				
				var li=document.createElement("li")
				
				li.innerHTML=key
				
				document.querySelector("ul").appendChild(li)
			}
			function del(){
				var ul_1=document.querySelector("ul")
				var li=document.querySelectorAll("li")[1]
				ul_1.removeChild(li)
			}
			
			function update(){
				var ul_1=document.querySelector("ul")
				var li=ul_1.lastElementChild
				li.innerHTML="更新后的"
			}
		</script>
	</body>
</html>

各表格标签的作用与用法和展示出来的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
			<li>列表4</li>
			<li>列表5</li>
		</ul>
		
		<div class="div1">
			div1标签
		</div>
		<div class="div2">
			div2标签
		</div>
		<div class="div3">
			div3标签
		</div>
		
		<span id="sp">
		  这是一个spen标签
		</span>
		<p class="sp"></p>
			<input type="text" name="uname" id="uname" value="" />
			
			<script type="text/javascript">
				//通过id获取元素
			var div_1=document.getElementById("div1")
			var div_2=document.getElementById("div2")
			//通过元素名称来获取标签，得到的是一组标签
			var divs=document.getElementsByTagName("div")
			
			for(var i=0;i<divs.length;i++){
				console.log(div[i])
			}
			var radios=document.getElementsByName("sex")
			
			for(var i=0;i<radios.length;i++){
				console.log(radios[i])
			}
			
			var result=document.getElementsByClassName("sp")
			console.log(result)
			
			var ul=document.querySelector("#div1")
			console.log(ul)
			</script>
		</span>
	</body>
</html>

效果图