(一) 基础
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的代码
var oDiv = document.getElementById("div1");
oDiv.style.border = "1px solid black";
3. 通过下面的代码,可以实现hover的效果
<!---->
<div id="div1" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='red'">
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].cssRulers ,但是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]来获得选项。
分享到:
相关推荐
JavaScript DOM编程艺术 --全
JavaScriptDOM编程艺术(第2版)PDF版本下载
经典之作《javascript dom编程艺术》源码。通过一个实际案例,讲述了原生的javascript操作dom的使用方法,以及操作dom中应该注意的一些事项。
JavaScript DOM编程艺术,高清资源,无比经典,值得拥有
JavascriptDOM基本操作 dom 精品操作
JavaScriptDOM编程艺术.中文版.完整书签 本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则:预留退路、循序渐进和以用户为中心等,这些概念对于任何前端Web开发工作都非常重要。本书...
JavaScript DOM编程艺术 第2版.zip.002 由于上传文件大小的限制,故分成两个压缩卷,请查找对应的第一部分 学习Javascript用《JavaScript DOM编程艺术》来入门最好不过了,老老实实看两遍,看完了你就会对JS有一个...
教程名称:Javascript DOM编程视频教程(17讲) 课程目录:【】1.JavascriptDOM编程_在什么位置编写JS代码【】10.JavascriptDOM编程_删除节点【】11.JavascriptDOM编程_添加删除节点的实验...
JAVA、PHP、JS(JAVASCRIPT DOM)、HTML、XML、CSS、W3C、正则表达式、WEB开发人员必备CHM工具手册大全打包下载.rar 这里是我个人在WEB开发7年来,收集的CHM工具手册中精选出来的,每个都是精品中的精品,个人认为...
第1章 JavaScript简史 1.1 JavaScript的起源 1.2 DOM 1.3 浏览器战争 1.3.1 DHTML 1.3.2 浏览器之间的冲突 1.4 制定标准 1.4.1 浏览器以外的考虑 1.4.2 浏览器战争的结局 1.4.3 崭新的起点 1.5 小结 第2章 ...
javascript dom2 源码及pdf
JavaScript DOM编程艺术
JavaScript DOM编程艺术 第2版 及源码 JavaScript DOM编程艺术 第2版 及源码
javascript DOM 编程艺术源码 很详细 每一课都有
JavaScriptDom编程艺术,一本很好的前端书籍,有兴趣的可以看看
JavaScript DOM编程艺术 第2版
JavaScript DOM编程艺术 经典书籍
JavaScript Dom编程艺术源代码,包括所有素材。
《javascript DOM高级程序设计》的源码,亲测可用,内容最全。
javascript dom编程艺术 第2版 源码