文章目录
⭐ 访问元素节点
🌟 认识document对象
🌟 访问元素节点的常用方法
✨ getElementById()
示例代码：
<body>
<div id="box"></div>
<p id="para"></p>
<script>
//访问/获取元素节点
var oBox = document.getElementById('box'); //注意括号里的大小写字母也要匹配
var oPara = document.getElementById('para');
</script>
</body>
✨ 延迟运行
示例代码：
<body>
<!--下方的代码中，script标签放在了最上方-->
<script>
//给window对象添加onload事件监听
window.onload = function () {
//访问/获取元素节点
var oBox = document.getElementById('box');
var oPara = document.getElementById('para');
console.log(oBox);
console.log(oPara);
}
</script>
<div id="box"></div>
<p id="para"></p>
</body>
</html>
很多公司会习惯将script标签放到head里面，这样写也需要加上“延时运行”来保证js代码在页面加载完毕后运行。
✨ getElementsByTagName()
示例代码：
<body>
<div class="box1">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
<div class="box2">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
<script>
var oPs = document.getElementsByTagName('p'); //得到页面中的所有p标签
console.log(oPs);
</script>
</body>
如果想要得到指定盒子内的p标签，可以这样写：
<body>
<div id="box1">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
<div id="box2">
<p>我是段落2</p>
<p>我是段落2</p>
<p>我是段落2</p>
<p>我是段落2</p>
</div>
<script>
//先得到box2
var box2 = document.getElementById('box2');
//再得到box2中的p标签
var ps_inbox2 = box2.getElementsByTagName('p');
console.log(ps_inbox2);
</script>
</body>
✨ getElementsByClassName()
✨ querySelector()
示例代码：
<body>
<div class="box">
<p>我是段落1</p>
<p>我是段落2</p>
<p id="para">我是段落3</p>
<p>我是段落4</p>
</div>
<script>
//得到class=box中，id=para的p标签
var p = document.querySelector('.box #para');
console.log(p);
</script>
</body>
✨ querySelectorAll()
示例代码：
<body>
<div class="box">
<p>我是段落1</p>
<p>我是段落2</p>
<p id="para">我是段落3</p>
<p>我是段落4</p>
</div>
<script>
//得到class=box中的p标签
var ps = document.querySelectorAll('.box p');
console.log(ps);
//得到了数组自然也可以选择其中的某一项了
console.log(ps[2])
</script>
</body>
querySelector() 和 querySelectorAll() 是在实际工作中非常常用的获得节点的方法。