javascript Dom 编程
知识概要:
(1)Dom是什么?
(2)Dom结构模型
(3)XML DOM和 HTML DOM
(4)NODE接口的特性和方法
(5)DOM结点的常用属性
(6)DOM结点的常见操作
1.Dom是什么?
document object model 文档对象模型
是W3C织制订的一套用于访问XML和HTML文档的标准.允许脚本动态地访问和更新文档的内容、结构和样式.
分类
DOM Core
XML DOM
HTML DOM
XML介绍2.Dom结构模型
Dom树形结构图如下
XML DOM 定义了访问和处理 XML 文档的标准方法
HTML文档格式 符合XML语法标准,所以可以使用XML DOM API
在XML DOM每个元素 都会被解析为一个节点Node,而常用的节点类型又分为
元素节点 Element
属性节点 Attr
文本节点 Text
文档节点 Document
HTML DOM 定义了针对 HTML文档的对象,可以说是一套 更加适用于 JavaScript 技术开发 的API
HTML DOM是对XML DOM的扩展
进行 JavaScript DOM开发 可以同时使用 XML DOM和 HTML DOM
Node结点的特性和方法:
特性/方法
类型/返回类型
说 明
nodeName
String
节点的名字;根据节点的类型而定义
nodeValue
String
节点的值;根据节点的类型而定义
nodeType
Number
节点的类型常量值之一
ownerDocument
Document
指向这个节点所属的文档
firstChild
Node
指向在childNodes列表中的第一个节点
lastChild
Node
指向在childNodes列表中的最后一个节点
childNodes
NodeList
所有子节点的列表
parentNode
Node
返回一个给定节点的父节点。
previousSibling
Node
指向前一个兄弟节点;如果这个节点就是第一个兄弟节
点,那么该值为nullnextSibling
Node
指向后一个兄弟节点;如果这个节点就是最后一个兄弟节
点,那么该值为nullhasChildNodes()
Boolean
当childNodes包含一个或多个节点时,返回真
attributes
NamedNodeMap
包含了代表一个元素的特性的Attr对象;仅用于Element节点
appendChild(node)
Node
将node添加到childNodes的末尾
removeChild(node)
Node
从childNodes中删除node
replaceChild(newnode, oldnode)
Node
将childNodes中的oldnode替换成newnode
insertBefore(newnode, refnode)
Node
在childNodes中的refnode之前插入newnode
DOM 节点常用属性
nodeName
如果节点是元素节点,nodeName返回这个元素的名称
如果是属性节点,nodeName返回这个属性的名称
如果是文本节点,nodeName返回一个内容为#text 的字符串
nodeType
Node.ELEMENT_NODE ---1 -- 元素节点
Node.ATTRIBUTE_NODE ---2 -- 属性节点
Node.TEXT_NODE ---3 -- 文本节点
nodeValue
如果给定节点是一个属性节点,返回值是这个属性的值
如果给定节点是一个文本节点,返回值是这个文本节点内容
如果给定节点是一个元素节点,返回值是 null
DOM 明天休息
DOm取值.html
取li的文本值
- 北京
海淀
奥运- 上海
遍历option文本
得到所有的option的文本
DOM节点常见操作
DOM 获取节点
DOM 改变节点
DOM 删除节点
DOM 替换节点
DOM 创建节点
DOM 添加节点
结点替换:
结点替换
- 北京
- 湖南
- 山东
- 打
灰机
- 抓泥鳅
- 斗地主
添加结点:
New Document
表格操作:
表格操作
姓名: Email: 年龄:
姓名 年龄 操作
全选/反选/全不选 请选择你的爱好:
全选/全不选
足球 篮球 游泳 唱歌