1.DOM( document Object model )三层模型:
DOM1:将html文档封装成对象。
DOM2:在DOM1的基础上加入了新功能,如解析名称空间。
DOM3:将xml文档封装成对象。
注:
(1).文档( D ):标记型文档( 标签,属性,标签中封装的数据 )。
(2).对象( O ):封装了属性和行为的实例,可以被直接调用。
(3).模型( M ):所有标记型文档都具备的一些的共性特征的体现
DOM 是针对XML( HTML )的基于树的API。
DOM树:节点( node )的层次,
DOM把一个文档表示成为一颗家谱树(父、子、兄弟)
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面。
2. DOM:用来将标记型文档以及文档中的内容封装成对象,并将标记型文档中
的所有的内容(标签,文本,属性等)都封装成对象。封装成对象的目
的就是为了更方便的操作这些文档以及文档中的所有内容,因为对象
的出现就可以有属性和行为被调用。
注:
1.为什么要将这些文档以及其中的标签封装成对象了?
因为可以在对象定义其属性和行为,可以方便操作这些对象。
2.常见的标记型文档:html,xhtml,xml。
3.只要是标记型文档,DOM这种技术都可以对其进行操作。
4.DOM技术是如何对标记型文档进行操作的?
要操作标记型文档必须对其进行解析。
5. DOM定义了Node的接口以及许多节点类型来表示XML节点的多个
方面。
6. 根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接
口,使得你可以访问页面的其它标准组建。
3.Dom技术的解析方式:将标记型文档解析成一棵Dom树,并将树中的内容封
装成节点对象。Dom解析将按照标签的层次关系体现
出标签的所属,形成一个树状结构。
注:
(1).Dom解析方式的好处:可以对树中的节点进行任意操作,如:增删
改查。
(2).Dom解析方式的弊端:这种解析需要将整个标记型文档加载进内存,
意味着如果标记型文档的体积很大,较为浪
费空间。
(3).当标记型文档加载进内存,那么内存中就有了一个对应的DOM树。
(4)对于大型文档可以使用SAX这种方式解析。
(5).SAX:是由一些组织定义的一种民间常用的解析方式,并不是W3C
标准,而DOM是W3C的标准。
(6).SAX的解析方式:基于事件驱动的解析。该方式获取数据的速度很
快,但是不能对标记进行增删改。
4. 节点及其类型
(1).节点:整个文档就是一个节点。
1.1 元素节点:每一个HTML标签。
1.2 文本节点:标签中的文字。
1.3 属性节点:标签的属性。
一切都是节点。
(2).节点接口的特性和方法:
特性方法 | 返回类型 | 说明 |
nodeName | String | 节点的名字,根据节点的类型而定义 |
nodeValue | String | 节点的值,根据节点的类型而定义 |
nodeType | Number | 节点类型的常量值之一 |
ownerDocument | Document | 指向节点所属的文档 |
firstChild | Node | 指向childNodes列表中的第一个节点 |
lastChild | Node | 指向childNodes列表中的最后一个节点 |
childNodes | NodeList | 所有子节点的列表 |
previousSibling | Node | 指向前一个兄弟节点,如果这个节点就是第一个兄弟节点,那么,该值为null |
nextSibling | Node | 指向另一个兄弟节点,如果这个节点就是最后一个兄弟节点,那么,该值为null |
hasChildNodes( ) | Boolean | 当childNodes包含一个或多个节点时,返回真 |
attributes | NamedNodeMap | 包含了代表一个元素的特性的Attr对象,仅用于Element节点 |
appendChild( node ) | Node | 将node添加到childNodes的末尾 |
removeChild( node ) | Node | 从childNodes中删除node |
replaceChild ( newNode , oldNode ) | Node | 将childNodes中的oldNode替换成newNode |
insertChild ( newNode , refNode ) | Node | 在childNodes中的refNode之前插入newNode |
5. DHTML动态html:html ,css ,dom ,javascript的技术的综合体。
html:负责将数据进行标签的封装,便于对该标签中的数据进行操作。
dom:将标签以及标签中的数据封装成对象。
css:负责标签的样式。
javascript:将三个进行融合,通过程序设计方式来操作这些对象完成动态效果的操作。
6. DHTML+XMLhttpRequest = AJAX
7. BOM( Browser Object Model ):浏览器对象模型,该模型可以方便的操作
浏览器。
(1).浏览器对应的对象就是Window对象,这个对象可以通过查阅dhtml API
获得。
(2).window对象在浏览一运行的时候就加载了,所以调用其对象的时候可以
直接调用。
(3).window对象中的一些常用对象:
document:代表给定浏览器窗口中的HTML文档。
event:代表事件状态,如,时间发生的元素,键盘状态,鼠标位置和鼠
标按钮状态。
history:包含了用户已浏览的URL的信息。
location:包含了对于当前的URL信息。
注:location的属性href既可以设置URL信息,即实现页面跳转,
也可以获取URL信息。
navigator:包含了关于WEB浏览器的信息。
screen:包含关于客户屏幕和渲染能力的信息。
(4).window对象中的一些常用方法:
confirm:显示确认对话框,包含“确认”,“取消”。
alert:显示消息框。
close:关闭当前窗体或HTML应用程序。
moveBy:将窗体的位置移动指定偏移量。
moveTo:将窗体的位置移动到指定位置。
open:打开新的窗体并装入给定URL文档。
setTimeout:经过指定毫秒值计算一个表达式。
setInterval:没经过指定毫秒值计算一个表达式。
clearTimeout:取消先前用setTimeout方法设置的超时事件。
clearInterval:取消先前用setInterval方法设置的时间间隔。
(5).常见事件:
5.1 onload:在浏览器完成对象的装载后立即触发。
例:window.onload = function(){
······
}
注:表示当整个页面DOM结构绘制完毕,页面是多有关联的文件必
须加载完毕。
5.2 onbeforeunload:在页面将要被卸载前触发。
5.3 onunload:在对象卸载前立即触发。
(6).浏览器的对像树:
1.navigator:浏览器对象。
2..Window:document文档对象:
links:链接对象< a >< / a >
archors锚对象
forms表单对象
images图片对象
frame框架对象
location位置对象:location = “xxx”.jsp
history历史对象
(7).Form表单对象:
1.访问表单的方式:document.forms[ n ]
document.表单名字
2.表单对象常用属性:
action <from action=”xxx”> 表单提交的目的地址
method <form method=”xxx”> 表单提交方式
name <form name=”xxx”> 表单名称
(8).window对象的常用方法:
8.1 alert( “信息” ):消息框
8.2 prompt( ‘提示信息’,默认值)
8.3 confirm( ):确认框
open( ):打开一个新窗口
close( ):关闭窗口。
(9).document对象:该对象将标记型文档进行封装,其作用是可以对标记型
文档进行操作。
9.1 .最常见的操作: 获取页面中的节点。
9.2 获取节点的方法:
(1).getElementById( ):通过标签的id属性值获取该标签的节点,返
回该标签节点对象。如果不存在这样的元素,
返回null。
注:该方法只能用于document对象。
(2).getElementsByName( ):查找有着给定name属性的所有元素,这
个方法返回一个节点集合,这个集合可以
当做一个数组来处理。该集合的length属
性等于当前文档里有着给定name属性的
所有元素的总个数。
例:var nodes = document.getElementByName( “ tname ” );
window.alert( nodes[ 0 ] );
(3).getElementByTagName( ):通过标签名获取节点,返回一个节点
集合,该集合可以当做一个数组来处
理,其length属性等于当前文档里有着
给定标签名的所有元素的总个数。
例:
var elements = document.getElementsByTagName( tagName );
var elements = element.getElementsByTagName(tagName );
注:该方法不必非得用在整个文档上,它可以用来在某个特定元素
的子节点当中寻找有着给定标签名的元素。
例:
var container = document.getElementsById( “ sid ” );
var elements = container.getElementsByTagName(“ 0 ”);
alert( elements.length );
9.3 节点的三个必备属性:
9.3.1 节点名称:nodeName,只是一个只读属性。
9.3.2 节点类型:nodeType,返回一个整数,这个数值代表着给定
节点的类型,只是个只读属性。该属性返回的整
数值对应着12种节点类型,常用的有三种。
9.3.3 节点值:nodeValue,返回给定节点的当前值(字符 串),该属
性是一个读写属性,但不能对元素节点的nodeValue
属性设置值,但可以为文本节点的nodeValue属性设
置一个值。
注:
(1).如果给定节点是一个属性节点,返回值是这个 属性的值。
(2).如果给定节点是一个文本节点,返回值是这个文本节点的内容。
(3).如果给定节点是一个元素节点,返回值是null。
9.4 常见的三种节点:
(1).标签型节点:类型1—— Node.ELEMENT_NODE
(2).属性节点:类型2.——Node.ATTRIBUTE_NODE
(3).文本节点:类型3.——Node.TEXT_NODE
注:标签型节点是没有值的,属性和文本节点是可以有值的。
8. 标签之间存在着层次关系:
window
|----
|----
|----
document
html
|-- head
|-- title
|-- base
|-- link
|-- meta
|-- style
|-- script
|-- body
|-- div
|-- form
|-- inpute
|-- select
|-- span
|-- a
|-- table
|-- tbody
|-- tr
|-- td
|-- th
|-- dl
|-- dt
|-- dd
注:
(1).过这个标签层次,可以形象的看做是一个树形结构,那么,我们也称标
记型档加载进内存的是一颗DOM树。
(2).这些标签以及标签的数据都是这颗树上的节点,这个节点也称为对象。
9. 节点
9.1 节点类型:
标签型节点:类型:1
属性节点:类型 2
文本类型节点:类型 3
注释型节点:类型 8
document: 类型 9
9.2 节点的关系:
9.2.1 父节点:parentNode,对应一个节点对象。
9.2.2 子节点:childNodes:直接子节点,返回的是一个节点对象数组。
9.2.3 兄弟节点:
上一个兄弟节点:previousSibling
下一个兄弟节点:nextSibling
注:
(1).标签之间存在空行时,会出现一个空白的文本节点(在IE中不会),但
是,当标签为行内标签如< span >时,则会出现空白文本节点“#text”,
为块标签时,不会出现空白文本节点。
(2).尽量少使用兄弟节点,因为在解析时,浏览器不同解析就不一致。
(3).获取节点可以通过节点的层次关系完成,也可以通过document对象
完成。
(4).获取事件源对象的两种方式:
1.通过event对象的srcElement属性。
2.将事件源对象通过this传入。
9.3节点操作:
(1).添加节点:
1.1 createTextNode:创建一个文本节点。
document.createTextNode( “ 内容 ” );
1.2 createElement:创建一个任意节点。
方式一:
var node = document.createElement( “ input ” );
node.type = “ button ”;
node.value = “ 一个新按钮 ”;
方式二:使用容器标签中的一个属性innerHTML,这个属性可以设置
html文本。
优点:只执行一次。
var onode = document.getElementById( “id_name” );
onode.innerHTML = “ < input type = ‘ button ‘
value= ‘ 有一个新按钮 ‘ / > ”;
(2).删除节点:
2.1 需求:将div_2节点删除。
例:
// 获取div_2的节点
var oDivNode = document.getElementById( “div_2” );
方式一:使用div节点的removeNode方法删除。
oDivNode.removeNode( true ); // 很少使用
方式二:使用removeChild方法删除子节点。
// 获取div_2的父节点,然后在用父节点的removeChild,将div_2
删除。
oDivNode.parentNode.removeChild( oDivNode );
2.2 删除节点:
replaceNode:替换当前对象。
replaceChild:替换子对象。
(3).克隆节点:cloneNode( )
var node1 = document.getElementById( “ id_name 1” );
var node3 = document.getElementById( “ id_name 3” );
var oCopyDiv_3 = node3.cloneNode( true );
node1.parentNode.replaceChild( oCopyDiv_3,node1 );
10. DOM属性:
(1).nodeName:文档里的每一个节点都有以下属性。
1.1 nodeName:一个字符串,其内容是给定节点的名字。
例:
var name = node.nodeName;
注:
1.1.1 如果节点是元素节点,nodeName返回这个元素的名称。
1.1.2 如果是属性节点,nodeName返回这个属性的名称。
1.1.3 如果是文本节点,nodeName返回一个内容为#text的字符串。
1.2 nodeName是一个只读属性。
(2). nodeValue:返回给定节点的当前值(字符串)
2.1 如果给定节点是一个属性节点,返回值是这个属性的值。
2.2 如果给点节点是一个文本节点,返回值是这个文本节点的内容。
2.3 如果给定节点是一个元素节点,返回值是null。
2.4 nodeValue是一个读 / 写属性,但不能对元素节点的nodeValue属性
设置值,但可以为文本节点的nodeValue属性设置一个值。
例:var li = document.getElementById(“ li ”);
if(li.firstChild.nodeType == 3){
li.firstChild.nodeValue = “你好!”;
}
(3).获取最后一个子节点:
3.1 lastChild:对应firstChild的一个属性。
3.2 nextString:返回一个给定节点的下一个兄弟节点。
3.3 parentNode:返回一个给定节点的父节点。
注:
3.3.1 parentNode属性返回的节点永远是一个元素节点,因为只有元素节点才能有包含子节点。
3.3.2 document节点木有父节点。
3.4 previousSibling:返回一个给定节点的上一个兄弟节点。
11.样式封装:将多个所需的样式进行封装,封装到选择器中,只要给不同的标
签加载不同的选择器就可以了。
做法:
(1).预定义一些样式,并封装到选择器中,一般用类选择器。
(2).在函数中传递类选择器名字。
(3).函数中的用node.className获取类选择器的名字。
12.DOM节点的常用操作:
(1).getElementsByName( ):查找给定name属性的所有元素,返回一个节点
数组。
(2).getElementsByTagName( ):查找元素节点,查找给定标签名的所有元素,
返回一个节点集合。
(3).setAttribute( ):设置属性节点。将给定元素节点添加一个新的属性值或改
变它的现有属性的值。
例:
element.setAttribute( attributeName,attributeValue );
注:
1.属性的名字和值必须以字符串的形式传递给此方法。
2.如果这个属性已经存在,它的值将被刷新。
3.如果不存在,setAttribute( )方法将先创建它再为其赋值。
(4).createElement( ):按照给定的标签名创建一个新的元素节点,方法只有一
个参数,将被创建的元素的名字是一个字符串。
例:var reference = document.createElement( element );
注:
1.方法的返回值是:一个指向新建节点的引用指针,返回值是一个元
素节点,所以它的nodeType属性值等于1.
2..新元素节点不会自动添加到文档里,新节点没有nodeParent属性,
它只是一个存在于JS上下文的对象。
例:
var pElement = document.createElement(“ p ”);
(5).createTextNode( ):创建一个包含着给定文本的新文本节点。这个方法的
返回值是一个指向新建文本节点的引用指针。
例:var textNode = document.createTextNode( text );
1.方法只有一个参数:新建文本节点所包含的文本字符串。
2.方法的返回值:是一个指向新建节点的引用指针,它是一个文本节点,
所以它的nodeType属性等于3。
3.新元素节点不会自动添加到文档里,新节点没有nodeParent属性。
例:
var pElementText = document.createElement(“ li ”);
var textElement = document.createTextNode(“ 南京 ”);
pElementText.appendChild(textElement);
(6).insertBefore( ):插入节点把一个给定节点插入到一个给定元素节点的给定
子节点的前面。
例:var reference = element.insertBefore( newNode,targetNode );
注:
1.节点newNode将被插入到元素节点element中并出现在节点
targetNode的前面。
2..节点targetNode必须是element元素的一个子节点。
3.该方法通常和createElement( )和createTextNode( )配合使用。
例:
// 获取父节点
var parentNose = document.getElementById(“city”);
// 获取子节点
var beijingNode = document.getElementById(“ beijing “ );
var wuhanNode = document.getElementById(“ wuhan “ );
// 插入
parentNode.insertBefore( wuhanNode,beijingNode );
(7).appendChild( ):为给定元素增加一个节点。
例:var newreference = element.appendChild( newChild );
// 给定子节点newChild将成为给定元素节点element的最后一个子
节点。
注:
1.方法的返回值是一个指向新增子节点的应用指针。
2.该方法通常与createElement( )和createTextNode( )配合使用。
3.新节点可以被追加给文档中的任何一个元素。
例:
var newliElement = document.createElement(“li”);
var textNode = document.createTextNode(“北京”);
newliElement.appendChild(textNode);
document.body.appendChild(newliElement);
var liElement = document.getElementByTagName(“li”);
var textValue = liElement[0].firstChild.nodeValue;
alert(textValue);
(8).自定义插入节点:insertAfter( )方法:
例:function insertAfter( newElement.targetElement ){
// 获取目标元素的父节点
var parentElement = targetElement.parentNode;
// 如果目标元素是最后一个元素,则新元素插入到目标元素后面
li( parentElement.lastChild == targetElement ) {
parentElement.appendChild( newElement );
} else {
//如果目标元素不是最后一个元素,则新元素插入到目标元
素的下一个兄弟节点的前面。
parentElement.insertBefore( newElement.targetElement.nextSibling ;)
}
}
(9).removeChild( ):从一个给定元素里删除一个子节点。
例:var reference = element.removeChild( node );
注:
1.返回值是一个指向已被删除的子节点的引用指针。
2.某个子节点被removeChild( )方法删除时,这个节点所包含的所有
子节点将同时被删除。
例:
var ulElement = document.getElementById( “city” );
var liElement = document.getElementById( “beijing” );
ulElement.removeChild( liElement );
3.如果想删除某个节点,但不知道它的父节点是哪一个,parentNode
属性可以帮忙。
例:var liElement = document.getElementById( “beijing” );
var parentElement = liElement.parentNode;
parentElement.removeChild( liElement );
(10)ChildNodes:返回一个数组,可以遍历节点数,这个数组由给定元素节
点的子节点构成,该属性是一个只读属性。
var nodeLisr = node.childNodes;
注:1.文本节点和属性节点都不可能在包含任何节点,所以它们的
ChildNodes属性永远会返回一个空数组。
2.如果想要知道某个元素有木有子节点,可以用hashChildNodes方
法。
3.如果想要知道某个元素有多少个子节点,可以用childNodes数组的
length属性。
(11).firstChild:该属性返回一个给定元素节点的第一个子节点,返回这个
节点对象的指针,该属性是一个只读属性。
var reference = node.firstChild;
注:
1.文本节点和属性节点都不可能包含任何节点,所以,它们的
firstChild属性永远会返回null。
2.某个元素的firstChild属性等价于这个元素的childNodes节点集合
中的第一个节点,
即:var reference = node.ChildNodes[ 0 ] ;
(12).获取最后一个子节点:
lastChild:对应firstChild的一个属性。
nextSibling:返回一个给定节点的下一个兄弟节点。
parentNode:返回一个给定节点的父节点。
注:
1.parentNode属性返回的节点永远是一个元素节点,因为只有元
素节点才有可能包含子节点。
2.Document节点木有父节点。
previousSibling:返回一个给定节点的上一个兄弟节点。
(13).innerHTML:该属性可以用来读,写某个给定元素里的HTML内容。
注:
浏览器几乎都支持该属性,但不是DOM标准的组成成分。
例:
< div id = “city”>< / div >
Var = divElement = document.getElementById( “city”);
divElement.innerHTML = “ < li value = ‘ wh ‘ id = ‘ wh’> 武汉</li>”
(14).replaceChild( ):把一个给定父元素里的一个子节点替换为另一个子节
点,返回值是一个指向已被替换的那个子节点的引用指
针。
var reference = element.replaceChild( newChild,oldChild );
注:如果被插入的子节点还有子节点,则那些子节点也被插入到目标节
点中。
(15).hasChildNodes( ):该方法用来检查一个元素是否有子节点,返回值是
true 或 false
var booleanValue = element.hasChildNodes();
注:
1.文本节点和属性节点不可能再包含任何子节点,所以对这两类节点
使用 hasChildNodes 方法的返回值永远是 false.
2.如果 hasChildNodes 方法的返回值是 false,
则 childNodes,firstChild,lastChild 将是空数组和空字符串。
(16).getAttribute():查找属性节点,返回一个给定元素的一个给定属性节点
的值。
var attributeValue = element.getAttribute(attributeName);
注:
1.给定属性的名字必须以字符串的形式传递给该方法。
2.给定属性的值将以字符串的形式返回,如果给定属性不存在,
getAttribute() 将返回一个空字符串.
3.通过属性获取属性节点:getAttributeNode(属性的名称)--Node
(17).setAttribute():设置属性节点,将给定元素节点添加一个新的属性值或改
变它的现有属性的值。
element.setAttribute(attributeName,attributeValue);
注:
1.属性的名字和值必须以字符串的形式传递给此方法。
2.如果这个属性已经存在,它的值将被刷新;
3.如果不存在,setAttribute()方法将先创建它再为其赋值。
(18).显示弹出窗口:
法一:
1.语法:value = window.showModalDialog( URL,para,features )
参数含义:
(1).URL:必选参数,用来指定对话框要显示的文档的URL。
(2).para:可选参数,用来向对话框传递参数,传递的参数类
型不限,包括数组等,对话框通过
window.dialogArguments来取得传递进来的参数。
(3).feature:可选参数,用来描述对话框的外观等信息,可以
使用一个或几个,用分号“;”隔开。
法二:window.opener :返回的是创建当前窗口的那个窗口的引用。
比如点击了a.htm上的一个链接而打开了b.htm,然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的text中,就可以写为:
window.opener.document.getElementById("name").value = "输入的数据";
(19).附录:
19.1 在逻辑运算中,0、""、false、null、 undefined、NaN均表
示false。
19.2 null,对象不存在 当前页面不存在id对象
例:
var ii= document.getElementById("id");
alert(ii); //null
19.3 undefined 声明的变量没有初始化或者对象属性,方法不存在
例:
var i;
alert(i);
if(i==undefined){
alert("dddddddddddddd");
}
对象属性,方法不存在
alert(document.oiji); // undefined
13.显示弹窗:
(1).方案一:
1.1 语法:
vReturnValue = window.showModalDialog(sURL,vArguments,sFeatures);
1.2 参数说明:
1.2.1 sURL:必选参数,用来指定对话框要显示的文档的URL。
1.2.2 vArguments:可选参数,用来向对话框传递参数。传递的参数
类型不限,包括数组等。对话框通过
window.dialogArguments来取得传进来的参数。
常用“window”作为这个参数,window代表当
前页面,所以接收window的页面可以利用这个
参数操作该页面。
1.2.3 sFeatures:可选参数,用来描述对话框的外观等信息,可以使
用一个或几个,用分号(“;”)隔开。(装饰)
格式:名称1:值1;名称2:值2
例:
<script> |
(2).方案二:window.opener
2.1 window.opener返回的是一个创建当前窗口的那个窗口的引用,
如:点击了1.html上的一个链接而打开2.html,然后我们打算在2.html
上输入一个值然后赋给1.html上的一个id味“name”的text中,
就可以写为:
window.opener.document.getElementById(“name”).value=“输入的数据”。
例:获取a1.html页面的应用 window.opener返回的是创建当前窗口的那
个窗口的引用。
function viewData( cid,cname ){
var sdata = window.opener;
sdata.document.getElementById(“cid”).value=cid;
sdata.document.getElementById(“cname”).value=cname;
window.close();
}
2.2 window.open(sURL,sName,sFeatures,bReplace):
2.2.1 sURLy:可选项,String类型。指定要被加载的HTML文档的
URL地址。假如没有指定值,则about:blank的新窗
口会被显示。
2.2.2 sName:指定打开的窗口的名字。
2.2.3 sFeatures:装饰窗口。