[理学]PHP教程5.ppt

JAVASCRIPT HTML DOM 对象 除了内置的 JavaScript 对象以外，你还可以使用 JavaScript 访问并处理所有的 HTML DOM 对象 HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。 HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。 通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。 HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。 HTML 文档中的每个成分都是一个节点 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点 一棵节点树中的 所有节点彼此 都是有关系的 每当浏览器加载当前的html文档，html文档其中的每一个标签都被翻译为HTMLElement以构建装饰树的文件对象模型（Document Object Model，DOM）。你可以在浏览器的全局空间中找到一个称为document的变量，那个document就是DOM树的对象。document记忆了当页面加载完毕后而形成的每一份装饰元素引用。 HTML DOM 访问节点方法 通过使用 getElementById() 和 getElementsByTagName() 方法 通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性 有两种特殊的文档属性可用来访问根节点 document.documentElement:第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点 document.body:第二个属性是对 HTML 页面的特殊扩展，提供了对 body 标签的直接访问。 节点访问 getElementById() 语法 document.getElementById(ID); getElementsByTagName() 语法 document.getElementsByTagName(标签名称); 例子: document.getElementsByTagName(p); document.getElementById(maindiv).getElementsByTagName(p); var x=document.getElementsByTagName(p); for (var i=0;ix.length;i++) { // do something with each paragraph } 节点访问 parentNode、firstChild以及lastChild table tr tdJohn/td tdDoe/td tdAlaska/td /tr /table 访问某个元素的文本: var text=x.firstChild.nodeValue; parentNode 属性常被用来改变文档的结构: var x=document.getElementById(maindiv); x.parentNode.removeChild(x); HTML DOM 节点信息 nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。 每个节点都拥有包含着关于节点某些信息的属性 nodeName（节点名称） nodeValue（节点值） nodeType（节点类型） innerHTML属性 该节点包含的HTML文本信息 节点属性访问 节点属性访问 节点.属性 例如：document.getElementById(myAnchor).href= 访问设置CSS属性 节点.style.css属性 document.getElementById(testId).style.display = none ; html head script type=text/javascript function ChangeColor() { document.body.bgColor=yellow } /script /head body onclick=ChangeColor() Click on this document! /body /html 例子 Ext core Ext Core是一款具有多项功能的轻型Ja