Dom根据节点层次获取元素——之转生在异世界学前端

先获取子元素

var son1 = document.getElementsByClassName("son")[1];

再获取父元素

var father = document.getElementsByClassName("father")[0];

获取节点父元素

console.log(son1.parentNode);

访问下一个兄弟节点

nextSibling 获取到幽灵节点  幽灵节点看不到摸不着，但存在

console.log(son1.nextSibling);    幽灵节点

console.log(son1.nextElementSibling);    下一个兄弟节点

访问上一个兄弟节点

console.log(son1.previousSibling);   幽灵节点

console.log(son1.previousElementSibling);   上一个兄弟节点

访问第一个子节点

console.log(father.firstChild);   幽灵节点

console.log(father.firstElementChild);   第一个子节点

访问最后一个子节点

console.log(father.lastChild);   幽灵节点

console.log(father.lastElementChild);    最后一个子节点

所有子节点

console.log(father.childNodes);    包含幽灵节点

console.log(father.children);    只有子节点，不包含幽灵节点