一、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语句。