JavaScript 客户端JavaScript之脚本化文档

2021-12-13 16:06:40

客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序，脚本化Web页面的内容正是JavaScript存在的理由。

一个文档对象模型或者说DOM就是一个API，它定义了如何访问组成一个文档的对象。

动态文档内容

document.write()

只能在当前文档下在解析时使用wirte()向其输出HTML代码。（只能在顶层代码中调用，因为这些脚本的执行是解析过程的一部分）

如果把一个document.write()调用放入到一个事件句柄函数中，将会覆盖当和它所包含的脚本。所有的HTML中的内容会被覆盖。

把Script尽量放在HTML页面尾部，有助于性能提高，会优先下载前面的HTML页面内容，再下载Script运行。

也可以使用write()方法结合document对象的open()方法和close()方法，来在其他的窗口或帧中创建一个全新的文档，可以把文档

写入另一个窗口或帖，这在多窗口或多帧的网站中非常有用。

要创建一个新文档，首先需要调用document对象的open()方法，然后多次调用write()方法在文档中写入内容，最后调用document对象的close()方法以说明创建过程结束了，最后一步非常重要，如果忘记了关闭文档，浏览就不能制止它所显示的文档装载动画。

而且，浏览器可以将写入的HTML缓存起来，这样在调用close()地结束文档之前，缓存输出不会显示出来。

与必须的close()调用不同，open()方法的调用是可选的。如果调用一个已经闭关了的文档的write()方法，

JavaScript会隐式地打开一个新的HTML文档，就像已经调用过open()方法一样。这就解释了在同一文档中从事件句柄调用

document.write()时会发生什么，即JavaScript会打开一个新文档，但是在这个过程中，当前文档（以及它的内容，包括脚本、

事件句柄）就被丢弃了，作为一条经验，一个文档绝不应该从事件句柄中调用它自己的write()方法。

两点注意：

write()可以具有多个参数，用来一起向document中写入内容，相当于字符串拼接

存在writeln()

 <body>

     <input type="button" value="打开一个新窗口" id="bt1"/>

 </body>

 window.onload = function () {

     var btn = document.getElementById("bt1");

     btn.onclick = function () {

         //var o = window.open("test.aspx");

        var o = window.open();

         var doc = o.document;

         doc.open();

         doc.write("this  ");//会覆盖原有页面的内容

         doc.write("  is");

         doc.write("  a");

         doc.write("  test");

         doc.close();

     }

 }

Document属性：以上介绍的三个函数是DOM的遗留方法，以下为遗留属性：

bgColor

domain

lastModified

location

referrer(文档的URL，包含把浏览器带到当前文档的链接)

title 位于 title之间的文本

URL 装载文档的URL

 console.log("document.bgColor:" + document.bgColor + "\ndocument.cookie:" + document.cookie + "\n");

 console.log("document.domain:" + document.domain + "\ndocument.lastModified:" + document.lastModified + "\n");

 console.log("document.location:" + document.location + "\ndocument.referrer:" + document.referrer + "\n");

 console.log("document.URL:" + document.URL);

 下面为输出：

 document.bgColor:

 document.cookie:

 document.domain:localhost

 document.lastModified:03/25/2015 21:36:48

 document.location:http://localhost:1344/default.aspx

 document.referrer:

 document.URL:http://localhost:1344/default.aspx"

命名的Document对象，

可以直接访问如：

document.form1.name2

 <form name="form1">

     <input type="button" name="fbtn" value="打开一个新窗口" id="bt1"/>

 </form>

 document.form1.name2

 window.onload = function () {

     document.form1.fbtn.onclick = function () {

         //var o = window.open("test.aspx");

         var o = window.open()

         var doc = o.document;

         doc.open();

         doc.write("this  ");

         doc.write("  is");

         doc.write("  a");

         doc.write("  test");

         doc.close();

     }

 }

Document对象上的事件句柄

事件句柄是由HTML元素onclick和onmouseover等属性定义的。

以上介绍的都是0级DOM提供的API

以下介绍的为标准化的 W3C DOM

把文档表示为树

HTML DOM 树

JavaScript 客户端JavaScript之脚本化文档

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

节点父、子和同胞

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

可通过节点的 innerHTML 属性来访问文本节点的值。

DOM树结构表现为不同种类的Node对象的一棵树。Node接口定义了遍历和操作树的属性和方法。

注：DOM标准定义了接口，没有定义类。

Node对象的childNodes属性返回节点的孩子的一个列表，并用firstChild、lastChild、nextSibling、perviousSibling和parentNode

属性提供了遍历节点的树的一种方法。像appendChild()、removeChild()、replaceChild()和insertBefore这样的方法能够向一个

文档村中添加节点或者从一个文档树中移除节点。

节点的类型

文档树中的不同类型的节点都用节点的特定的子接口表示。每个Node对象都有一个nodeType属性，它指定了节点是什么类型的。

将HTML DOM中几个容易常用的属性做下记录：

nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。

nodeName 属性含有某个节点的名称。

元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

注释： nodeName 所包含的 XML 元素的标签名称永远是大写的

nodeValue

对于文本节点，nodeValue 属性包含文本。

对于属性节点，nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

nodeType

nodeType 属性可返回节点的类型。

最重要的节点类型是：

元素类型	nodeTyep的值	接口
元素element	1	Element
属性attr	2	Attr
文本text	3	Text
注释comments	8	Comment
文档document	9	Document
DocumentFragment	11	DocumentFragment

不同的接口定义一些不同的属性和方法。

注：DOM树概况的Node是一个Document对象。这个对象的documentElement属性引用了一个Element对象，它代表了文档的根

元素。对不起HTML文档，这是<html>标记，它在文档中可以是显式的或者隐式的。在HTML文档中，通常对<body>元素比对<html>

元素更感兴趣，为了方便起见，可以使用document.body来引用这个元素。

属性

用Element接口的getArrtribute()方法，setArrtribute()方法和removeAttribute()方法可以

查询、设置、并删除一个元素的属性。

DOM HTML API

有两个标准版本 1级DOM 2级DOM 以及遗留的DOM 和 3级DOM 开发中

DOM一致性

在不同的WEB浏览器中，DOM的实现有不一样的一致程度（某些实现了，某些没有实现）

Document.implementation属性引用一个DOMImplementation对象，它定义了名为hasFeature()方法，

可以用这个方法，（如果存在的话）查询一个实现是否支持特定的DOM特性（或者模块）

所有的DOM模块的接口

特性名	版本	描述
HTML	1.0	1级Core和HTML接口
XML	1.0	1级Core和XML接口
Core	2.0	2级Core接口
HTML	2.0	2级HTML接口
XML	2.0	2级XML接口
Views	2.0	AbstractView接口
StyleSheets	2.0	通用样式表遍历
CSS	2.0	CSS样式
CSS2	2.0	CSS2Properties接口
Events	2.0	事件处理基础结构
UIEvents	2.0	用户接口事件（加上Events和Views）
MouseEvents	2.0	Mouse事件
HTMLEvents	2.0	HTML事件
CSS3		CSS3Properties接口

独立于语言的DOM接口

可以和任务一种语言交互，使用的接口都是DOM接口，但是方法是根据语言和HTML DOM接口的规约相关。

可以在语言中通过定义相应的类，来实现这些接口，或者使用这些接口。

由于DOM标准定义了接口（这些接口都是为HTML标记、标记中的属性、事件等来定义的），而不是类，所以它没有定义任何构造函数方法，如果想创建一个新的Text对象，

把它插入文档，不能使用如下这样简单的代码

var t=new Text("this is a new text node");//没有构造函数支持。

因为DOM没有定义构造函数，所以DOM标准在Document接口中定义了大量有用的工厂方法。

因此要为文档创建一个新的Text节点，可以用下列代码

var t=document.createTextNode("this is a new text node");

除了工厂方法外

Document.implementation也定义了一些方法，可以通过Document.implementation访问它们。

代码：

 <form name="form1">

         <input type="button" name="fbtn" value="创建一个节点" id="bt1" />

     </form>

 window.onload = function () {

     document.form1.fbtn.onclick = function () {

         var t = document.createTextNode("文本节点");

         document.form1.appendChild(t);

     }

 }

使用Document段

DocumentFragment是一种特殊类型的节点，它自身不出现在文档中，只作为连续节点集合的临时窗口，

并允许将这些节点作为一个对象来操作。当把一个DocumentFragment插入文档时(用Node对象的appendChild、insertBefore、

replaceChild方法)，插入的不是DocumentFragment本身，而是它的所有子节点。

可以向其添加节点，然后一次性将它们全部加入到别的节点中当作子节点。或者其它什么的。

查询选定的文本

在所有现代浏览器中都可以查询选定的文本

window.getSelection

document.getSelection

document.selection

基于浏览器的不同

在火狐中，文本输入元素还定义了selectionStart和selectionEnd属性，可以用来查询或者设置选择的文本。

代码：

 <form name="form1">

         <input type="button" name="fbtn" value="查询选定的文本" id="bt1" />

         这是一个可选的文本

     </form>

 window.onload = function () {

     document.form1.fbtn.onclick = function () {

         var s="";

         if (window.getSelection)

         {

             s = window.getSelection();

         }

         else if (window.Selection)

         {

             s = window.Selection;

         }

         else if (document.getSelection)

         {

             s = document.getSelection();

         }

         alert(s);

     }

 }

搜索文档元素

Document对象和所有文档元素都有数组属性all[]

这个数组表示文档中的所有元素或者元素中包含所有元素。

all[]数组有一个异常之处，即用tags()方法，可以以标记名获取一个元素数组

如：

var lists=document.all.tags("ul");

一些 DOM 对象方法

这里提供一些您将在本教程中学到的常用方法：

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。