DOM操作总结

一、DOM初识和常用属性和方法：

DOM是文档对象模型的简称。当网页加载时，可以将结构化文档在内存中转换成对象的树。

DOM节点对象的分类:元素节点，属性节点，文本节点。

• 元素节点：各种标签就是这些元素节点的名称，例如段落标签，列表标签等。
• 文本节点：文本节点总是被包含在元素节点的内部。
• 属性节点：一般用来修饰元素节点就称之为属性节点。

节点常用属性和方法如下：

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

举例代码如下：

	
	
	


  

  	
zhangsan
  	
lisi
  	
wangwu
  	
zhaoliu
  	
xiaoqiang
  	
chenhao
  
  
  
    
  
  
  

 示例：

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

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

举例代码如下：

	
	


	

		

		

		
			上海
			南京
		

		
		
		
		
	

示例：

三、DOM访问列表框、下拉菜单的常用属性和方法：

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

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

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

举例代码如下：

	
	


	
		北京
		上海
		天津
		南京
		深圳
		武汉
	

	
	
	
	

示例：

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

元素组成的数组

caption	返回表格的标题对象
rows	返回该表格里的所有表格行
tbodies	返回该表格里所有
tfoot	返回该表格里所有元素
thead	返回该表格里所有元素

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

cells	返回该表格行内所有的单元格组成的数组
rowIndex	返回该表格行在表格内的索引值
sectionRowIndex	返回该表格行在其所在元素(tbody、thead等元素)的索引值

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

cellIndex

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

举例代码如下：

	
	


    

    	
海通科技课程
    	

    		
C
    		
C++
    	
    	

    		
LSD
    		
ARM
    	
    	

    		
J2EE
    		
Android
    	
    
	
	
	
	

	设置指定单元格的值：第行,
	第列的值为,
	
	

示例：

五、DOM节点的增删改操作：

• 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子节点删除

  举例代码和示例请参考博文《实例实现DOM节点的添加、复制，替换和删除》。

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

       创建选项除了使用前面所示的createElement方法之外，还可以使用专门的构造器来构造一个选项出来。语法如下：

new Option(text,value,defaultSelected,selected)

 该构造器有4个参数，说明如下：

text	该选项的文本、即该选项所呈现的"内容"
value	选中该选项的值
defaultSelected	设置默认是否显示该选项
selected	设置该选项是否被选中

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

  直接为的指定选项赋值即可。

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

删除列表框或下拉菜单选项的方法：

•    直接使用列表框或下拉菜单对象.remove(index)方法删除指定选项
•    直接将指定选项赋值为null

举例代码如下：

示例：

七、DOM动态添加删除表格内容所使用到的常用方法：

 

insertRow(index)	在指定索引位置插入一行
createCaption()	为该表格创建标题
createTFoot()	为该表格创建元素，假如已存在就返回现有的
createTHead()	为该表格创建元素，假如已存在就返回现有的
deleteRow(index)	删除表格中index索引处的行
deleteCaption()	删除表格标题
deleteTFoot()	从表格删除tFoot元素及其内容
deleteTHead()	从表格删除tHead元素及其内容

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

insertCell(index)	在index处创建一个单元格，返回新创建的单元格
deleteCell(index)	删除某行在index索引处的单元格

举例代码如下：

示例：