DOM--笔记

什么是DOM?

JavaScript三个组成部分之一——文档对象模型(DOM)

官方定义:DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构,

目的其实就是为了能让js操作html元素而制定的一个规范

DOM树:可以更好的理解DOM

由结构图中我们可以看到,整个文档就是一个文档节点

标签 、标记、元素、属性都属于节点

而每一个HMTL标签都是一个元素节点

标签中的文字则是文字节点

标签的属性是属性节点

一切都是节点……

访问节点 :

getElementById()                     id访问节点

getElementsByTagName()        标签访问节点

getElementsByClassName()      类名访问节点,有兼容性问题(主流浏览器支持,ie 6 7 8 不认识)

类名访问节点的兼容写要熟练

节点访问关系:

父节点:parentNode

    window.onload = function(){

        var x = document.getElementById("x");

        x.onclick = function(){

            this.parentNode.style.display = "none";

            // 关掉的是他的 父节点

        }

    }

兄弟节点(同级关系,用的很少):

nextSibling  下一个兄弟     ie 6 7 8 认识

nextElementSibling  其他浏览器认识的

previousSibling  上一个兄弟    ie 6 7 8 认识

previousElementSibling    其他浏览器认识的

想要兼容    可以用     ||     合写

var div = one.nextElementSibling || one.nextSibling;div.style.backgroundColor = "red";

必须先写 正常浏览器  后写  ie 6 7 8

子节点:

childNodes    选出全部的子节点

childNodes:它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点

火狐谷歌等高本版(标准浏览器)会把换行也看做是子节点

待续...

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

推荐阅读更多精彩内容

  •   DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 1,478评论 1 3
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,690评论 0 7
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,156评论 0 21
  • 高一还是太年轻 高一的我们天真的想法 高三的人为什么总是...
    漁和飞鳥阅读 470评论 0 1
  • ----《通向财富自由之路》学习总结第四篇 上一节已经学到你所拥有的最宝贵的财富是你的注意力,也就是说注意力比时间...
    飞鸿无痕阅读 132评论 0 1