DOM

108 阅读3分钟

文档对象模型(Document Object Model)--当网页加载时,可以将结构化文档在内存中转换成对象的树。



DOM并不是一种技术,而是一种访问结构化文档的一种思想。

DOM模型中的节点--文档可以说是由节点构成的集合。

元素节点:各种标签就是这些元素节点的名称,如<p>、<ul>等

文本节点:文本节点总是被包含在元素节点的内部

属性节点:一般用来修饰元素节点就称之为属性节点

DOM对HTML元素访问操作:

1、document.getElementById()

2、利用节点关系访问HTML元素:

parentNode 、 previousSibling-->当前节点的前一个兄弟节点

nextSibling-->后一个兄弟节点

childNodes 、 firstChild 、lastChild

getElementsByTagName(tagName )-->返回当前节点的具有指定标签名的所有子节点

DOM访问表单控件的常用属性和方法:

action 返回该表单的提交地址

elements 返回表单内全部表单控件所组成的数组,通过数组可以访问表单内的任何表单控件

length 返回表单内表单域的个数

method 返回表单内的method属性,主要有get和post两个值

target 确定提交表单时的结果窗口,主要有_self、_blank、_top 等

reset()、submit() 重置表单和确定表单方法

在elements返回的数组中访问具体的表单控件语法如下:

elements[index]、elements[elementName]、elementName

DOM访问列表框、下拉菜单的常用属性如下

form:返回列表框、下拉菜单所在的表单对象

length:返回列表框、下拉菜单的选项个数

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

selectedIndex:返回下拉列表中选中选项的索引

type: 返回下拉列表的类型,多选的话返回select-multiple,单选返回select-one

使用options[index]返回具体选项所对应的常用属性:

defaultSelected:返回该选项默认是否被选中

index:该选项在列表、下拉菜单中的索引

selected:该选项是否被选中

text:该选项呈现的文本

value:该选项的value属性值

DOM访问表格子元素的常用属性和方法:

caption:返回表格的标题

rows:该表格里所有表格行

tbodies:返回该表格里所有<tbody.../>元素组成的数组

tfoot:返回该表格里所有<tfoot.../>元素

thead: 返回该表格里所有<thead.../>元素

通过rows[index]返回表格指定行所对应的属性:

cells: 该表格行内所有的单元格组成的数组

rowIndex:返回该表格行在表格内的索引值

sectionRowIndex:该表格行在其所在元素(tbody,thead等元素)的索引值

通过cells[index]返回表格指定的列所对应的属性:

cellIndex:返回该单元格在表格行内的索引值


DOM对HTML元素的增删改操作:

DOM创建节点:document.createElement(Tag)

复制节点:clomeNode(boolean deep),当deep为true时,表示复制当前节点以及当前节点的全部后代节点。为false只复制当前节点。

DOM添加、删除节点的方法:

appendChild(newNode)、insertBefore(newNode,refNode)、replaceChild(newNode, oldNode)、removeChild(oldNode)

DOM为列表框、下拉菜单添加选项的方式:

创建选项除了用前面的createElement方法之外,还可以用new Option(text, value, defaultSelected, selected)

四个参数分别表示:text 该选项的文本,即该选项所呈现的内容;value 选中该选项的值;

defaultSelected 设置默认是否显示该选项;selected 设置该选项当前是否被选中。

添加创建好的选项至列表框或下拉菜单的方式:

直接为<select .../>的指定选项赋值。

列表框活下拉菜单对象.options[i] = 创建好的option对象

删除列表框、下拉菜单的选项的方法:

直接使用列表框活下拉菜单对象.remove(index)

对像.options[index] = null

DOM 动态添加删除表格内容所用的方法:

insertRow(index)、createCaption()、createTFoot()、createTHead()、deleteRow(index)、

deleteCaption()、deleteTFoot()、deleteThead()

给表格行创建、删除单元格的方法:

insertCell(index)、deleteCell(index)