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];
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西...
    微醺岁月阅读 4,514评论 2 61
  • 复习 document对象提供了哪五种访问DOM元素的方法? history、location对象分别有哪些常用方...
    轻思维阅读 660评论 0 3
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 1,035评论 0 9
  • 画画儿是从生完宝宝以后在家休产假时开始的,零零星星不知觉中便已画了一沓。
    晓xiaoxiao阅读 372评论 6 5
  • 许是久未做班主任的缘故,以旁观者的心态来参加主题班会的交流展示活动,更多的是审视课堂的设计和实施。毫无疑问,...
    山月晓风阅读 857评论 10 9