JS获取节点

JavaScript 李康
文章标签: Js 获取节点

JS获取节点的方法(注意内容与js先后的加载顺序):

通过ID获取节点:

 document.getElementById()  返回指定id的第一个对象的引用

通过ClassName获取:

document.getElementsByClassName()返回指定class名称的对象的集合,要拿出对应的某个才能继续使用,用 [标号] 的形式

通过name获取节点:

document.getElementsByName()  返回指定名称的对象的集合,要拿出对应的某个才能继续使用,用 [标号] 的形式

通过标签名获取节点:

document.getElementsByTagName() 返回有指定标签名的对象的集合,拿出对应的某个才能继续使用,用 [标号] 的形式

通过选择器获取节点:

document.querySelector() 通过选择器的名称获取节点,只能获取选择器中第一个

document.querySelectorAll() 通过选择器名称获取节点,返回一个集合,一个一个拿出来即用下标 [1]点出来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a{
				color: red;
			}
		</style>
	</head>
	
	<body>
	<div id="main" ></div>	
	<div id="foot" >5555555555</div>
	<div id="head" >222222</div>	
	
	<p class="boss1">0</p>
	<p class="boss1">1</p>
	<p class="boss1">2</p>
	
	<div class="box">00</div>
	<div class="box">11</div>
	<div class="box">22</div>
	
	<div name="pool">00</div>
	<div name="pool">
		<a>00</a>
		<a>111</a>
		<a>222</a>
	</div>
	<div name="pool">2222</div>
	
	<input type="button" value="按钮" />
	<script type="text/javascript">
		//注意内容与js先后的加载顺序
			//通过ID获取节点,唯一
			document.getElementById("main").innerHTML='心想事成';	
			
			//返回的是一个集合一般从0开始, 通过ClassName名称获取,一个一个拿出来即用下标 [1]点出来
			document.getElementsByClassName("box")[1].innerHTML="我是老二"; 
			document.getElementsByClassName("box")[2].innerHTML="我是老三";
			
			//通过name获取节点,返回的是一个集合
			document.getElementsByName("pool")[2].innerHTML="我心如铁,坚不可摧"
			
			//通过标签名获取节点:
			document.getElementsByTagName("a")[1].innerHTML="屌丝逆袭记"
			
			//选择器的名称获取节点:
			document.querySelector(".boss1").innerHTML="大老板";		//通过选择器的名称获取节点,只能获取选择器中第一个
			document.querySelectorAll(".boss1")[2].innerHTML="二老板";	//通过选择器名称获取节点,返回一个集合,一个一个拿出来即用下标 [1]点出来
			
			//innerHTML与innerText区别是:
			document.getElementById("foot").innerHTML="<input type='button' value='变身大帅' />"    //能识别标签
			document.getElementById("head").innerText="<input type='button' value='变身二帅' />"		//不能识别标签
	</script>
	</body>
</html>

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :