JS中的对象-CSDN博客

本文链接：https://blog.csdn.net/L0164_/article/details/127069150

<body>
		<input type="button" name="btn" id="btn" value="点击" />
		<div id="div1">
			这是div1
		</div>
		<div id="div2">
			这是div2
		</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 div1=document.getElementById("div1")
			var div2=document.getElementById("div2")
			// 通过元素名称来获取标签 得到的是一组标签
			var divs=document.getElementsByTagName("div")
			// console.log(divs)
			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)
			// querySelector() 通过选择器获取标签 得到的是单个标签
			var ul=document.querySelector("#div1")
			console.log(ul) 
			// querySelectorAll()通过选择器获取标签 获取到的是满足条件的所有标签
			var li=document.querySelectorAll("ul li")
			console.log(li)
		</script>
	</body>

通过id获取元素

通过元素名称来获取标签

getElementsByName() 通过标签的name属性的值来获取标签

querySelector() 通过选择器获取标签得到的是单个标签

querySelectorAll()通过选择器获取标签获取到的是满足条件的所有标签