WEB_BASIC---06 JavaScript的DOM编程与HTML的DOM

 

一、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对象

属性 

方法

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接口

属性

firstChild

lastChild

nextSibling

previousSibling

parentNode

childNodes

nodeName

nodeType

nodeValue

 

方法

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)