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节点，所有属性，文本节点

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

待续...