文档对象模型(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)