JS获取子节点、父节点和兄弟节点

js获取子节点

获取指定标签子节点

var a = document.getElementById("test").getElementsByTagName("div");

获取所有子节点

//数组格式，不包含换行和空格
var getFirstChild = document.getElementById("test").children[0];
//数组的格式，包含换行和空格。
var b =document.getElementById("test").childNodes;
//去掉换行的空格
for(var i=0; i<b.length;i++){
    if(b[i].nodeName == "#text" && !/\s/.test(b.nodeValue)){
        document.getElementById("test").removeChild(b[i]);
    }
}
//补充
document.getElementById("test").childElementCount; //可以直接获取长度 同length

获取第一个子节点

//不会匹配换行和空格信息。
var getFirstChild = document.getElementById("test").firstElementChild;
//获取第一个子节点，包含换行和空格，有时候会返回undefined
var getFirstChild = document.getElementById("test").firstChild;

获取最后一个子节点

// 获取最后一个子节点，规则同上
var getLastChild = document.getElementById("test").lastElementChild;
var getLastChild = document.getElementById("test").lastChild;

js获取父节点

var p = document.getElementById("test").parentNode;
var p1 = document.getElementById("test").parentElement;
var p2 = document.getElementById("test").offsetParent;//获取所有父节点

js获取兄弟节点

var brother1 = document.getElementById("test").parentNode.children[1];
//获取上一个兄弟节点
var brother2 = document.getElementById("test").previousElementSibling;//直接匹配节点
var brother3 = document.getElementById("test").previousSibling;//包含换行空格
//获取下一个兄弟节点
var brother4 = document.getElementById("test").nextElementSibling;
var brother5 = document.getElementById("test").nextSibling;