Document 对象

xiaoxiao2021-02-28 156

Document 对象集合

1. all[]

返回对文档中所有 HTML 元素的引用

说明

all[] 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问。all[] 数组源自 IE 4 并且已经被很多其他的浏览器所采用。

all[] 已经被 Document 接口的标准的 getElementById() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。尽管如此，这个 all[] 数组在已有的代码中仍然使用。

all[] 包含的元素保持了最初的顺序，如果你知道它们在数组中的确切数字化位置，可以直接从数组中提取它们。然而，更为常见的是使用 all[] 数组，根据它们的 HTML 属性 name 或 id 来访问元素。如果多个元素拥有指定的 name，将得到共享同一名称的元素的一个数组。

document.write(document.all["i"]) document.write(document.all["name"])

2. anchors []

返回对文档中所有 Anchor 对象的引用，A标签

document.anchors[]

<html> <body> <a name="first">First anchor</a><br /> <a name="second">Second anchor</a><br /> <a name="third">Third anchor</a><br /> <br /> Number of anchors in this document: <script type="text/javascript"> document.write(document.anchors.length) </script> </body> </html>

3. applets

返回对文档中所有 Applet 对象的引用

document.applets

4. forms[]

返回对文档中所有 Form 对象引用

document.forms[]

<html> <body> <form name="Form1"></form> <form name="Form2"></form> <form name="Form3"></form> <script type="text/javascript"> document.write("This document contains: ") document.write(document.forms.length + " forms.") </script> </body> </html>

5. images[]

返回对文档中所有 Image 对象的引用

提示：注释：为了与 0 级 DOM 兼容，该集合不包括由标记定义的图像。

document.images[]

<html> <body> <img border="0" src="hackanm.gif" width="48" height="48"> <br /> <img border="0" src="compman.gif" width="107" height="98"> <br /><br /> <script type="text/javascript"> document.write("This document contains: ") document.write(document.images.length + " images.") </script> </body> </html>

6. links []

返回对文档中所有 Area 和 Link 对象的引用

document.links[]

<html> <body> <img src="planets.gif" width="145" height="126" usemap="#planetmap" /> <map name="planetmap"> <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" /> </map> <br /> Number of links in this document: <script type="text/javascript"> document.write(document.links.length) </script> </body> </html>

7. scripts[]

返回页面中所有脚本的集合

document.scripts[]

<html> <head> <meta charset="utf-8"> <title>zsh</title> </head> <body> <script type="text/javascript"> document.write(document.links.length) </script> </body> </html>

Document 对象属性

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

1. body

提供对元素的直接访问。对于定义了框架集的文档，该属性引用最外层的。

设置或返回与当前文档有关的所有 cookie

说明

该属性是一个可读可写的字符串，可使用该属性对当前文档的 cookie 进行读取、创建、修改和删除操作。

提示：该属性的行为与普通的读/写属性是不同的。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

标准写法

document.cookie="cookie1=value; cookie2=value; cookie3=value;

过期时间

document.cookie="username=John Doe; expires=Thu, 18 Dec 2018 12:00:00 GMT"

Cookie路径

document.cookie="username=John Doe; expires=Thu, 18 Dec 2018 12:00:00 GMT; path=/";

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可 document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

function setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString(); document.cookie = cname + "=" + cvalue + "; " + expires; }

函数解析：

以上的函数参数中，cookie 的名称为 cname，cookie 的值为 cvalue，并设置了 cookie 的过期时间 expires。该函数设置了 cookie 名、cookie 值、cookie过期时间。

function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name)==0) return c.substring(name.length,c.length); } return ""; }

函数解析：

cookie 名的参数为 cname。创建一个文本变量用于检索指定 cookie :cname + “=”。使用分号来分割 document.cookie 字符串，并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(‘;’))。循环 ca 数组 (i=0;i

函数解析：

如果设置了 cookie，将显示一个问候信息。如果没有设置 cookie，将会显示一个弹窗用于询问访问者的名字，并调用 setCookie 函数将访问者的名字存储 365 天

3. activeElement

返回文档中当前获得焦点的元素

返回值: 当前获得焦点的元素。

注意：该属性是只读的。

提示：为元素设置焦点，可以使用 element.focus() 方法。

提示：可以使用 document.hasFocus() 方法来查看当前元素是否获取焦点。

浏览器支持

googleIEfirefoxsafariopera2.04.03.04.09.6

document.activeElement

4. addEventListener

用于向文档添加事件句柄

返回值: 没有返回值。

提示：可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

提示：IE9以下使用 element.addEventListener() 方法为指定元素添加事件句柄。

浏览器支持

googleIEfirefoxsafariopera1.09.01.01.07.0

document.addEventListener(event, function, useCapture)

参数

必需 event 描述事件名称的字符串。注意：不要使用 “on” 前缀。例如，使用 “click” 来取代 “onclick”。 function 描述了事件触发后执行的函数。当事件触发时，事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。可选 useCapture 布尔值，指定事件是否在捕获或冒泡阶段执行。可能值： true - 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行。在 Firefox 6 和 Opera 11.60 中 useCapture 参数是可选的。（在 Chrome、IE 和 Safari 中一直都是可选的）。 document.addEventListener("click", myFunction); function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; }

5. baseURI

返回 HTML 文档的基础URI

返回值: 字符串, 代表节点页面的URI。

浏览器支持

googleIEfirefoxsafarioperatruefalsetruetruetrue

document.baseURI

console.log(document.baseURI)

6. createAttribute

用于创建一个指定名称的属性，并返回Attr 对象属性

返回值: 创建的属性。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.createAttribute(attributename)

参数

必需 attributename 要创建的属性名称。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>zsh</title> <style> .democlass{ color:red; } </style> </head> <body> <h1>Hello World</h1> <p id="demo">单击按钮来创建一个“类”属性值“democlass”插入到上面的H1元素。</p> <button onclick="myFunction()">点我</button> </body> <script> function myFunction(){ var h1=document.getElementsByTagName("H1")[0]; var att=document.createAttribute("class"); att.value="democlass"; h1.setAttributeNode(att); } </script> </html>

7. createComment

可创建注释节点

返回值: 创建的注释节点。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.createComment(text)

参数

可选 text 添加的注释文本。 <script> var Cdom = document.createComment("This is Comment Dom"); document.body.appendChild(Cdom) </script>

8. createDocumentFragment

创建了一虚拟的节点对象，节点对象包含所有属性和方法当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。你也可以使用文档的文档对象来执行这些变化，但要防止文件结构被破坏，createDocumentFragment() 方法可以更安全改变文档的结构及节点。

返回值: 创建文档片段对象。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.createDocumentFragment()

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> </head> <body> <ul><li>Coffee</li><li>Tea</li></ul> <p id="demo">单击按钮更改列表项,使用createDocumentFragment方法,然后在列表的最后一个孩子添加列表项。</p> <button onclick="myFunction()">点我</button> <script> function myFunction(){ var d=document.createDocumentFragment(); d.appendChild(document.getElementsByTagName("LI")[0]); d.childNodes[0].childNodes[0].nodeValue="Milk"; document.getElementsByTagName("UL")[0].appendChild(d); }; </script> </body> </html>

9. createElement

通过指定名称创建一个元素

返回值: 创建的元素节点。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.createElement(nodename)

参数

必需 nodename 创建元素的名称。 var aLink = document.createElement("a"); aLink.href = 'http://www.zshgrwz.cn'; aLink.target = "_blank"; aLink.innerText = "我是被创建的A标签哦"; document.body.appendChild(aLink)

10. createTextNode

创建文本节点

返回值: 创建的文本节点。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.createElement(text)

参数

必需 text 文本节点的文本。 var aLink = document.createElement("a"); aLink.href = 'http://www.zshgrwz.cn'; aLink.target = "_blank"; var text = document.createTextNode("我是被创建的A标签哦"); aLink.appendChild(text) document.body.appendChild(aLink)

11. doctype

返回与文档相关的文档类型声明

返回值: 文档的文档类型, 作为一个 DocumentType 对象。

注意：如果文档没有指定文档类型,返回值为 null.

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

注意： Internet Explorer 8 及 IE 更早版本显示HTML 和 XHTML文档时该属性返回 null ,但是支持 XML 文档。

document.doctype

console.log(document.doctype);

12. documentElement

以一个元素对象返回一个文档的文档元素。HTML 文档返回对象为HTML元素。

注意：如果 HTML 元素缺失，返回值为 null。

返回值: 文档的文档元素,作为一个元素对象。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.documentElement

console.log(document.documentElement);

13. documentURI

可设置或返回文档的位置。如果文档由 DocumentImplementation 对象创建, 或者如果它未定义，则返回 null。

返回值: 字符串, 代表文档的URI。

浏览器支持

googleIEfirefoxsafarioperatruefalsetruetruetrue

除了 Internet Explorer 浏览器，其他浏览器都支持 documentURI 属性。

document.documentURI

console.log(document.documentURI);

14. domain

返回下载当前文档的服务器域

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.domain

console.log(document.domain);

15. embeds

返回文档中所有嵌入的内容（embed）集合

document.embeds

console.log(document.embeds);

16. getElementsByClassName

返回文档中所有指定类名的元素集合，作为 NodeList 对象

NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

提示：你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。

返回值

NodeList 对象，表示指定类名的元素集合。元素在集合中的顺序以其在代码中的出现次序排序。

浏览器支持

googleIEfirefoxsafariopera4.09.03.03.19.5

document.getElementsByClassName(classname)

参数

必需 classname 你需要获取的元素类名。多个类名使用空格分隔，如 “test demo”。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> </head> <body> <div class="example">第一 Div 元素 class="example"。</div> <div class="example">第二个 Div 元素 class="example"。</div> <p>点击按钮修改第一个 Div 元素的文本信息（索引值为 0 的 class="example")。</p> <button onclick="myFunction()">点我</button> <p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p> <script> function myFunction() { var x = document.getElementsByClassName("example"); x[0].innerHTML = "Hello World!"; } </script> </body> </html>

17. getElementById

可返回对拥有指定 ID 的第一个对象的引用

HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。

如果没有指定 ID 的元素返回 null

如果存在多个指定ID的元素则返回 undefined。

提示：拥有ID属性的DOM元素会在Window下创建一个同名对象，此对象就是这个DOM元素。

返回值

指定ID的元素

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.getElementById(elementID)

参数

必需 elementID 元素ID属性值。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> </head> <body> <p id="demo">单击按钮来改变这一段中的文本。</p> <button onclick="myFunction()">点我</button> <script> function myFunction(){ document.getElementById("demo").innerHTML="Hello World"; }; </script> </body> </html>

18. getElementsByName

返回带有指定名称的对象的集合

返回值

指定name的元素集合。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.getElementsByName(name)

参数

必需 name 元素name属性值。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> <script> function getElements(){ var x=document.getElementsByName("x"); alert(x.length); } </script> </head> <body> 猫: <input name="x" type="radio" value="猫"> 狗: <input name="x" type="radio" value="狗"> <input type="button" onclick="getElements()" value="多少名称为 'x'的元素?"> </body> </html>

19. getElementsByTagName

返回带有指定标签名的对象的集合

提示：参数值 “*” 返回文档的所有元素。

返回值

指定标签名的元素集合。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.getElementsByTagName(tagname)

参数

必需 tagname 你要获取元素的标签名。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> </head> <body> <p id="demo">单击按钮来改变这一段中的文本。</p> <button onclick="myFunction()">点我</button> <script> function myFunction(){ document.getElementsByTagName("P")[0].innerHTML="Hello World"; }; </script> </body> </html>

20. implementation

返回处理该文档的 DOMImplementation 对象

提示：参数值 “*” 返回文档的所有元素。

返回值

文档的 implementation 对象, 作为一个DocumentImplementation 对象。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.implementation

console.log(document.implementation);

21. importNode

把一个节点从另一个文档复制到该文档以便应用

imported 节点可以试试任何节点类型。

如果第二个值设置为 true，那么还要复制该节点的所有子孙节点。

返回值

另一个文档的节点。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

注意： Internet explorer 8 及 IE 更早版本不支持该方法。

document.importNode(node,deep)

参数

必需 node 要获取的节点。 deep 如果为 true，还要递归复制 importedNode 节点的所有子孙节点。

提示：非本域名下网址涉及到跨域请求无法直接获取信息

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> </head> <body> <button onclick="myFunction()">点我</button> <p id="demo">点击上面的按钮以获取和显示在iframe第一个H1元素的值:</p> <script> function myFunction(){ var frame=document.getElementsByTagName("iframe")[0] var h=frame.contentWindow.document.getElementsByTagName("h1")[0]; var x=document.importNode(h,true); document.getElementById("demo").appendChild(x); }; </script> <iframe src="http://www.zshgrwz.cn" style="height:280px;width:420px;"></iframe> <p><strong>Note:</strong> IE 8 及更早的版本不支持importNote方法</p> </body> </html>

22. inputEncoding

可返回文档的编码（在解析时）

返回值

字符串，返回文档编码。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruefalse

注意： Internet explorer 8 及 IE 更早版本不支持该方法。

document.inputEncoding

console.log(document.inputEncoding)

23. lastModified

合并相邻的文本节点并删除空的文本节点

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

node.normalize()

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> </head> <body> <p id="demo">点击一个按钮来添加文本,点击另一个按钮规范化文档</p> <button onclick="addTextNode()">添加一个文本节点</button> <button onclick="normPara()">规范文本</button> <script> function addTextNode(){ var y=document.createTextNode(" Click again"); var x=document.getElementById("demo"); x.appendChild(y); var z=document.getElementById("cc"); z.innerHTML=x.childNodes.length; } function normPara(){ document.normalize(); var x=document.getElementById("demo"); var z=document.getElementById("cc"); z.innerHTML=x.childNodes.length; } </script> <p>上面的段落有 <span id="cc">1</span>个子节点。</p> </body> </html>

24. open

打开一个输出流来收集 document.write() 或 document.writeln() 方法输出的内容。

调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后，必须记住用 document.close() 方法关闭文档，并迫使其内容显示出来。

注意：如果目标文件已经存在，它将被清除。如果这个方法没有参数，会显示一个新窗口(about:blank)。

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.open(MIMEtype,replace)

参数

可选 MIMEtype 规定正在写的文档的类型。默认值是 “text/html”。 replace 当此参数设置后，可引起新文档从父文档继承历史条目。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> <script> function createDoc(){ var doc=document.open("text/html","replace"); var txt="<!DOCTYPE html><html><body>学习 HTML DOM 很有趣!</body></html>"; doc.write(txt); doc.close(); } </script> </head> <body> <input type="button" value="新文档" onclick="createDoc()"> </body> </html>

25. querySelector

返回文档中匹配指定 CSS 选择器的一个元素

注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

返回值

CSS 选择器的第一个元素。如果没有找到，返回 null。如果指定了非法选择器则抛出 SYNTAX_ERR 异常。

浏览器支持

googleIEfirefoxsafariopera4.08.03.53.110.0

document.querySelector(CSS selectors)

参数

可选 CSS selectors 指定一个或多个匹配元素的 CSS 选择器。可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。对于多个选择器，使用逗号隔开，返回一个匹配的元素。 document.querySelector('body')

26. querySelectorAll()

是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

返回值

CSS 选择器的所有元素。如果没有找到，返回 null。如果指定了非法选择器则抛出 SYNTAX_ERR 异常。

浏览器支持

googleIEfirefoxsafariopera4.08.03.53.110.0

document.querySelectorAll(CSS selectors)

参数

可选 CSS selectors 指定一个或多个匹配元素的 CSS 选择器。可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。对于多个选择器，使用逗号隔开，返回一个匹配的元素。 document.querySelectorAll('body')

27. readyState

返回当前文档的状态（载入中……）

返回值

uninitialized - 还未开始载入loading - 载入中interactive - 已加载，文档与用户可以开始交互complete - 载入完成

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.readyState

document.write(document.readyState);

28. referrer

返回载入当前文档的来源文档的URL 如果当前文档不是通过超级链接访问的，则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部。

返回值

返回载入当前文档的来源文档的URL

注意：本地调试无用

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.referrer

document.write(document.referrer);

29. removeEventListener

用于移除由 document.addEventListener() 方法添加的事件句柄

注意: 如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数，匿名函数，类似 “document.removeEventListener(“event”, function(){ myScript });” 该事件是无法移除的。

浏览器支持

googleIEfirefoxsafariopera1.09.01.01.07.0

注意： Internet Explorer 8 及更早IE版本不支持 removeEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。但是，对于这些不支持该函数的浏览器，你可以使用 detachEvent() 方法来移除由 attachEvent() 方法添加的事件句柄，具体查看

document.removeEventListener(event, function, useCapture)

参数：

必需 event 要移除的事件名称。注意：不要使用 “on” 前缀。例如，使用 “click” ,而不是使用 “onclick”。 funciton 指定要移除的函数。可选 useCapture 布尔值，指定移除事件句柄的阶段。 true - 事件句柄在捕获阶段移除 false- 默认。事件句柄在冒泡阶段移除注意：如果添加两次事件句柄，一次在捕获阶段，一次在冒泡阶段，你必须单独移除该事件。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zsh</title> </head> <body> <p> Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法。</p> <p>该实例演示了跨浏览器的解决方法。</p> <p>文档中使用 addEventListener() 方法添加 onmousemove 事件句柄，当鼠标移动时会显示随机数。</p> <p>点击按钮移除事件句柄。</p> <button onclick="removeHandler()" id="myBtn">点我</button> <p id="demo"></p> <script> if (document.addEventListener) { document.addEventListener("mousemove", myFunction); } else if (document.attachEvent) { document.attachEvent("onmousemove", myFunction); } function myFunction() { document.getElementById("demo").innerHTML = Math.random(); } function removeHandler() { if (document.removeEventListener) { document.removeEventListener("mousemove", myFunction); } else if (document.detachEvent) { document.detachEvent("onmousemove", myFunction); } } </script> </body> </html>

30. title

可返回当前文档的标题（ HTML title 元素中的文本）

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.title

console.log(document.title);

31. URL

可返回当前文档的 URL

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.URL

console.log(document.URL);

32. write

法可向文档写入 HTML 表达式或 JavaScript 代码

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.write(exp1,exp2,exp3,...)

参数

可选 exp1,exp2,exp3,… 要写入的输出流。多个参数可以列出，他们将按出现的顺序被追加到文档中。 document.write("exp1,exp2,exp3,...");

33. writeln

writeln() 方法与 write() 方法作用相同，外加可在每个表达式后写一个换行符

浏览器支持

googleIEfirefoxsafarioperatruetruetruetruetrue

document.writeln(exp1,exp2,exp3,...)

参数

可选 exp1,exp2,exp3,… 要写入的输出流。多个参数可以列出，他们将按出现的顺序被追加到文档中。 document.writeln("exp1,exp2,exp3,..."); document.writeln("exp1,exp2,exp3,...");

警告 !!!

在 W3C DOM核心，文档对象继承节点对象的所有属性和方法。很多属性和方法在文档中是没有意义的。

HTML 文档对象可以避免使用这些节点对象和属性：

document.attributesdocument.hasAttributes()document.nextSiblingdocument.nodeNamedocument.nodeTypedocument.nodeValuedocument.ownerDocumentdocument.ownerElementdocument.parentNodedocument.previousSiblingdocument.textContent

文档内容出自 W3cSchool和菜鸟教程，如需查看更详细的有关内容请登录 http://www.w3school.com.cn/ 和 http://www.runoob.com/

转载请注明原文地址: https://www.6miu.com/read-28039.html

技术

最新回复(0)

Document 对象

Document 对象集合

1. all[]

说明

2. anchors []

3. applets

4. forms[]

5. images[]

提示：注释：为了与 0 级 DOM 兼容，该集合不包括由 标记定义的图像。

6. links []

7. scripts[]

Document 对象属性

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

1. body

2. cookie

说明

提示：该属性的行为与普通的读/写属性是不同的。

浏览器支持

标准写法

过期时间

Cookie路径

修改 Cookie

删除 Cookie

设置 cookie 值的函数

函数解析：

获取 cookie 值的函数

函数解析：

检测 cookie 值的函数

函数解析：

3. activeElement

返回值: 当前获得焦点的元素。

注意： 该属性是只读的。

提示： 为元素设置焦点，可以使用 element.focus() 方法。

提示：可以使用 document.hasFocus() 方法来查看当前元素是否获取焦点。

浏览器支持

4. addEventListener

返回值: 没有返回值。

提示： 可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

提示：IE9以下使用 element.addEventListener() 方法为指定元素添加事件句柄。

浏览器支持

参数

5. baseURI

返回值: 字符串, 代表节点页面的URI。

浏览器支持

6. createAttribute

返回值: 创建的属性。

浏览器支持

参数

7. createComment

返回值: 创建的注释节点。

浏览器支持

参数

8. createDocumentFragment

返回值: 创建文档片段对象。

浏览器支持

9. createElement

返回值: 创建的元素节点。

浏览器支持

参数

10. createTextNode

返回值: 创建的文本节点。

浏览器支持

参数

11. doctype

返回值: 文档的文档类型, 作为一个 DocumentType 对象。

注意： 如果文档没有指定文档类型,返回值为 null.

浏览器支持

注意： Internet Explorer 8 及 IE 更早版本显示HTML 和 XHTML文档时该属性返回 null ,但是支持 XML 文档。

12. documentElement

注意： 如果 HTML 元素缺失，返回值为 null。

返回值: 文档的文档元素,作为一个元素对象。

浏览器支持

13. documentURI

返回值: 字符串, 代表文档的URI。

浏览器支持

14. domain

浏览器支持

15. embeds

16. getElementsByClassName

提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。

提示：注释：为了与 0 级 DOM 兼容，该集合不包括由标记定义的图像。

注意：该属性是只读的。

提示：为元素设置焦点，可以使用 element.focus() 方法。

提示：可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

注意：如果文档没有指定文档类型,返回值为 null.

注意：如果 HTML 元素缺失，返回值为 null。

提示：你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。

提示：参数值 “*” 返回文档的所有元素。

提示：参数值 “*” 返回文档的所有元素。

注意： Internet Explorer 8 及更早IE版本不支持 removeEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。但是，对于这些不支持该函数的浏览器，你可以使用 detachEvent() 方法来移除由 attachEvent() 方法添加的事件句柄，具体查看