DOM对HTML元素访问操作
DOM是文档对象模型(Document Object Model)的简称。当网页加载时,可以将结构化文档在内存中转换成对象。
并不是一种技术,而是一种访问结构化文档的一种思想。借助DOM模型,我们可以对DOM树进行修改、删除、新增等操作,让结构化文档动态化。
DOM模型中的节点——文档可以说是由节点构成的集合。在DOM模型中有3种节点:
- 元素节点:各种标签就是这些元素节点的名称,例如<p>、<ul>等
- 文本节点:文本节点总是被包含在元素节点的内部
- 属性节点:一般用来修饰元素节点就称之为属性节点。
DOM访问HTML元素的方式
为了动态地修改HTML元素,须先访问HTML元素。DOM主要提供了两种方式来访问HTML元素:
- 根据ID访问HTML元素:通过document对象调用getElementById()方法来查找具有唯一id属性值的元素。
- 利用节点关系访问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属性值 |