您的位置：首页 > Web前端 > JavaScript

Javascript Step by Step - 02

2013-07-10 22:31 169 查看

DOM 操作

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

特性/方法类型/返回类型说明
nodeNameString节点的名字;根据节点的类型而定义
nodeValueString节点的值;根据节点的类型而定义
nodeTypeNumber节点的类型常量值之一
ownerDocumentDocument指向这个节点所属的文档
firstChildNode指向在childNodes列表中的第一个节点
lastChildNode指向在childNodes列表中的最后一个节点
childNodesNodeList所有子节点的列表
previousSiblingNode指向前一个兄弟节点;如果这个节点就是第一个兄弟节点，那么改值为null
nextSiblingNode指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点，那么改值为null
hasChildNodes()Boolean当childNodes包含一个或多个节点时,返回真
attributesNamedNodeMap包含了代表一个元素的特性的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()
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航