HTML DOM 基础知识，成为javascript晋级高手的必备手册
2013-08-07 11:06
399 查看
一、DOM 简介，什么是 DOM？
文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。
标记语言，也称置标语言，是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记进行标识。
HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法。
要改变页面的某个东西，JavaScript 就需要获取对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
DOM 以树结构表达 HTML 文档。
二、DOM 节点
DOM节点是这样规定的：
1.整个文档是一个文档节点
2.每个 HTML 标签是一个元素节点
3.包含在 HTML 元素中的文本是文本节点
4.每一个 HTML 属性是一个属性节点
5.注释属于注释节点
三、DOM节点树
所有的节点彼此间都存在等级关系。
除文档节点之外的每个节点都有父节点。<html>
大部分元素节点都有子节点。<head>
当节点分享同一个父节点时，它们就是同辈（同级节点）。<head>和<body>
节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。<head>
节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。<html>
四、DOM 节点访问
1.通过文档对象(document)查找并访问节点
•通过使用方法:
document.getElementById() 返回所有指定元素的id属性
document.getElementByName() 返回所有指定元素的name属性
document.getElementsByTagName() 返回所有指定元素的标签名称
document.createElement("element") 返回动态创建HTML对象
•通过使用属性：
parentNode 元素的父节点（parentNode）
firstChild 第一个子元素（firstChild）
lastChild 最后一个子元素（lastChild）
五、DOM 节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
•nodeName（节点名称）
•nodeValue（节点值）
•nodeType（节点类型）
1.nodeName 属性含有某个节点的名称。
•元素节点的 nodeName 是标签名称
•属性节点的 nodeName 是属性名称
•文本节点的 nodeName 永远是 #text
•文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的
2.nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
3.nodeType
nodeType 属性可返回节点的类型。
以下是最重要的节点类型：
元素类型 节点类型
1.元素 1
2.属性 2
3.文本 3
4.注释 8
5.文档 9
六、Browser 对象
DOM Window：Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象，所以才保证了打开同一个页面的不同窗口的对象初始化完全不一样。
Window 对象描述：
Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。
要引用窗口中的一个框架，可以使用如下语法：
frame[i] //当前窗口的框架
self.frame[i] //当前窗口的框架
w.frame[i] //窗口 w 的框架
要引用一个框架的父窗口（或父框架），可以使用下面的语法：
parent //当前窗口的父窗口
self.parent //当前窗口的父窗口
w.parent //窗口 w 的父窗口
要从顶层窗口含有的任何一个框架中引用它，可以使用如下语法：
top //当前框架的顶层窗口
self.top //当前框架的顶层窗口
f.top //框架 f 的顶层窗口
DOM Navigator：Navigator 对象包含有关浏览器的信息。
DOM Screen：Screen 对象包含有关客户端显示屏幕的信息。
DOM History：History 对象包含用户（在浏览器窗口中）访问过的 URL。
DOM Location：Location 对象包含有关当前 URL 的信息。
七、HTML DOM 对象
DOM Document：
DOM Style：Style对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。
1.使用 Style 对象属性的语法：
document.getElementById("id").style.property="值"
2.Style 对象的属性：
•background背景
•border边框和margin边距
•layout布局
•list列表
•杂项
•positioning定位
•printing打印
•scrollbar滚动条
•table表格
•text文本
•规范
2级DOM引进的几个新DOM模块来处理新的接口类型：
DOM视图：描述跟踪一个文档的各种视图（使用CSS样式设计文档前后）的接口；
DOM事件：描述事件接口；
DOM样式：描述处理基于CSS样式的接口；
DOM遍历与范围：描述遍历和操作文档树的接口；
文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。
标记语言，也称置标语言，是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记进行标识。
HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法。
要改变页面的某个东西，JavaScript 就需要获取对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
DOM 以树结构表达 HTML 文档。
二、DOM 节点
DOM节点是这样规定的：
1.整个文档是一个文档节点
2.每个 HTML 标签是一个元素节点
3.包含在 HTML 元素中的文本是文本节点
4.每一个 HTML 属性是一个属性节点
5.注释属于注释节点
三、DOM节点树
所有的节点彼此间都存在等级关系。
除文档节点之外的每个节点都有父节点。<html>
大部分元素节点都有子节点。<head>
当节点分享同一个父节点时，它们就是同辈（同级节点）。<head>和<body>
节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。<head>
节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。<html>
四、DOM 节点访问
1.通过文档对象(document)查找并访问节点
•通过使用方法:
document.getElementById() 返回所有指定元素的id属性
document.getElementByName() 返回所有指定元素的name属性
document.getElementsByTagName() 返回所有指定元素的标签名称
document.createElement("element") 返回动态创建HTML对象
•通过使用属性：
parentNode 元素的父节点（parentNode）
firstChild 第一个子元素（firstChild）
lastChild 最后一个子元素（lastChild）
五、DOM 节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
•nodeName（节点名称）
•nodeValue（节点值）
•nodeType（节点类型）
1.nodeName 属性含有某个节点的名称。
•元素节点的 nodeName 是标签名称
•属性节点的 nodeName 是属性名称
•文本节点的 nodeName 永远是 #text
•文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的
2.nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
3.nodeType
nodeType 属性可返回节点的类型。
以下是最重要的节点类型：
元素类型 节点类型
1.元素 1
2.属性 2
3.文本 3
4.注释 8
5.文档 9
六、Browser 对象
DOM Window：Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象，所以才保证了打开同一个页面的不同窗口的对象初始化完全不一样。
Window 对象描述：
Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。
要引用窗口中的一个框架，可以使用如下语法：
frame[i] //当前窗口的框架
self.frame[i] //当前窗口的框架
w.frame[i] //窗口 w 的框架
要引用一个框架的父窗口（或父框架），可以使用下面的语法：
parent //当前窗口的父窗口
self.parent //当前窗口的父窗口
w.parent //窗口 w 的父窗口
要从顶层窗口含有的任何一个框架中引用它，可以使用如下语法：
top //当前框架的顶层窗口
self.top //当前框架的顶层窗口
f.top //框架 f 的顶层窗口
DOM Navigator：Navigator 对象包含有关浏览器的信息。
DOM Screen：Screen 对象包含有关客户端显示屏幕的信息。
DOM History：History 对象包含用户（在浏览器窗口中）访问过的 URL。
DOM Location：Location 对象包含有关当前 URL 的信息。
七、HTML DOM 对象
DOM Document：
DOM Style：Style对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。
1.使用 Style 对象属性的语法：
document.getElementById("id").style.property="值"
2.Style 对象的属性：
•background背景
•border边框和margin边距
•layout布局
•list列表
•杂项
•positioning定位
•printing打印
•scrollbar滚动条
•table表格
•text文本
•规范
2级DOM引进的几个新DOM模块来处理新的接口类型：
DOM视图：描述跟踪一个文档的各种视图（使用CSS样式设计文档前后）的接口；
DOM事件：描述事件接口；
DOM样式：描述处理基于CSS样式的接口；
DOM遍历与范围：描述遍历和操作文档树的接口；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Python学习第三章《字符串》（成为高手前必须知道的一些基础知识）
- javascript学习中的一些心得(基础知识，高手免进)
- Python学习第三章《变量》（成为高手前必须知道的一些基础知识）
- Javascript中的数值转换问题（基础知识必备）
- JavaScript 开发者经常忽略或误用的七个基础知识点
- 19、javascript基础知识
- Javascript基础知识点轨迹（四）
- 数据挖掘必备基础知识
- 第一章 基础知识必备
- javascript真的不难-回顾一下基础知识
- javascript基础知识--什么是构造函数？什么是实例化对象？
- 必备 | Java初学者4大核心基础知识！
- 【JavaScript】基础知识初步认识
- javaScript基础知识<二>
- sql注入之必备的基础知识
- JavaScript与PHP基础知识对比学习
- JavaScript基础知识点归纳(推荐)
- JavaScript基础知识（3）
- javascript基础知识梳理-Number与String之间的互相转换【转】
- 【JavaScript基础知识】——面向对象和原型