JS学习笔记(Dom操作)

Dom操作:

获取父节点:

obj.parentNode
注:父节点最大是document,再往上就是null

获取子节点:

childNodes  获取子节点,包括文本节点
    节点类型:
        文本节点
        标签节点
            检测节点的类型:nodeType
                3  文本节点
                1  标签节点
children    获取子节点(只包括第一层),获取的子节点不包括文本节点
    获取到的是一组元素,可以用下标、length

获取上一个兄弟节点:

obj.previousElementSibling  兼容:高版本浏览器
obj.previousSibling  兼容:ie6,7,8
兼容写法:
    obj.obj.previousElementSibling||obj.previousSibling

获取下一个兄弟节点:

obj.nextElementSibling  兼容:高版本浏览器
obj.nextSibling  兼容:ie6,7,8    其他浏览器是文本                 
兼容写法:
    obj.nextElementSibling||obj.nextSibling;

获取首尾子节点:

首子节点:
    父级.firstElementChild 兼容高版本浏览器
    父级.firstChild  兼容ie6,7,8
    兼容写法:
        父级.firstElementChild||父级.firstChild
尾子节点:
    父级.lastElementChild 兼容高版本浏览器
    父级.lastChild  兼容ie6,7,8
    兼容写法:
        父级.lastElementChild||父级.lastChild
用上面的方法获取首尾子节点太麻烦,我们可以直接获取:
       首子节点:
       obj.children[0];
       尾子节点:
       obj.children[obj.children.length-1];

你可能感兴趣的:(JS学习笔记(Dom操作))