前端技术——DOM艺术

来源：互联网发布：管家婆软件安装步骤编辑：程序博客网时间：2024/04/29 12:07

先知BOM,再知DOM

BOM <a href="#">BOM</a>

DOM^{* <a href="#">DOM</a>}

javaScript中的DOM操作
- 　　
jQuery中的DOM操作
- 　　
java中的DOM操作
-

基于JavaScript的DOM操作

DOM：文档对象模型，文档可以是.xml .html,那么 xml^DOM 和 html^DOM是否有关系？

XML^DOM（其实就是一组可以操作xml文档的api说明）定义了访问和处理 XML 文档的标准方法
HTML^DOM文档格式符合XML语法标准，所以可以使用XML DOM API
在^DOM模型中每个元素都会被解析为一个节点Node，而常用的节点类型又分为
元素节点 Element
属性节点 Attr
文本节点 Text
文档节点 Document
html^DOM 和 xml^DOM文档类型html^DOMxml^DOM针对性不同　主要针对.html文档主要针对.xml文档技术支持　用JavaScript来开发html DOM比较合适一般用Java
说明：
HTML DOM是对XML DOM的扩展
进行 JavaScript DOM开发时可以同时使用 XML DOM和 HTML DOM

（Document对象）Node-（Element|Test|Attribute对象）Node-

　　每个载入浏览器的 HTML 文档都会成为 Document 对象

•常用属性

　　–all[] 提供对文档中所有 HTML 元素的访问 FF不支持

　　–forms[]返回对文档中所有 Form 对象引用

　　–body 提供对 <body> 元素的直接访问

• 常用方法

　　–getElementById()：返回对拥有指定 id 的第一个对象的引用

　　–getElementsByName()：返回带有指定名称的对象集合

　　–getElementsByTagName()：返回带有指定标签名的对象集合

　　–write()向文档写 HTML 表达式或 JavaScript 代码

（Document对象）Node-（Element|Test|Attribute对象）Node-

常用属性

•nodeName

　　–如果是元素节点，nodeName返回这个元素的名称

　　–如果是属性节点，nodeName返回这个属性的名称

　　–如果是文本节点，nodeName返回一个内容为#text 的字符串

•nodeType

　　–Node.ELEMENT_NODE --->-- 元素节点

　　–Node.ATTRIBUTE_NODE --->-- 属性节点

　　–Node.TEXT_NODE --->-- 文本节点

•nodeValue

　　–如果给定节点是一个属性节点，返回值是这个属性的值

　　–如果给定节点是一个文本节点，返回值是这个文本节点内容

　　–如果给定节点是一个元素节点，返回值是 null

常见操作：增删改查

　　•DOM 获取节点

　　•DOM 改变节点

　　•DOM 删除节点

　　•DOM 替换节点

　　•DOM 创建节点

　　•DOM 添加节点

基于JavaScript的DOM操作，操作节点对象时，事件的处理是很有必要的，如果为DOM操作提供事件处理，会很有乐趣

　　•鼠标移动事件：mousemove | mouseout | mouseover

　　•鼠标点击事件：click | dblclick | mousedown | mouseup

　　•加载与卸载事件：load | unload

　　•聚焦与离焦事件 : focus | blur

　　•键盘事件 : keydown | keyup | keypress

　　•提交与重置事件 : submit | reset

　　•选择与改变事件： select | change

基于jQuery的DOM操作

选择器（如果要用jQuery实现DOM的操作，那么必须依赖于选择器）

基本选择器
层次选择器
过滤选择器
- 基本过滤选择器
- 内容过滤选择器
- 属性过滤选择器
- 子元素过滤选择器
- 表单对象属性过滤选择器
- 表单选择器

操作DOM

0 0