JS获取子节点、父节点和兄弟节点id的方法

JS获取子节点、父节点和兄弟节点id的方法_第1张图片
首先了解
parentNode,parentElement;
childNodes,children;
nextSibling,nextElementSibling
previousSibling, previousElementSibling
的区别之前,
必须对Dom树有一定的了解,在Dom文档结构中,HTML页面每一部分都是由节点组成的,节点的类型一共有3种,元素节点文本节点,属性节点,从图中可以看出属性节点属于元素节点的分支,一般不常考虑。
nextSibling属性与nextElementSibling属性的差别:
nextSibling属性返回元素节点之后的兄弟节点(包括文本节点、注释节点即回车、换行、空格、文本等等);
nextElementSibling属性只返回元素节点之后的兄弟元素节点(不包括文本节点、注释节点);

注意: 空格、回车也会看作文本,以文本节点对待。
下例中,如果两个li元素之间有空格、回车,将返回 “undefined”。

childNodes与childern的差别
childNodes指的是返回当前元素子节点的所有类型节点,包括空格和换行符
JS获取子节点、父节点和兄弟节点id的方法_第2张图片
JS获取子节点、父节点和兄弟节点id的方法_第3张图片
JS获取子节点、父节点和兄弟节点id的方法_第4张图片
JS获取子节点、父节点和兄弟节点id的方法_第5张图片
parentNode与parentElement的区别
两者在通常情况下都是一样的,因为包含元素的节点只有可能是元素节点

你可能感兴趣的:(html,dom,html,js)