JS中的DOM对象

js中的dom对象 文档对象模型

主要是操作HTML（内容）
DOM:Document Object Model W3C API标准
是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

DOM分为：核心DOM 能够操作所有结构化文档（HTML XML） 万能 - 繁琐
还有HTML DOM 专门操作HTML内容的API 常用的API --> 简化

所有的Node(元素、属性、文本)对象 都是document的子代节点

三大属性

nodeType 节点类型 number
document 9
element 1
attrbute 2
text 3
nodeName 节点名
document #document
标签元素 全大写的标签名
attitude 属性名
文本节点 #text
nodeValue 节点值
document null
标签元素 null
attribute 属性值
text 文本的内容
查找 三个元素不需要找，直接用
document.documentElement
document.head
document.body

节点间关系

			1） 父子关系
				node.parentNode   获得node的父节点
				node.childNodes   获得node的直接子代节点
				node.firstChild   获得node下的第一个子节点
				node.lastChild    获得node下最后一个子节点
			2）兄弟关系
				node.previusSibling   返回当前节点的前一个兄弟节点
				node.nextSibling      返回当前节点的下一个兄弟节点
		节点树：包含了所有节点（元素，文本）  完整的结构

元素树 ： 仅包含元素节点的树形结构
1）父子关系
elem.parentElement 返回父元素对象
elem.children 返回子元素对象集合 IE8支持
elem.firstElementChild 返回第一个子元素对象
elem.lastElementChild 返回最后一个子元素对象
2）兄弟关系
elem.previusELementSibling 返回当前元素的前一个兄弟元素
elem.nextElementSibling 返回当前元素的下一个兄弟元素

直接获得元素标签的方式 ：id（标签的ID） Tagname（标签名） Name（标签的name属性值）

查询指定父元素下指定标签的元素对象集合 （所有子代元素对象）
document.getElementsByTagName("标签名") ;
查询指定父元素下指定标签的ID
document.getElementById('ID')
查找任意父元素下指定class属性的元素对象   返回一个集合
document;getElementsByClassName("class");

DOM对象获得操作文本内容：

            1.innerHTML会获得HTML内容      innerHTML添加时会解析内容 
            2.innerText会获得纯文本内容     innerText添加时直接添加所有内容
            3.单标签：获得的时候都是用value获得
            4.特殊的标签：select、textarea  用value获得

DOM对象获得操作元素样式：

1.获得元素标签样式：通过标签元素名.style.width
2.操作元素标签样式：方式一：改变元素标签样式:直接修改元素标签名.style.width=“300px”
方式二：改变元素标签样式：通过增加class类来增加对应的css样式

下面是 利用节点做的一个简单的二级菜单