DOM访问HTML元素的方式，DOM访问表单控件的常用属性和方法，DOM访问列表框、下拉菜单的常用属性，DOM访问表格子元素的常用属性和方法，DOM对HTML元素的增删改操作

DOM访问HTML元素的方式

为了动态地修改HTML元素，须先访问HTML元素。DOM主要提供了两种方式来访问HTML元素：

1. 根据ID访问HTML元素：通过document对象调用getElementById()方法来查找具有唯一id属性值的元素。
2. 利用节点关系访问HTML元素。常用的属性和方法如下：

parentNode	返回当前节点的父节点
previousSibling	返回当前节点的前一个兄弟节点
nextSibling	返回当前节点的后一个兄弟节点
childNodes	返回当前节点的所有子节点
firstChild	返回当前节点的第一个子节点
lastChild	返回当前节点的最后一个子节点
getElementsByTagName(tagName)	返回当前节点的具有指定标签名的所有子节点

 

DOM访问表单控件的常用属性和方法如下：

action	返回该表单的提交地址
elements	返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件。
length	返回表单内表单域的个数
method	返回表单内的method属性，主要有get和post两个值
target	确定提交表单时的结果窗口，主要有_self、_blank、_top等
reset()、submit()	重置表单和确定表单方法

 

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

.elements[index]	返回该表单中第index个表单控件
.elements[elementName]	返回表单内id或name为elementName的表单控件
.elementName	返回表单内id或name为elementName的表单控件

 

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

form	返回列表框、下拉菜单所在的表单对象
length	返回列表框、下拉菜单的选项个数
options	返回列表框、下拉菜单里所有选项组成的数组
selectedIndex	返回下拉列表中选中选项的索引
type	返回下拉列表的类型，多选的话返回select-multiple，单选返回select-one

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

defaultSelected	返回该选项默认是否被选中
index	返回该选项在列表框、下拉菜单中的索引
selected	返回该选项是否被选中
text	返回该选项呈现的文本
value	返回该选项的value属性值

 

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

caption	返回表格的标题对象
rows	返回该表格里的所有表格行(数组)

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

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

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

cellIndex

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

 

DOM对HTML元素的增删改操作

DOM创建节点的方法：

document.createElement(Tag)，Tag必须是合法的HTML元素

DOM复制节点的方法：

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

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

appendChild(newNode)	将newNode添加成当前节点的最后一个子节点
insertBefore(newNode,refNode)	将refNode节点之前插入newNode节点
replaceChild(newNode,oldNode)	将oldNode节点替换成newNode节点
removeChild(oldNode)	将oldNode子节点删除