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 描述了与浏览器进行交互的方法和接口。

browser_objects

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

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

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

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

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

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

状态栏属性    status,defaultStatus

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

原文地址:https://www.cnblogs.com/cubika/p/3182962.html