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>