JavaScript中的对象-CSDN博客

本文链接：https://blog.csdn.net/m0_73690361/article/details/127079232

自定义对象
开发人员根据自己的需要而定义的新对象。
JavaScript内置对象
JavaScript将一些常用功能预先定义成对象，用户可以直接使用，这就是内置对象。
如字符串对象、数学对象、日期对象、数组对象、正则表达式对象等
浏览器内置对象
浏览器对象是浏览器根据系统当前的配置和所装载的页面为JavaScript提供的一系列可供使用的对象。
如Window对象、Document对象、History对象等

<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button" name="btn" id="btn" value="点击" />
		<input type="radio" name="sex" id="sex1" value="男" />男
		<input type="radio" name="sex" id="sex2" value="女" />女
		<div id="div1">
			这是div1
		</div>
		<div id="div2">
			这是div2
		</div>
		<div id="div3">
			这是div3
		</div>
		<div id="div4">
			这是div4
		</div>
		<div id="div5">
			这是div5
		</div>
		<div id="div6">
			这是div6
		</div>
		<ul>
			<li>列表项1</li>
			<li>列表项1</li>
			<li>列表项1</li>
			<li>列表项1</li>
			
		</ul>
	<span class="sp">
		这是一个span标签
	</span>
	<p class="sp"></p>
	<input type="text" name="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(divs[i])
			}
			//getElementsByName():通过标签的name属性的值来获取标签，得到的是一组元素
		
			var radios=document.getElementsByName("sex")
			for(var i=0;i<radios.length;i++){
				console.log(radios[i])
			}
			//要获取到运用了class且值为sp的所有标签
			var result=document.getElementsByClassName("sp")
			console.log(result)
			var ul=document.querySelector("#div1")
			console.log(ul)
		</script>
		
		
	</body>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			ul{
				width:300px;
				list-style: none;
			}
			ul li{
				border: 1px solid pink;
				padding: 10px 20px;
				margin-bottom: 5px;
			}
		</style>
		
		<input type="text" name="txt" id="txt" value="" />
		
		<input type="button"  value="添加节点" onclick="add()"/>&nbsp;
		<input type="button"  value="删除节点" onclick="update()"/>&nbsp;
		<input type="button"  value="修改节点" onclick="xg()"/>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			
		</ul>
		<script type="text/javascript">
			function add(){
				//获取文本框的值
				var key=document.getElementById("txt").value
				//创建一个新的li标签 createElement()
				var li=document.createElement("li")
				//将文本框中输入的内容放到li标签内
				li.innerHTML=key
			
				//将新创建的li标签添加到ul中 appendChild() :给某个标签添加子元素
				document.querySelector("ul").appendChild(li)
			}
			function update(){
				var ul_1=document.querySelector("ul")
				//先获取到要删除的子元素
				var li=ul_1.firstElementChild//firstElementChild：某元素中的第一个子元素
				var li=ul_1.lastElementChild//lastElementChild:某元素中的最后一个子元素
				var li=document.querySelectorAll("li")[1]
				ul_1.removeChild(li)//删除的是子元素
				ul_1.remove()//remove():清空某元素中的所有子元素 包括该元素本身
			}
			function \xg(){
				var ul_1=document.querySelector("ul")
				var li=ul_1.lastElementChild
				li.innerHTML="更新后的"
			}
		</script>
	</body>
</html>


<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			#tab{
				border:1px solid red;
				border-collapse: collapse;
			}
			th,td{
				border: 1px solid red;
				text-align: center;
			}
		</style>
		<table id="tab" width="200" border="" cellspacing="" cellpadding="">
			<thead>
				<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		<script type="text/javascript">
			var date=[{
				stuid:1001,
				name:"易烊千玺",
				sex:"男"
			},{
				stuid:1002,
				name:"王俊凯",
				sex:"男"
			},{
				stuid:1003,
				name:"王源",
				sex:"男"
			}]
			window.onload=function(){
				for(var i=0;i<date.length;i++){
					//console.log(data[i].stuid)
					var stuid=date[i].stuid
				    var name=date[i].name
				    var sex=date[i].sex
					//创建td
					// var td_1=document.createElement("td")
					// 	var td_2=document.createElement("td")
					// 		var td_3=document.createElement("td")
							//将学号、姓名性别添加到td中
							// td_1.innerHTML=stuid
							// td_2.innerHTML=name
							// td_3.innerHTML=sex
					// 		//创建一个tr标签
							var tr=document.createElement("tr")
							tr.innerHTML="<td>"+stuid+"</td><td>"+name+"</td><td>"+sex+"</td>"
							//将td标签加到tr中
							// tr.appendChild(td_1)
							// tr.appendChild(td_2)
							// tr.appendChild(td_3)
							document.querySelector("tbody").appendChild(tr)
				}
			}	
			
		</script>
	</body>
</html>