JS复习之DOM与HTMLDOM

一、DOM编程


1.什么是DOM?

DOM[Document Object Model],文档对象模型。

DOM提供处理XML/HTML文档的API。

DOM的主要操作:节点的获取、节点的动态的创建、创建的删除及节点的替换。

节点(Node),在DOM树中所存在的任何一个元素(如HTML元素，文本、属性等)。

节点的类型：

Node.ELEMENT_NODE,1(元素类型)
Node.ATTRIBUTE_NODE,2(属性类型)
Node.TEXT_NODE,3(文本类型)
Node.COMMENT_NODE,8(注释类型)
Node.DOCUMENT_NODE,9(文档类型)

2.document对象
属性：

document.title                 //设置文档标题等价于HTML的<title>标签
document.bgColor               //设置页面背景色
document.fgColor               //设置前景色(文本颜色)
document.linkColor             //未点击过的链接颜色
document.alinkColor            //激活链接(焦点在此链接上)的颜色
document.vlinkColor            //已点击过的链接颜色
document.URL                   //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate       //文件建立日期，只读属性
document.fileModifiedDate      //文件修改日期，只读属性
document.fileSize              //文件大小，只读属性
document.cookie                //设置和读出cookie
document.charset               //设置字符集 简体中文:gb2312

方法：

getElementById()
描述:根据ID获取对象
语法:Element document.getElementById(string id)

createElement()
描述:创建元素节点
语法:Element document.createElement(string tagName)

createTextNode
描述:创建文本节点
语法:textNode document.createTextNode(string value)

createComment
描述:创建注释节点
语法:commentNode document.createComment(string value)

createAttribute
描述:创建属性节点
语法:attrNode document.createAttribute(string name)

3.Node接口

属性：

nodeType属性返回一个整数值，表示节点的类型
nodeName属性返回节点的名称。
nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写。
textContent属性返回当前节点和它的所有后代节点的文本内容。
baseURI属性返回一个字符串，表示当前网页的绝对路径。浏览器根据这个属性，计算网页上的相对路径的 URL。该属性为只读
ownerDocument属性返回当前节点所在的顶层文档对象，即document对象。
nextSibling属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null。
previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null。
parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点（element）、文档节点（document）和文档片段节点（documentfragment）。
parentElement属性返回当前节点的父元素节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null。
firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null。
lastChild属性返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回null。用法与firstChild属性相同。
childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点。
isConnected属性返回一个布尔值，表示当前节点是否在文档之中。

方法：

appendChild()
描述:追加子节点
语法:object.appendChild(node)

insertBefore()
描述:插入子节点
语法:object.insertBefore(newNode[,refNode])

removeChild()
描述:删除节点
语法:object.removeChild(node)

replaceChild()
描述:节点的替换
语法:object.replaceChild(newNode,oldNode)

二、HTMLDOM

1.什么是HTMLDOM?

HTMLDOM提供处理HTML文档的API。

2.W3CDOM与HTMLDOM的区别

W3CDOM可以处理HTML/XML文档;

HTMLDOM仅能处理HTML文档。

3.获取对象

HTMLElement document.getElementById(string id)

4.访问HTML对象的属性

object.属性名称 = 值

[var 变量名称 = ] object.属性名称

说明:
A.HTML标记的属性即HTMLDOM节点的属性。

B.如果HTML标记的属性为合成词,在HTMLDOM中应采用"驼峰标记法"命名。

C.HTML标记的class属性,在HTMLDOM中应使用className取代。(因为class是ECMAScript预保留的关键字)

D.HTML标记的style属性,在HTMLDOM中将返回
CSSStyleDecleration(或CSS2Properties)对象。

5.CSSStyleDecleration对象

访问CSS样式

CSSStyleDeclaration.属性名称 = 值

[var 变量名称 = ] CSSStyleDeclaration.属性名称 = 值

说明:
A.如果CSS样式为单个单词，则在CSSStyleDeclaration对象中直接书写。

B.如果CSS样式带有短横线,则在CSSStyleDeclaration对象中去掉短横线，然后再使用"驼峰标记法"命名。

C.CSS样式中的float属性在CSSStyleDeclaration对象中,如果浏览器为Chrome、Firefox等，则使用cssFloat取代;如果浏览器为IE则使用styleFloat取代。

6.访问HTML对象的文本

所有文本都认为纯文本(HTML不能被解析)
object.innerText

HTML可以被解析
object.innerHTML

7.添加节点

A.全部HTMLDOM节点的创建都可以通过W3CDOM的方法实现

B.有几个特殊的HTMLDOM节点，它们拥有自己
的创建、删除方法。

7.1 图像

通过构造函数方式

[var 变量名称 = ] new Image(width,height)

7.2 列表框

A.列表框

add()方法

描述:添加Option对象

语法:object.add(optionElement)

remove()方法
描述:删除Option对象
语法:object.remove(index)

options属性

描述:返回列表框中所有列表项的集合

语法:object.options

value
描述:返回列表框中被选定选项的值

语法:string object.value

B.列表选项

创建列表选项对象(Option对象) – 构造函数方式

[var 变量名称 = ] new Option(text[,value[,defaultSelected[,selected]]])

text,指列表项显示文本

value,指列表项的提交值,如果省略value,则提交值与显示文本相同。

defaultSelected,指是否为默认选项(boolean)

selected,指是否被选定
(boolean)

8.单选框/复选框/列表框

说明:

A.单选框/复选框在HTML中默认被选定，需

要使用checked="checked"属性;在HTMLDOM编程时

需要使有object.checked = boolean语句。

B.所有表单控件(如单行文本框、密码框等)都存

在disabled="disabled"属性(禁用);在HTMLDOM

编程时使用object.disabled = boolean语句。