JS-获取节点的方法

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;
         }
    }
}