DOM-----文档对象模型笔记
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：装饰窗口。
