黑马程序员--DOM编程基础知识学习笔记

<a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IO开发S</a>、<a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！

 

一、DOM编程

a)       基本概念

Dom(document object model)文档对象模型。

其实就是将一些标记型的文档以及文档中的内容当成对象。

为什么要将这些文档以及其中的标签封装成对象呢？

因为可以在对象中定义其属性和行为，可以方便操作这些对象。

b) DOM在封装标记型文档时，有三层模型：

DOM1:针对html文档

DOM2:针对xhtml文档

DMO3:针对xhml文档

c) html，xhtml，xml：这些都是标记型文档。

DHTML：是多个技术的综合体。叫做动态的html。

    html：负责将数据进行标签的封装。

    css：负责标签的样式。

    dom：负责将标签以及标签中的数据封装成对象。

        javascript：负责通过程序设计方式来操作这些对象。

d)标签之间存在这层次关系：

Window

    |--document

html

     |---head

    |--title

    |-base

    |--link

    |--meta

    |--style

    script

     |---body

    |--div

    |--form

         |-input

         |--select

    |--span

    |--a

    |--table

         |--tbody

         |--tr

        |--td

        |--th

    |--dl

       |--dt

       |--dd

通过这个标签层次，可以形象的看做是一个属性结构。那么也称标记型文档，加载进内存的是一颗DOM树。

这些标签以及标签中的数据都是这棵树上的节点。（一个节点可能有很多子节点，但只能有一个父节点）

当标记型文档加载进内存，那么内存中就有了一个对应的DOM树。

DOM对于标记型文档的解析有一个弊端就是文档过大，相对消耗资源。

对于大型文档可以使用SAX这种方式解析。

 

e)节点类型：

标签型节点：类型：1

属性节点：类型：2

文本型节点：类型：3

注释型节点：类型：8

document：类型：9

 

 

 

注意：标签之间存在空行时，会出现一个空白的文本节点，在获取节点时一定要注意。

节点的关系：

父节点：parentNode

子节点：childNodes:直接子节点。返回的是一个节点对象数组。

兄弟节点：

    上一个兄弟节点：previousSibling

    下一个兄弟节点：nextSibling

 

-----------------------------

获取节点可以通过节点的层次关系完成，

 

也可以通过document对象完成。

 

getElementById：通过id属性值获取对应的节点对象。如果有多个id值相同。获取的是第一个id所属对象。   尽量保证ID唯一性。返回的是一个对象。

 

getElementsByName：通过标签的name属性值获取对象。返回的一堆对象。其实是一个对象数组。

 

getElementsByTagName。既没有id也没有name时，可以通过标签名来获取节点对象。返回的是一堆对象。  其实是一个对象数组。大多数容器型标签都具备该方法。

利用节点关系访问HTML元素的属性和方法总结如下：

Node parentNode：返回当前节点的父节点。

Node previousSibling：返回当前节点的前一个兄弟节点。

Node netxSibling：返回当前节点的后一个兄弟节点。

Node[] childNodes：返回当前节点的所以子节点。

Node firstChild：返回当前节点的第一个子节点。

Node lastChild：返回当前节点的最后一个子节点。----以上全是属性

Node document.getElementById(idVal)：返回文档中中id属性值为idVal的HTML元素。

Node[] document.getElementByTagName(tagName)：返回标签名称为“tagName”的所有节点

Node[] document.getElementByName(name):返回Name属性为“name”的所有节点。

getAttribute（“属性名”）：用来获取属性的值。

setAttribute（“属性名”，“属性值”）：用来设置属性的值。

 

二、HTML元素的常用属性和方法

a)       表单元素

                     i.              action：返回该表单的action属性值。该属性值制定表当的提交地址。

                  ii.              elements：返回表单内全部表单控件所组成的数组。

              iii.              method：返回表单的method属性。

                  iv.              reset（）：重设表单，将所有表单元素的值设置为初始值。

                     v.              submit（）：提交表单。

b)       列表框、下来菜单（HTMLSelectElement）

                     i.              form：返回列表框、下拉菜单所在的表单对象。

                  ii.              length：返回列表框、下拉菜单的选项个数。

              iii.              options:返回列表框、下拉菜单里所有选项组成的数组。

                  iv.              select.options[index]:返回列表框、下拉菜单的第index+1各选项。

                     v.              defaultSelected：返回该选项默认是否被选中。

                  vi.              selected：返回该选项是否被选中。

              vii.              text：返回该选项呈现的文本。

           viii.              value：返回每个选项的value属性。

c)       表格

                     i.              Table对象

1.       rows[]：返回包含表格中所有行的第一行。

2.       insertRow（index）：在表格中插入一行。
index表示新行将被插入到index所在行之前。若index等于表格中的行数，则新行被插入到表格的末尾。若index等于0，则新行被插入到表格的第一行，因此index不能小于0或大于表格中的行数。

3.       deleteRow（index）：从表格中删除行。

                  ii.              TableRow对象

1.       cells[]：返回包含行中所有单元格的一个数组。

2.       rowIndex：返回该行在表中的位置。

a)       insertCell（index）：在一行中的指定位置插入一个空的<td>标签。
如果index等于行中的单元格数，则在末尾添加，如果等于0，则在开始位置添加。

3.       deleteCell（index）：删除行中指定的单元格。

              iii.              TableCell对象

1.       cellIndex：返回单元格在某行单元格集合中的位置。

2.       innerHTML：设置或返回单元格的开始标签和结束标签之间的HTML

3.       align：设置或返回单元格内部数据的水平排列方式。

4.       className：设置或返回元素的class属性。

                  iv.              document对象中的创建和删除节点的方法

1.       document.createElement(Tag)：创建Tag标签对应的节点。

2.       Node cloneNode（boolean deep）：复制当前节点。当deep为true时，表示在复制当前节点的同时，复制该节点的全部后代节点。false表示仅复制当前节点。

3.       添加节点：当一个节点创建成功后，一定要将该节点添加到DOM中才行。对于普通节点，可采用Node对象的如下方法来添加节点：

a)       appendChild（Node newNode）：将newNode添加成当前节点的最后一个子节点。

b)       insertBefore（Node newNode，Node refNode）：在refNode节点之前插入newNode节点。

c)       replaceChild（Node newNode，Node oldNode）：将oldNode节点替换成newNode节点

d)       write（）：向document对象中输出一条字符串，输完不换行

e)       writeln（）：输完后换行。

4.       删除节点：删除节点通常借助于父节点，Node对象提供了如下方法来删除子节点。
removeChild（oldNode）：删除oldNode子节点。
从父节点中删除该子节点后，该子节点代表的内容也会消失。

三、window对象的常用方法和属性
window对象是整个javascript脚本运行的顶层对象。在定义一个全局变量时，该变量时作为window对象的一个属性存在的。
常用方法：

a)       alert（）：只有一个参数，仅显示警告框的消息，无返回值，不能对脚本产生任何改变

b)       prompt（）：有两个参数，是输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击确定按钮则返回用户输入的值。

c)       confirm（）：只有一个参数，是确认对话框，显示提示框的消息，单击确定返回true，单击取消返回false。

d)       close（）：关闭窗口。

e)       open（）：打开窗口，用于装载新的URL所指向的地址，并可指定一系列的新属性，包括隐藏菜单等。

f)       支持定时器的方法：setTimeout（“code”,interval）:用于在制定的“interval”毫秒后调用函数“code”---》clearTimeout：删除

g)       setInterval（“code”,interval）：按照指定的周期“interval”重复调用函数“code”。-----》clearInteval（）：删除定时器。  
window对象常用属性：

a)  closed:返回一个Boolean值用于判断该窗口是否处于关闭状态。

b)  document:返回该窗口内装载的HTML文档。

c)  history：返回该窗口的浏览历史。

d)  location：返回该窗口装载的HTML文档的URL。

e） screen：有关客户端的屏幕和现实性能的信息。

    window对象常用事件：

a)       onload：一个页面或一幅图片完成加载。

b)       onmouseover：鼠标移到某元素之上。

c)       onclick：鼠标单击某个对象。

d)       onkeydown：某个键盘按键被按下。

e)       onchange：域的内容被改变

 

四、HTML文档控件支持的事件及描述

a)       onclick：单击某个标签时触发。大多数可现实的标签都支持

b)       ondbclick：双击某个元素触发大多数可现实的标签都支持

c)       onload：某个对象对装载完毕时触发。<body>、<iframe>、<img>

d)       onabort：图片加载被中断。<img>

e)       onerror：图片加载出错时触发。<img>

f)       onblur：当某个HTML元素失去焦点时触发该事件，通常意味着用户已经激活了另一个HTML元素，通常对应用户单击了另一个HTML元素，或使用Tab切换了焦点。
<button>、<input>、<label>、<select>、<textarea>、<body>都支持

g)       onfocus:当某个标签得到焦点时触发，通常是用户单击，或者使用Tab建切换焦点
<button>、<input>、<label>、<select>、<textarea>、<body>都支持

h)       onchange：当表单域的值被修改时触发。<input>、<select>、<textarea>支持

i)       onkeydown：当焦点在当前元素上面，按下键盘的某个键时触发。表单控件和<body>标签支持

j)       onkeypress：当焦点在当前元素上面，单击键盘的某个键时触发。表单控件和<body>标签支持

k)       onkeyup：当焦点在当前元素上面，并且松开了键盘的某个键时触发，表单控件和<body>标签支持

l)       onmousedown：当焦点停留在当前元素上面，并且按下数遍键时触发。

m)       onmousemove：当焦点停留在当前元素上面，并且鼠标在当前元素上面移动时触发。

n)       onmouseout：当鼠标移出某个元素时触发，及鼠标一开始停留在元素上面。

o)       onmouseover：当鼠标移动到该元素上面时触发。

p)       onmouseup：当焦点在当前元素上面，并且松开鼠标键时触发。
从L）到p）大多数可现实的标签都支持。

q)       onreset：当前用户重置表单时触发。<form>

r)       onsubmit：当表单提交时触发，通常通过单击表单的“提交”按钮触发。<form>

s)       onunload：当某个对象从窗口或框架中卸载完毕时触发。<body>、<iframe>、<img>

t)       onselect：当用户选择文本框或文本域的某段文字时触发。<input>、<textarea>

u)       onresize：当窗口大小被改变时触发。<body><iframe>

 <a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS开发</a>、<a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！

详细请查看：<ahref="http://edu.csdn.net" target="blank">http://edu.csdn.net</a>