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()