H5之前的技术:
document.getElementById (查找速度最快)通过标签id获取
document.getElementsByClassName 通过标签class属性获取
document.getElementsByName 通过标签的name属性获取
document.getElementsByTagName 通过标签名获取
H5出的新方法:
document.querySelector
document.querySelectorAll
直接使用标签的id作为节点对象引用(不建议!)
var div1 = document.getElementById("box1"); // 如果没有就返回null
var arr = document.getElementsByClassName("box2"); // 没有就返回空数组
var inps=document.getElementsByTagName("div"); // 没有就返回空数组
var el=document.querySelector(".box2"); // 获取符合的第一个元素 没有返回null
var arr = document.querySelectorAll(".box2"); // 获取符合的所有元素 没有返回null
parentElement 获取父元素 parentNode 获取父节点
children 获取子元素们 childNodes 获取子节点们
nextElementSibling 下一个兄弟元素 没有返回null
nextSibling 下一个兄弟节点 没有返回null
previousElementSibling 上一个兄弟元素 没有返回null
previousSibling 上一个兄弟节点 没有返回null
var box4 = document.querySelector("#box4");
var box4baba = box4.parentElement; // 获取父元素
console.log(box5.parentNode); // 获取父节点
var arr = box1.children; // 子元素们
var arr2 = box1.childNodes; // 子节点们
var box = document.querySelector("#box4");
console.log(box.nextElementSibling); // 下一个兄弟元素
console.log(box.nextSibling); // 下一个兄弟节点
var box6 = document.querySelector("#box6");
console.log(box6.previousElementSibling); // 上一个兄弟元素
console.log(box6.previousSibling); // 上一个兄弟节点
firstElementChild 第一个子元素 firstChild 第一个子节点
lastElementChild 最后一个子元素 lastChild 最后一个子节点
console.log(box4.firstElementChild); // 第一个子元素
console.log(box4.firstChild); // 第一个子节点
console.log(box4.lastElementChild); // 最后一个子元素
console.log(box4.lastChild); // 最后一个子节点
获取这个元素是兄弟中的第几个
Object.prototype.indexof1 = function () {
var arr = this.parentElement.children;
for (var i = 0; i < arr.length; i++) {
if (arr[i] == this) {
return i;
}
}
}