Javascript Step by Step

DOM 操作

DOM是面向HTML和XML文档的API，为文档提供了结构化表示。在DOM中一切都是节点Node，文档就是由许多的Node组成的。文档里的每个节点都有属性 nodeName、nodeValue 和nodeType。Node接口定义了所有节点类型都包含的特性和方法。

特性/方法	类型/返回类型	说明
nodeName	String	节点的名字;根据节点的类型而定义
nodeValue	String	节点的值;根据节点的类型而定义
nodeType	Number	节点的类型常量值之一
ownerDocument	Document	指向这个节点所属的文档
firstChild	Node	指向在childNodes列表中的第一个节点
lastChild	Node	指向在childNodes列表中的最后一个节点
childNodes	NodeList	所有子节点的列表
previousSibling	Node	指向前一个兄弟节点;如果这个节点就是第一个兄弟节点，那么改值为null
nextSibling	Node	指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点，那么改值为null
hasChildNodes()	Boolean	当childNodes包含一个或多个节点时,返回真
attributes	NamedNodeMap	包含了代表一个元素的特性的Attr对象;仅用于Element节点
appendChild(node)	Node	将node添加到childNodes的末尾
removeChild(node)	Node	从childNodes中删除node
replaceChild(newnode,oldnode)	Node	将childNodes中的oldnode替换成newnode
insertBefore(newnode,refnode)	Node	在childNodes中的refnode之前插入newnode

访问指定节点：

getElementsByTagName	返回一个包含tagname(如input)等于某个指定值的所有元素的NodeList
getElementsByName	返回包含name等于某个特定值的所有元素组成的NodeList
getElementById	返回id等于某个值的特定元素

创建新的节点：

createElement	创建元素节点
createTextNode	创建文本节点
appendChild	追加节点

dom树的格式如下：

Document对象

document对象是Window对象的一部分，可通过window.document属性对其进行访问。

document对象集合：

all[]	提供对文档中所有 HTML 元素访问的数组
anchors[]	对文档中所有 Anchor 对象引用的数组
forms[]	对文档中所有 Form 对象引用的数组
images[]	对文档中所有 Image 对象引用的数组
links[]	对文档中所有 Area 和 Link 对象引用的数组

document对象属性：

cookie	设置或得到与当前文档有关的所有 cookie
domain	得到当前文档的域名
lastModified	得到文档被最后修改的日期和时间
referrer	得到载入当前文档的 URL(前一个URL 地址)
title	得到当前文档的标题
URL	得到当前文档的 URL

document对象方法：

getElementById()	根据元素 id 得到元素(第一个)对象
getElementsByName()	根据元素 name 得到元素对象的集合
getElementsByTagName()	根据指定标签名得到元素对象的集合
open()	打开一个数据流，以收集来自任何 document.write() 或 document.writeln() 方法的输出
write()	向文档写 HTML 表达式或 JavaScript 代码
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据

document的body子对象

document.body //指定文档主体的开始和结束，等价于<body>…/<body>
document.body.bgColor //设置或获取对象后面的背景颜色
document.body.link //未点击过的链接颜色
document.body.alink //激活链接(焦点在此链接上)的颜色
document.body.vlink //已点击过的链接颜色
document.body.text //文本色
document.body.innerText //设置<body>…/<body>之间的文本
document.body.innerHTML //设置<body>…/<body>之间的HTML代码
document.body.topMargin //页面上边距
document.body.leftMargin //页面左边距
document.body.rightMargin //页面右边距
document.body.bottomMargin //页面下边距
document.body.background //背景图片

document的location子对象

document.location.hash // #号后的部分
document.location.host // 域名+端口号
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目录部分
document.location.port // 端口号
document.location.protocol // 网络协议(http:)
document.location.search // ?号后的部分

BOM和DOM的区别

DOM 描述了处理网页内容的方法和接口；

BOM 描述了与浏览器进行交互的方法和接口。

观察BOM的体系结构，所有的对象都源自window对象，它表示整个浏览器窗口。window对象的函数有：

窗体控制函数 moveBy(),moveTo(),resizeBy(),resizeTo()

窗体滚动轴控制函数 scrollBy(),scrollTo()

焦点控制函数 focus(),blur()

新建窗体函数 open(),close(),opener

对话框函数 alert(),confirm(),prompt()

状态栏属性 status,defaultStatus

时间间隔函数 setTimeout(),clearTimeout(),setInterval(),clearInterval()