(一) 基础
1.现在的XHTML都是符合XML规范的,XML里面
<? ?>
包含的内容称为处理指令(processing instruction),它主要给XML解析器一些额外的信息,来告诉解析
器如何处理XML数据,例如所有的XML文件开头都有
<?xml version="1.0"?>
也可以指定XML文件的样式表
<?xml-stylesheet type="text/css"?>
2. DOM 节点的类型
Document
最顶层节点,所有的其它节点都是附属于它的。
DocumentType
DTD引用(使用<!DOCTYPE>语法)的对象表示形式,例如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">.
它不能包含子节点。
DocumentFragment
可以象Document一样保存其它节点。
Element
一对标签的内容。
Attr
标签里面的属性名称和属性值
Text
标签之间的文本或者CDataSection里面的文本
CDataSection
<![CDATA[ ]]>
的对象表现形式
Entity
表示DTD中的一个实体定义,例如
<!ENTITY foo "foo">
。这个节点类型不能包含子节点
EntityReference
代表一个实体引用,例如"。这个节点类型不能包含子节点
ProcessingInstruction
代表一个处理指令,例如:
<?xml-stylesheet type="text/css"?>
Comment
XML注释,不能包含子节点
Notation
代表在DTD中定义的记号,很少用。
3. DOM操作函数
a. 对属性的操作,
getAttribute(),setAttribute(),removeAttribute()
, 或者attributes.getNamedItem(), attributes.setNamedItem(),
attributes.removeNamedItem()
b. 对子节点的访问,
getElementsByTagName()
, 可以传入"*"来获得所有的节点,但是这个结果和document.all是等价的
getElementsByName()
, IE6和Opera7.5在这个方法上有些错误,它们还会返回id等于传入参数的Element,而且它们只检查<input/><img/>
元素
getElementById()
id是唯一的,所以返回值最多只有一个Element,IE6对于这个方法有一个bug,如果传入参数匹配某个元素的name,它也
会返回这个元素
c. 创建和操作节点
createAttributge
createCDATASection
createComment
createDocumentFragment
createElement
createEntity
createProcessingInstruction
createTextNode
d. 增加节点常用方法:
createElement(),createTextNode(),appendChild()
,使用这些方法的时候要注意,有些Element是不可以appendChild的。
e. 删除节点常用方法:
removeChild(), replaceChild(), insertBefore()
f. 如果操作的次数比较多,会导致多次刷新,这个时候可以使用
createDocumentFragment()
函数创建document片段,整理好了,一次性的添加到document里面
(二) HTML DOM
a.
<img src="mypicture.jpg" border="0"/>
,如果要改属性可以通过
getAttribute()
或者
setAttribute()
,也可以直接写为 var nodeImg = document.getElementByID(); nodeImg.src = ""; nodeImg.border = "1";因为class是ECMAScript的关键字,所以对于class属性,我们调用nodeImg.className = "".注意:IE在setAttribute()上有个很大的问题,无法及时刷新。
b. HTML DOM 对table的操作有一套专门的API
caption 指向<caption/>元素(如果存在)
tBodies 指向<tbody/>元素(如果存在)
tFoot 指向<tfoot/>元素(如果存在)
tHead 指向<thead/>元素(如果存在)
rows
createTHead()
createTFoot()
createCaption()
deleteTHead()
deleteTFoot()
deleteCaption()
deleteRow(position)
insertRow(position)
<tbody/>元素添加了以下内容:
rows
deleteRow(position)
insertRow(position)
<tr/>元素添加了以下内容:
cells
deleteCell(position)
insertCell(position)
c. NodeIterator用来遍历对象
这个对象的构造函数有四个参数:
root
: 从树中开始搜索的那个节点
whatToShow
: 一个数值代码,代表一个枚举,后面详细介绍
filter:
自定义的NodeFilter对象,决定需要忽略哪些节点
entityReferenceExpansion
: bool值,表示是否需要扩展实体引用
通过下面一个或者多个常量的与或操作,可以设置whatToShow的值:
NodeFilter.SHOW_ALL
NodeFilter.SHOW_ELEMENT
NodeFilter.SHOW_ATTRIBUTE
NodeFilter.SHOW_TEXT
NodeFilter.SHOW_CDATA_SECTION
NodeFilter.SHOW_ENTITY_REFERENCE
NodeFilter.SHOW_ENTITY
NodeFilter.SHOW_PROCESSING_INSTRUCTION
NodeFilter.SHOW_COMMENT
NodeFilter.SHOW_DOCUMENT
NodeFilter.SHOW_DOCUMENT_TYPE
NodeFilter.SHOW_DOCUMENT_FRAGMENT
NodeFilter.SHOW_NOTATION
方法:




























d. TreeWalker有点像NodeIterator的大哥:它有NodeIterator所有的功能(nextNode()和previousNode()),并且添加了一些遍历方法:
parentNode()
----进入当前节点的父节点
firstChild()
----进入当前节点的第一个子节点
lastChild()
----进入当前节点的最后一个子节点
nextSibling()
----进入当前节点的下一个兄弟节点
previousSibling()
----进入当前节点的前一个兄弟节点
可以通过
document.createTreeWalker()
来创建TreeWalker
(三)CSS DOM 编程
1. IE4.0为
每一个Web页面元素
引入了一个style对象来管理元素的css样式,最后被DOM沿用至今
2. 改变border line的代码


3. 通过下面的代码,可以实现hover的效果

4. style对象有一些方法,这些是DOM标准里面有的,但是IE不支持,所以最好还是直接使用style的属性,如:style.backgroundColor的形式来设置style的property值比较好。
style.getPropertyValue(propertyName);
style.getPropertyPriority();
style.item(index);
style.removeProperty(propertyName);
style.setProperty(propertyName, value, privority);
5. Copy下面的内容到txt文件,然后改后缀为.htm,用IE打开,可以看到一个黄色的Tip,主要原理是操作style.Visibility属性,这个属性和style.display是不一样的,前者只是控制visible,不会影响布局,后者不仅仅控制visible,还会影响布局。














































6. 下面代码利用style的display属性控制折叠功能








































6. 有些元素通过设置class属性来设置样式,我们可以通过
document.styleSheets
集合拿到当前文档所有的css class。如果修改css class的设置,将影响所有的使用这个css class的元素。
DOM中可以使用
document.styleSheets[0].
css
Rulers
,但是IE中对应的属性叫
document.styleSheets[0].rulers
7. 我们可以为一个element设置style,也可以给它的父Element设置style,还可以设置css class,最后我们在浏览器看到的效果是所有这些设置的合并,IE提供或者最后看到的style的属性是
element.currentStyle
,它是只读的。DOM提供的是一个方法,可以通过
document.defaultView.getComputedStyle(
element
,
hover
)
获得,第一个参数是元素, 第二个参数是伪类::hover,:first-letter.
(四) 表单(Form)操作
1. 创建表单元素是为了满足用户向服务器发送数据的要求,Web表单使用的Html元素有<form/>,<input/>,<select/>,<textarea/>等
2. <form/>用来向服务器传输数据,它的属性有:
method
表示浏览器发送GET请求或是发送POST请求。
action
表示表单所要提交到的地址URL。
enctype
当向服务器提交数据时,数据应该使用的编码方法,默认是application/x-www-url-encoded,不过,如果要上传文件,可以设置multipart/form-data
accept
当上传文件时候,列出服务器能正确处理的mime类型。
accept-charset
当提交数据时,列出服务器接受的字符编码。
3. <input/>元素是Html的主要输入元素。通过type特性来判断是哪种输入控件:
“text"
"radio"
"checkbox"
"file"
"password"
"button"
"submit"
"reset"
"hidden"
"image"
4. 获取Form使用
document.getElementById()
或者
document.forms["formId"], document.forms[0]
.
5. 获取Form上的输入字段
oForm.elements[0], oForm.elements["textbox1"], oForm.textbox1, oForm["textbox1"]
6. Form 上的方法:
form.submit(), form.reset()
7. <input/>有一些属性:
<input type="text" validchars = ”0123456789“/>
<input type="text" invalidchars = ”0123456789“/>
控制input可以输入的字符,除了设置上面的属性,还要考虑用户paste,
在IE里面,可以直接<input text="text" onpaste="return false"/>
对于其它的浏览器,需要组织菜单paste和Ctrl + V来paste
<input type="text" invalidchars="0123456789" onpaste="return false" oncontextmenu="return false"
onkeypress="return blcokchars(this, event, true)/>















8. 对于<select/>,我们使用oListbox.options[0]来获得选项。