在HTML中，如涉及到对某个元素的修改，我们需要获取元素，通常有两种方法：
-
1.利用DOM提供的方法获取元素
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
document.querySelector()
小结：逻辑性不强、繁琐。父子级关系只能逐级获取。 -
2.利用节点层级关系获取元素
利用父(parentNode)子(childNodes) 节点关系获取元素；
var sun_box = document.querySelector('.sun-box');
console.log(sun_box.parentNode);
var ul = document.querySelector('ul');
console.log(ul.childNodes);
小结：逻辑性强，但是兼容性稍差。
【 例1 : DOM获取元素 】
1.1 getElementById
<body>
<div id="time"> 2022-2-9</div>
<script>
var timer = document.getElementById('time')
console.log(timer);
</script>
</body>
1.2 getElementsByTagName
<body>
<ul>
<li>知否知否应是绿肥红瘦</li>
<li>知否知否应是绿肥红瘦</li>
<li>知否知否应是绿肥红瘦</li>
<li>知否知否应是绿肥红瘦</li>
<li>知否知否应是绿肥红瘦</li>
</ul>
<script>
// 返回的是获取过来元素对象的集合，以伪数组的形式存储的
var lis = document.getElementsByTagName('li')
console.log(lis);
</script>
</body>
1.3 getElementsByClassName
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<script>
// 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box')
console.log(boxs);
</script>
</body>
1.4 getElementById
<body>
<div>123</div>
<script>
// 获取事件源
var div = document.querySelector('div');
</script>
</body>
【 例2 : 节点层级关系获取元素 】
1.1 parentNode 父节点
<body>
<!-- 栗子1：parentNode -->
<div class="father-box">
<span class="sun-box">
<div class="grandson-box"></div>
</span>
</div>
<script>
var grandson_box = document.querySelector('.grandson-box');
// 得到的是离元素最近的父级节点，如果找不到父节点，就返回为空
console.log(grandson_box.parentNode);
var sun_box = document.querySelector('.sun-box');
console.log(sun_box.parentNode);
var father_box = document.querySelector('.father-box');
</script>
</body>
1.2 childNodes 子节点
<body>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<script>
var ul = document.querySelector('ul');
// var lis = ul.querySelectorAll('li');
console.log(ul.childNodes);
</script>
</body>
1.3 nextSibling 下一个兄弟节点、previousSibling 上一个兄弟节点
<body>
<div>我是div</div>
<div>我是span</div>
<script>
var div = document.querySelector('div');
console.log(div.nextSibling);
console.log(div.previousSibling);
</script>
</body>
网友评论