JavaScriptDOM实验指导

1、JavaScript DOM2012.3.12文档对象模型DOMnDOM是Document Object Model(文档对象模型)的缩写nDOM 是 W3C（万维网联盟） 的推荐标准。nDOM 定义了访问诸如 XML 和 XHTML 文档的标准。nW3C DOM 被分为 3 个不同的部分/级别n核心 DOM n用于任何结构化文档的标准模型 nXML DOM n用于 XML 文档的标准模型 nHTML DOM n用于 HTML 文档的标准模型 标记语言文档的层次结构n特殊标记n文档声明n文档类型定义n处理指令n注释n元素：标记或闭合标记对n属性：标记中包含的按名称访问的子节点n子元素：闭合标记

2、对中包含的元素n子元素可以按顺序访问n文本n文档：包含所有元素、特殊标记HTML DOM 节点树nnn n n 标题n n n n n 链接n nn HTML DOM 节点层次documentDOCTYPEHTML（documentElement）HEADBODYTITLE标题Ahref链接节点彼此间的关系 n父节点：除文档节点之外的每个节点都有父节点。n 和 的父节点是 节点n文本节点 链接 的父节点是 节点。n子节点：n 节点有一个子节点： 节点。n 节点也有一个子节点：文本节点 标题。n同辈（同级节点）：当节点分享同一个父节点时，它们就是同辈（同级节点）n 和 是同辈，因为它们的父节点均

3、是 节点。n后代：后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。n所有的文本节点都是 节点的后代，而第一个文本节点是 节点的后代。n先辈：先辈是某个节点的父节点，或者父节点的父节点，以此类推。n所有的文本节点都可把 节点作为先辈节点。DOM的接口和类(继承关系)nNode节点nElement元素节点nHTMLElement HTML元素节点nAttr 属性节点nDocument文档节点nHTMLDocument HTML文档节点nNodeList节点列表nNamedNodeMap命名的节点映射HTML Document 对象n每个载入浏览器的 HTML 文档都会成为 Docum

4、ent 对象。nDocument 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。n提示：nDocument 对象可通过 window.document 属性对其进行访问。n因为window是全局环境的默认对象，所以可以直接使用document对其进行访问向文档写入内容nwrite() 和writeln()方法可向文档写入 HTML 表达式或 JavaScript 代码。n语法语法ndocument.write(exp1,exp2,exp3,.)ndocument.writeln(exp1,exp2,exp3,.)nwriteln() 在输出内容之后再输出一个换行符（注意不是，所

5、以在浏览器中看不出来）例：向文档写入内容ndocument.writeln(Hello World!)ndocument.write(Hello World!)ndocument.write(Hello World! ,Hello You! ,Hello World!)获取节点类型、名称、值nnode的属性nnodeName节点名称（大写）nnodeValue节点值nnodeType节点类型n应用实例nvar x=document;ndocument.writeln(节点类型：+x.nodeType+，节点名称：+x.nodeName+，节点值：+x.nodeValue+.);节点类型、名称、

6、值节点类型 nodeType nodeNamenodeValue元素1标记名null 属性2属性名属性值文本3#text文本注释8#comment 注释文本文档9#documentnull 文档类型10根元素名null 获取元素的引用n直接获取特定节点的引用n根据ID属性获取节点的引用n根据NAME属性获取节点引用的列表n根据标记名获取节点引用的列表n获取相邻节点的引用直接获取特定节点ndocumentn返回HTML 文档的文档节点ndocument.documentElement n可返回存在于 XML 以及 HTML 文档中的文档根节点。n对 HTML 页面提供了对 标签的直接访问ndoc

7、ument.body n对 HTML 页面的特殊扩展，提供了对 标签的直接访问。例：直接获取特定节点n var x=document;n document.writeln(节点类型：+x.nodeType+，节点名称：+x.nodeName+，节点值：+x.nodeValue+.);n var x=document.documentElement;n document.writeln(节点类型：+x.nodeType+，节点名称：+x.nodeName+，节点值：+x.nodeValue+.);n var x=document.body;n document.writeln(节点类型：+x.n

8、odeType+，节点名称：+x.nodeName+，节点值：+x.nodeValue+.);根据元素的ID属性获取元素ngetElementById() 方法可返回对拥有指定 id 属性的第一个元素的引用。n语法语法ndocument.getElementById(id)n说明说明nHTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。n在操作文档的一个特定的元素时，最

9、好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。例：使用 getElementById() nnnnfunction getValue()nnvar x=document.getElementById(myHeader)nalert(x.innerHTML)nnnnn这是标题n点击标题，会提示出它的值。nn自定义简化版getElementById() ngetElementById() 是一个重要的方法，在 DOM 程序设计中，它的使用非常常见。我们为您定义了一个工具函数，这样您就可以通过一个较短的名字来使用 getElementById(

10、) 方法了：nfunction id(x) n if (typeof x = string) n return document.getElementById(x);n return x; n n上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数，您只要在使用前编写 x = id(x) 就可以了。NodeList 对象nNodeList 对象代表一个有顺序的节点列表。n我们可通过节点列表中的节点索引号来访问列表中的节点（索引号由0开始）。n节点列表可保持其自身的更新。如果节点列表或 XML 文档中的某个元素被删除或添加，列表也会被自动更新。n注释：在一个节点列表中，节点被返回的顺序

11、与它们在 XML 被规定的顺序相同。nNodeList 对象的属性nLength，可返回节点列表中的节点数目。nNodeList 对象的方法nitem()，可返回节点列表中处于指定的索引号的节点。获取文档中所有具有指定name属性值的元素的列表ngetElementsByName() 方法可返回带有指定名称的对象的元素列表。n语法ndocument.getElementsByName(name) n说明n该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。n因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有

12、相同的 name 属性），所以 getElementsByName() 方法返回的是元素的数组，而不是一个元素。例：使用 getElementsByName() nnnnfunction getElements() n var x=document.getElementsByName(myInput);n alert(x.length);n alert(x.item(0);n alert(x0);n nnnnnnnnnn根据标记名选择子孙元素列表nDocument 和 Element接口都具有getElementsByTagName() 方法，可返回子孙元素中带有指定标签名的节点列表n语法nd

13、ocument.getElementsByTagName(tagname)nElement对象.getElementsByTagName(tagname)n说明ngetElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。n如果把特殊字符串 * 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表。n传递给 getElementsByTagName() 方法的字符串可以不区分大小写。例：使用 getElementsByTagName()nnnfunction getElements() nvar x=document.getElem

14、entsByTagName(div); nvar y=x0.getElementsByTagName(div); nalert(y.length);nalert(y.item(0);nn获取相邻节点的引用nnode的属性nparentNode节点的父节点nchildNodes节点的子节点列表nfirstChild节点的首个子节点nlastChild节点的最后一个子节点nnextSibling节点的下一个同级节点npreviousSibling节点的前一个同级节点空白文本节点nInternet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而 Mozilla 不会这样做。n

15、可以检查每一个子节点的节点类型，只对需要处理的节点类型的节点。例：获取相邻节点的引用nnfirstChildnnlastChildnnnvar x=document.getElementById(parent); nalert(x.firstChild.nodeValue);nalert(x.lastChild.nodeValue);nx=x.childNodes1;nalert(x.parentNode.id);nalert(x.nextSibling.nodeValue);nalert(x.previousSibling.nodeValue);n创建新节点nDocument 对象方法ncr

16、eateElement(“标记名”)n创建元素节点ncreateTextNode(“文本”)n创建文本节点n注意：新创建的节点并不会出现在文档中，必须添加到文档的某个节点之下节点处理nNode 对象方法对象方法ncloneNode()n复制节点nappendChild()n向节点的子节点列表的结尾添加新的子节ninsertBefore()n在指定的子节点前插入新的子节点。nreplaceChild()n用新节点替换一个子节点nremoveChild()n删除（并返回）当前节点的指定子节点nnormalize()n合并相邻的Text节点并删除空的Text节点cloneNode() 方法nclon

17、eNode() 方法可创建指定的节点的精确拷贝。n此方法可返回所复制的节点。n语法：语法：nodeObject.cloneNode(include_all) n参数描述：参数描述：include_all必需。假如逻辑参数被设置为真，那么被克隆的节点会克隆原节点的所有子节点。n返回值：返回值：当前节点的副本。n说明说明n该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。n返回的节点不属于文档树，它的 parentNode 属性为 null。n当复制的是 Element 节点时，它的所有属性都将被复制。但要注意，当前

18、节点上注册的事件监听器函数不会被复制。appendChild() 方法nappendChild() 方法可向节点的子节点列表的末尾添加新的子节点。n此方法可返回这个新的子节点。n语法：语法：appendChild(newchild) n参数描述：参数描述：newchild所添加的节点n返回值：返回值：加入的节点。n描述描述n该方法将把节点 newchild 添加到文档中，使它成为当前节点的最后一个子节点。n如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按

19、序插入当前节点的 childNodes 数组的末尾。n注意，来自一个文档的节点（或由一个文档创建的节点）不能插入另一个文档。也就是说，newchild 的 ownerDocument 属性必须与当前节点的 ownerDocument 属性相同。insertBefore() 方法ninsertBefore() 方法可在已有的子节点前插入一个新的子节点。n此方法可返回新的子节点。n语法：语法：insertBefore(newchild,refchild) n参数描述：参数描述：nnewchild插入新的节点nrefchild在此节点前插入新节点replaceChild() 方法nreplaceCh

20、ild() 方法可将某个子节点替换为另一个。n如替换成功，此方法可返回被替换的节点，如替换失败，则返回 NULL。n语法：语法：nnodeObject.replaceChild(new_node,old_node) n参数描述参数描述nnew_node必需。指定新的节点。nold_node必需。指定被替换的节点。removeChild() 方法nremoveChild() 方法可从子节点列表中删除某个节点。n如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。n语法：语法：nnodeObject.removeChild(node) n参数描述参数描述nnode必需。指定需要删除的节

21、点。normalize()方法n合并相邻的 Text 节点并删除空的 Text 节点。n语法：语法：nnodeObject.normalize() 说明说明n这个方法将遍历当前节点的所有子孙节点，通过删除空的 Text 节点，合并所有相邻的 Text 节点来规范化文档。n该方法在进行节点的插入或删除操作后，对于简化文档树的结构很有用。例：添加节点nnnvar x=document.createElement(div);nx.appendChild(document.createTextNode(文本);ndocument.body.appendChild(x);nn例：复制节点n原节点nnva

22、r x=document.getElementsByTagName(div);nvar y=x0.cloneNode(true);ny.firstChild.nodeValue=新节点;nx0.parentNode.insertBefore(y,x0);n例：替换节点n原节点nnvar x=document.createElement(div);nx.appendChild(document.createTextNode(新节点);nvar y=document.getElementsByTagName(div);ndocument.body.replaceChild(x,y0);n例：删除节

23、点n节点1n节点2nnvar y=document.getElementsByTagName(div);ny0.parentNode.removeChild(y0);n例：规格化文本nnnvar x=document.createElement(div);nx.appendChild(document.createTextNode(文本1 );nx.appendChild(document.createTextNode(文本2 );n/document.body.appendChild(x);nalert(x.firstChild.nodeValue);/文本1nx.normalize();n

24、alert(x.firstChild.nodeValue);/文本1 文本2nnNamedNodeMap接口nNamedNodeMap用于获取属性的引用的集合nNamedNodeMap会被自动更新nNamedNodeMap 的属性nlength，可返回列表中的节点数目nNamedNodeMap 对象的方法ngetNamedItem()n可返回指定的节点（通过名称）nitem()n可返回处于指定索引号的节点n节点次序是不确定的nremoveNamedItem()n可删除指定的节点（根据名称）属性处理nElement 对象的属性n attributes返回元素的属性的 NamedNodeMapnE

25、lement 对象的方法ngetAttribute()返回属性的值。ngetAttributeNode()以 Attribute 对象返回属性节点。nhasAttribute()返回元素是否拥有指定的属性。nhasAttributes()返回元素是否拥有属性。nremoveAttribute()删除指定的属性。nremoveAttributeNode()删除指定的属性节点。nsetAttribute()添加新属性。 例：属性处理nnnvar x=document.getElementById(a);n/alert(x.getAttribute(n);n/x.setAttribute(Name,

26、c);n/alert(x.getAttribute(Name);n/x.removeAttribute(Name);n/alert(x.hasAttribute(n);n/alert(x.hasAttributes();nvar y=x.attributes;nalert(y.length);nfor(var i in y)document.writeln(i+:+yi+n);n上例在IE与FireFox的区别nIEn使用属性处理方法时必须有元素nhasAttribute、hasAttributes不能用ny.length包含内置属性=111n i 值为属性名nFireFoxny.length

27、只包含显式属性=1n i 值为序号，可以表示内置方法名HTMLDocument 对象集合集合集合描述描述IEFOW3Call提供对文档中所有 HTML 元素的访问。419Noanchors返回对文档中所有 Anchor 对象的引用。419Yesapplets返回对文档中所有 Applet 对象的引用。-forms返回对文档中所有 Form 对象引用。419Yesimages返回对文档中所有 Image 对象引用。419Yeslinks返回对文档中所有 Area 和 Link 对象引用。419YesHTML DOM 属性访问n可以直接用属性名访问nnnvar x=document.getElem

28、entById(a);nx.Id=c;/元素作为对象可以添加自定义属性，区分大小写nalert(x.id);/a,内置属性只能用小写名获取n/alert(x.namE);/b,IE可以访问元素的自定义属性，区分大小写n上例在IE与FireFox的区别nFireFoxn只能访问元素的内置属性n内置属性只能用小写名获取n name,class不能作为内置属性n元素作为对象可以添加自定义属性，区分大小写nIEn必须包含元素n可以访问元素的内置属性和自定义属性n内置属性只能用小写名获取n class不能作为内置属性n元素的自定义属性访问时区分大小写n元素作为对象可以添加自定义属性，区分大小写XML D

29、OM HTMLElement 对象nHTMLElement 对象表示 HTML 中的一个元素nHTMLElement 对象的属性n一个 HTML 文档中的每个元素都有和元素的 HTML 属性对应的属性。这里列出了所有 HTML 标记都支持的属性。其他的属性，都特定于某种具体的 HTML 标记。nHTMLElement 对象继承了 Node 和 Element 对象的标准属性，也实现了下面所描述的几个非标准属性：HTMLElement 对象的非标准属性(1/4)nclassName n规定元素的 class 属性。注意：该属性名不是 class，因为 class 是 JavaScript 中的保

30、留字。n类型：String。状态：可写。ncurrentStyle n这一特定于 IE 的属性应用于元素的所有 CSS 属性的级联组。它是 Window.getComputedStyle() 的仅用于 IE 的替代。n类型：String。状态：可写。ndir n规定元素的 dir 属性，声明了文档文本的方向。n类型：String。状态：可写。nid n规定元素的 id 属性。在一个文档中，没有两个元素具有相同的 id 值。n类型：String。状态：可写。HTMLElement 对象的非标准属性(2/4)ninnerHTML n规定了元素所包含的字符串，不包括元素自身的开始标记和结束标记。查询

31、这一属性会将元素的内容作为一个 HTML 文本串返回。将这个属性设置为一个 HTML 文本串，则可以用 HTML 的解析表示来替换元素的内容。在文档载入的时候，不能设置这个属性。这个一个源自于 IE4 的非标准属性，已经得到所有现代浏览器的支持。n类型：String。状态：可写。HTMLElement 对象的非标准属性(3/4)nlang n规定元素的 lang 属性，声明了元素内容的语言代码。n类型：String。状态：可写。noffsetHeight, offsetWidth n返回元素的高度和宽度，以像素为单位。这是非标准的但却得到很好支持的属性。n类型：int。状态：只读。noffse

32、tLeft n返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。n类型：int。状态：只读。noffsetTop n返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。n类型：int。状态：只读。noffsetParent n返回对最近的动态定位的包含元素的引用，所有的偏移量都根据该元素来决定。如果元素的 style.display 设置为 none，则该属性返回 null。这是非标准的但却得到很好支持的属性。n类型：Node。状态：只读。HTMLElement 对象的非标准属性(4/4)nscrollHeight, scrollWidth n返回元素的完整的高度

33、和宽度，以像素为单位。当一个元素拥有滚动条时（比如由于 CSS 的 overflow 属性），这些属性和 offsetHeight 与 offsetWidth 不同，offsetHeight 和 offsetWidth 只是报告元素的可见部分的大小。这是非标准的但却得到很好支持的属性。n类型：int。状态：只读。nscrollTop, scrollLeft n设置或返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候，例如，元素的 CSS overflow 属性设置为 auto 的时候，这些像素才有用。这些属性也只在文档的 或 标记上定义（这和浏览器有关），并且一起来制定滚动文

34、档的位置。注意，这些属性并不会指定一个 标记的滚动量。这是非标准的但却得到很好支持的属性。n类型：int。状态：可写。nstyle n返回为当前元素设置内联 CSS 样式的 style 属性的值。注意，这个属性的值不是一个字符串。n类型：CSS2Properties。状态：只读。ntitle n规定元素的 title 属性。当鼠标悬停在元素上的时候，很多浏览器在元素的“工具提示”中显示这一属性的值。n类型：String。状态：可写。例：设置元素所包含的内容n点此nndocument.getElementById(a).innerHTML=aaa;nHTMLElement 对象的方法nHTMLE

35、lement 对象继承了 Node 和 Element 对象的标准方法。某些类型的元素实现了特定于标记的方法，W3School 在 HTML DOM 参考手册的各标记参考页中提供了这些方法的信息n大部分现代浏览器也都实现了如下的非标准方法：n方法描述方法描述scrollIntoView()n滚动文档。使该元素出现在窗口的顶部或底部。HTMLElement 对象的事件句柄n响应鼠标和键盘事件的所有 HTML 元素都可以触发这里列出的事件句柄。某些元素，如链接和按钮，当这些事件发生的时候执行默认操作。对于像这样的元素，更多细节可以在具体元素的参考页中找到。n请参阅 HTML 事件属性参考手册，了解

36、更多有关 HTML 事件句柄的知识。附：nHTML DOM APInHTML DOM 实例Node 对象的属性(1/2)属性属性描述描述IEFOW3CbaseURI返回节点的绝对基准 URI。No1NoYeschildNodes返回节点到子节点的节点列表。519YesfirstChild返回节点的首个子节点。519YeslastChild返回节点的最后一个子节点。519YeslocalName返回节点的本地名称。No19YesnamespaceURI返回节点的命名空间 URI。No19YesnextSibling返回节点之后紧跟的同级节点。519YesnodeName返回节点的名称，根据其类型

37、。519YesnodeType返回节点的类型。519YesnodeValue设置或返回节点的值，根据其类型。519YesNode 对象的属性(2/2)属性属性描述描述IEFOW3CownerDocument返回节点的根元素（document 对象）。519YesparentNode返回节点的父节点。519Yesprefix设置或返回节点的命名空间前缀。No19YespreviousSibling返回节点之前紧跟的同级节点。519YestextContent设置或返回节点及其后代的文本内容。No1NoYestext返回节点及其后代的文本（IE 独有的属性）。5NoNoNoxml返回节点及其后代的

38、 XML（IE 独有的属性）5NoNoNoNode 对象的方法(1/3)方法方法描述描述IEFOW3CappendChild()向节点的子节点列表的结尾添加新的子节点519YescloneNode()复制节点。519YescompareDocumentPosition()对比两个节点的文档位置。No1NoYesgetFeature(feature,version)返回一个 DOM 对象，此对象可执行带有指定特性和版本的专门的 API。 NoYesgetUserData(key)返回与此节点上的某个键相关联的对象。此对象必须首先通过使用相同的键来调用 setUserData 被设置到此节点。 N

39、oYeshasAttributes()判断当前节点是否拥有属性。No19YeshasChildNodes()判断当前节点是否拥有子节点。519YesinsertBefore()在指定的子节点前插入新的子节点。519YesNode 对象的方法(2/3)方法方法描述描述IEFOW3CisDefaultNamespace(URI)返回指定的命名空间 URI 是否为默认。 NoYesisEqualNode()检查两个节点是否相等。NoNoNoYesisSameNode()检查两个节点是否是相同的节点。No1NoYesisSupported()返回当前节点是否支持某个特性。 9YeslookupName

40、spaceURI()返回匹配指定前缀的命名空间 URI。No1NoYeslookupPrefix()返回匹配指定命名空间 URI 的前缀。No1NoYesnormalize()合并相邻的Text节点并删除空的Text节点。519YesremoveChild()删除（并返回）当前节点的指定子节点。519YesreplaceChild()用新节点替换一个子节点。519YesNode 对象的方法(3/3)方法方法描述描述IEFOW3CselectNodes()用一个 XPath 表达式查询选择节点。6 selectSingleNode()查找和 XPath 查询匹配的一个节点。6 transform

41、Node()使用 XSLT 把一个节点转换为一个字符串6 transformNodeToObject()使用 XSLT 把一个节点转换为一个文档。6 setUserData(key,data,handler)把对象关联到节点上的一个键上。 NoYesHTML DOM 对象(1/3)对象对象描述描述Document代表整个 HTML 文档，可被用来访问页面中的所有元素Anchor代表 元素Area代表图像映射中的 元素Base代表 元素Body代表 元素Button代表 元素Event代表某个事件的状态Form代表 元素Frame代表 元素Frameset代表 元素HTML DOM 对象(2/3

42、)对象对象描述描述Iframe代表 元素Image代表 元素Input button代表 HTML 表单中的一个按钮Input checkbox代表 HTML 表单中的复选框Input file代表 HTML 表单中的文件上传Input hidden代表 HTML 表单中的隐藏域Input password代表 HTML 表单中的密码域Input radio代表 HTML 表单中的单选按钮Input reset代表 HTML 表单中的重置按钮Input submit代表 HTML 表单中的确认按钮Input text代表 HTML 表单中的文本输入域（文本框）HTML DOM 对象(3/3)对

43、象对象描述描述Link代表 元素Meta代表 元素Object代表 元素Option代表 元素Select代表 HTML 表单中的选择列表Style代表单独的样式声明Table代表 元素TableData代表 元素TableRow代表 元素Textarea代表 元素HTML Document 对象集合集合集合描述描述IEFOW3Call提供对文档中所有 HTML 元素的访问。419Noanchors返回对文档中所有 Anchor 对象的引用。419Yesapplets返回对文档中所有 Applet 对象的引用。-forms返回对文档中所有 Form 对象引用。419Yesimages返回对文档

44、中所有 Image 对象引用。419Yeslinks返回对文档中所有 Area 和 Link 对象引用。419YesHTML Document 对象属性属性属性描述描述IEFOW3Cbody提供对 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 。 cookie设置或返回与当前文档有关的所有 cookie。419Yesdomain返回当前文档的域名。419YeslastModified返回文档被最后修改的日期和时间。41NoNoreferrer返回载入当前文档的文档的 URL。419Yestitle返回当前文档的标题。419YesURL返回当前文档的 URL。419YesHTML

45、Document 对象方法方法方法描述描述IEFO W3Cclose()关闭用 document.open() 方法打开的输出流，并显示选定的数据。419 YesgetElementById()返回对拥有指定 id 的第一个对象的引用。519 YesgetElementsByName()返回带有指定名称的对象集合。519 YesgetElementsByTagName()返回带有指定标签名的对象集合。519 Yesopen()打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。419 Yeswrite()向文档写 HTML 表达式

46、 或 JavaScript 代码。419 Yeswriteln()等同于 write() 方法，不同的是在每个表达式之后写一个换行符。419 YesHTML DOM all 集合nall 集合返回对文档中所有 HTML 元素的引用。n语法n document.allin document.allnamen document.all.tagstagnamen 说明nall 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问。nall 包含的元素保持了最初的顺序，如果你知道它们在数组中的确切数字化位置，可以直接从数组中提取它们。然而，更为常见的是使用 all 数组，根据它们的

47、 HTML 属性 name 或 id 来访问元素。如果多个元素拥有指定的 name，将得到共享同一名称的元素的一个数组。HTML DOM forms 集合nforms 集合可返回对文档中所有 Form 对象的引用。n语法ndocument.forms计算文档中表单的数目 nnnnnnndocument.write(文档包含： + document.forms.length + 个表单。)nnn访问集合中的项目 nnnn您的姓名：nnn您的汽车：nnn要访问集合中的项目，你既可以使用项目编号，也可以使用项目名称：nnndocument.write(第一个表单名称是： + document.for

48、 + )ndocument.write(第一个表单名称是： + document.getElementById(Form1).name + )nnnHTML DOM anchors 集合nanchors 集合可返回对文档中所有 Anchor 对象的引用。n语法ndocument.anchors返回文档中锚的数目 nnn第一个锚n第二个锚n第三个锚nn文档中锚的数目：nndocument.write(document.anchors.length)nnn返回文档中第一个锚的 innerHTML nnn第一个锚n第二个锚n第三个锚nn本文档中第一个锚的 InnerHTML 是：nn

49、document.write(document.anchors0.innerHTML)nnnHTML DOM images 集合nimages 集合可返回对文档中所有 Image 对象的引用。n语法ndocument.imagesn注释：为了与 0 级 DOM 兼容，该集合不包括由 标记定义的图像。计算文档中的图像数目 nnnnnnnndocument.write(本文档包含： + document.images.length + 幅图像。)nnnHTML DOM links 集合nlinks 集合可返回对文档中所有 Area 和 Link 对象的引用。n语法ndocument.links返回

50、文档中链接的数目nnnnnnnnn文档中链接数目是：nndocument.write(document.links.length)nnn返回文档中第一个链接的 id nnnnnnnnarea 元素的 id 是：nndocument.write(document.links0.id)nnnHTML DOM cookie 属性ncookie 属性可设置或查询与当前文档相关的所有 cookie。n语法ndocument.cookien说明n该属性是一个可读可写的字符串，可使用该属性对当前文档的 cookie 进行读取、创建、修改和删除操作。n提示：该属性的行为与普通的读/写属性是不同的。返回与当前文

51、档相关的 cookie nnnThe cookies associated with this document is: nndocument.write(document.cookie)nnnHTML DOM domain 属性ndomain 属性可返回下载当前文档的服务器域名。n语法ndocument.domainn说明n该属性是一个只读的字符串，包含了载入当前文档的 web 服务器的主机名。n提示：domain 属性可以解决因同源安全策略带来的不同文档的属性共享问题。返回下载当前文档的服务器域名 nnn本文档的域名是：nndocument.write(document.domain)nn

52、nHTML DOM lastModified 属性nlastModified 属性可返回文档最后被修改的日期和时间。n语法ndocument.lastModifiedn说明n该值来自于 Last-Modified HTTP 头部，它是由 Web 服务器发送的可选项。返回文档最近被修改的日期和时间 nnnThis document was last modified on:nndocument.write(document.lastModified)nnnHTML DOM referrer 属性nreferrer 属性可返回载入当前文档的文档的 URL。n语法ndocument.referrer

53、n说明n如果当前文档不是通过超级链接访问的，则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部。返回当前文档的 referrer nnnreferrer 属性返回加载本文档的文档的 URL。n本文档的 referrer 是：nndocument.write(document.referrer)nnnHTML DOM title 属性ntitle 属性可返回当前文档的标题（ HTML title 元素中的文本）。n语法ndocument.title返回当前文档的标题 nnnMy titlennn该文档的标题是：nndocument.write(document.t

54、itle)nnnHTML DOM URL 属性nURL 属性可返回当前文档的 URL。n语法ndocument.URLn说明n一般情况下，该属性的值与包含文档的 Window 的 location.href 属性相同。不过，在 URL 重定向发生的时候，这个 URL 属性保存了文档的实际 URL，而 location.href 保存了请求的 URL。返回当前文档的 URL nnn该文档的 URL 是：nndocument.write(document.URL)nnnHTML DOM open() 方法nopen() 方法可打开一个新文档，并擦除当前文档的内容。n语法语法ndocument.op

55、en(mimetype,replace)n参数参数nmimetype可选。规定正在写的文档的类型。默认值是 “text/html”。nreplace可选。当此参数设置后，可引起新文档从父文档继承历史条目。n说明说明n该方法将擦除当前 HTML 文档的内容，开始一个新的文档，新文档用 write() 方法或 writeln() 方法编写。提示和注释n重要事项：n调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后，必须记住用 close 方法关闭文档，并迫使其内容显示出来。n属于被覆盖的文档的一部分的脚本或事件句柄不能调用该方法，因为脚本或事件句柄自身也会被覆盖。打开

56、一个新的文档，添加一些文本，然后关闭它nnnnfunction createNewDoc()n n var newDoc=document.open(text/html,replace);n var txt=学习学习 DOM 非常有趣！非常有趣！;n newDoc.write(txt);n newDoc.close();n nnnnnn在新窗口打开新的文档，并添加一些文本nnnnfunction winTest()n n var txt1 = This is a new window.;n var txt2 = This is a test.;n win.document.open(text/

57、html,replace);n win.document.writeln(txt1);n win.document.write(txt2);n win.document.close();n nnnnnvar win=window.open(,width=200,height=200);nwinTest();nnnHTML DOM close() 方法nclose() 方法可关闭一个由 document.open 方法打开的输出流，并显示选定的数据。n语法ndocument.close()n说明n该方法将关闭 open() 方法打开的文档流，并强制地显示出所有缓存的输出内容。如果您使用 writ

58、e() 方法动态地输出一个文档，必须记住当你这么做的时候要调用 close() 方法，以确保所有文档内容都能显示。n一旦调用了 close()，就不应该再次调用 write()，因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档HTML DOM write() 方法nwrite() 方法可向文档写入 HTML 表达式或 JavaScript 代码。n可列出多个参数(exp1,exp2,exp3,.) ，它们将按顺序被追加到文档中。n语法ndocument.write(exp1,exp2,exp3,.)n说明n虽然根据 DOM 标准，该方法只接受单个字符串作为参数。不过根据经验，

59、write() 可接受任何多个参数。n我们通常按照两种的方式使用 write() 方法：一是在使用该方在文档中输出 HTML，另一种是在调用该方法的的窗口之外的窗口、框架中产生新文档。在第二种情况中，请务必使用 close() 方法来关闭文档。使用 document.write() 向输出流写文本 nnnndocument.write(Hello World!)nnn使用 document.write() 向输出流写 HTML nnnndocument.write(Hello World!)nnn使用多参数的 document.write() nnnndocument.write(Hello

60、World! ,Hello You! ,Hello World!)nnnHTML DOM writeln() 方法nwriteln() 方法与 write() 方法作用相同，后加一个换行符。n语法ndocument.writeln(exp1,exp2,exp3,.)n提示：在编写 标记的内容时，该方法很有用。document.writeln() 实例nnnndocument.write()ndocument.write(write1 )ndocument.writeln(writeln1 ,writeln2 )ndocument.write(write2 )ndocument.write()n