1 <button name="btn" class="btn" id="btn">点我</button>
2 <script>
3 window.onload = function (ev) {
4 var btn1 = document.getElementById('btn');
5 var btn2 = document.getElementsByClassName('btn')[0];
6 var btn3 = document.getElementsByTagName('button')[0];
7 var btn4 = document.getElementsByName('btn')[0];
8
9 var btn5 = document.querySelector('#btn');//只查找一个，即使后面还有也不会查找 button 类名 Id名
10 var btn6 = document.querySelectorAll('#btn')[0];
11
12 console.log(btn1);
13 console.log(btn2);
14 console.log(btn3);
15 console.log(btn4);
16 console.log(btn5);
17 console.log(btn6);
18 }
19 </script>
1 // 获取父节点
2 window.onload = function (ev) {
3 var a = document.getElementsByTagName('a')[0];
4 console.log(a.parentNode.parentNode);
5 }
1 // 获取兄弟节点
2 var span = document.getElementById('span');
3 // 下一个
4 var nextEle = span.nextElementSibling || span.nextSibling;
5 console.log(nextEle);
6
7 // 上一个
8 var preEle = span.previousElementSibling || span.previousSibling;
9 console.log(preEle);
1 var box = document.getElementById('box');
2 // 获取第一个子节点
3 console.log(box.firstElementChild || box.firstChild);
4 // 获取最后一个子节点
5 console.log(box.lastElementChild || box.lastChild);
6 // 获取所有的节点
7 console.log(box.childNodes); //兼容所有
8 console.log(box.children); //有兼容问题
window.onload = function (ev) {
// 1. 获取标签
var box = document.getElementById('box');
// 2. 获取标签内部的所有节点
var allNodeLists = box.childNodes;
// 3. 过滤元素节点
var newListArr = [];
allNodeLists.forEach(function (value, key, parent) {
// console.log(value.nodeType);
if(value.nodeType === 1){ //判断文本类型，分类1 2 3
newListArr.push(value);
}
});
console.log(newListArr);
}
