JavaScript学习之DOM编程

DOM编程

动态；改变文档(DOM树)

Node属性

名称	返回值	作用
documentElement	节点	获取文档的根节点
attributes	数组	如是Element,以nameNodeMap返回属性
childNodes	节点数组	以Node[]形式存放子节点
firstChild	节点	获取第一个子节点，没有返回null
lastChild	节点	获取最后一个子节点
nextSibling	节点	获取后一个兄弟节点
previousSibling	节点	获取前一个兄弟节点
parentNode	节点	获取父节点
nodeType	整型	获取节点类型：1为元素，2为属性，3为文本
nodeName	字符串	获取节点名称：如果节点为元素，返回元素名
nodeValue	字符串	获取节点值

Node 节点类型

接口	nodeType常量	值	备注
Element	Node.ELEMENT_NODE	1	元素节点
Attr	Node.ATTRIBUTE _NODE	2	节点属性
Text	Node.TEXT_NODE	3	文本节点
Comment	Node.COMMENT_NODE	8	注释文本
Document	Node.DOCUMENT_NODE	9	document
DocumentFragment	Node.DOCUMENT_FRAGMENT _NODE	11	Document片段

Node常用方法

名称	作用	参数
appendChild	追加子节点	子节点对象
setAttribute	设置属性的值	属性名， 值
removeChild	删除子节点	子节点对象
removeAttribute	删除属性	属性名称
replaceChild	替换子节点	新节点，老节点
createElement	创建元素节点	元素名称
createTextNode	创建文本节点	文本内容
insertBefore	把新节点插入到old子节点前面。 父节点. insertBefore(节点，old子节点)	节点对象
cloneNode()	复制节点	是否包括子节点
hasChildNodes()	是否有子节点	无

例子：

DOM模拟省市联动

Form表单验证

转载于:https://my.oschina.net/u/3311443/blog/848786