你的位置:首页 > Java教程

[Java教程]前端技术——DOM艺术


先知BOM,再知DOM


BOM


 

 

DOM Window DOM Navigator DOM Screen DOM History DOM Location 

 


DOM*



DOM:文档对象模型,文档可以是.DOM 和 htmlDOM是否有关系?

DOM(其实就是一组可以操作HTMLDOM文档格式 符合在DOM模型中每个元素 都会被解析为一个节点Node,而常用的节点类型又分为
  • 元素节点  Element

  • 属性节点  Attr

  • 文本节点  Text

  • 文档节点  Document

htmlDOM 和 DOM
文档类型htmlDOMDOM
针对性不同 主要针对.html文档主要针对.
技术支持 用JavaScript来开发html DOM比较合适一般用Java
   

说明:

  1. HTML DOM是对
  2. 进行 JavaScript 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