HTML DOM Document 对象

it2025-12-23 13

http://www.w3school.com.cn/jsref/dom_obj_document.asp

Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

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

Document 对象集合

集合描述all[]提供对文档中所有 HTML 元素的访问。anchors[]返回对文档中所有 Anchor 对象的引用。applets返回对文档中所有 Applet 对象的引用。forms[]返回对文档中所有 Form 对象引用。images[]返回对文档中所有 Image 对象引用。links[]返回对文档中所有 Area 和 Link 对象引用。

Document 对象属性

属性描述body

提供对 <body> 元素的直接访问。

对于定义了框架集的文档，该属性引用最外层的 <frameset>。

cookie设置或返回与当前文档有关的所有 cookie。domain返回当前文档的域名。lastModified返回文档被最后修改的日期和时间。referrer返回载入当前文档的文档的 URL。title返回当前文档的标题。URL返回当前文档的 URL。

Document 对象方法

方法描述close()关闭用 document.open() 方法打开的输出流，并显示选定的数据。getElementById()返回对拥有指定 id 的第一个对象？的引用。（id独一无二，应该是返回单个对象的引用）getElementsByName()返回带有指定名称的对象集合。getElementsByTagName()返回带有指定标签名的对象集合。open()打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。write()向文档写 HTML 表达式或 JavaScript 代码。writeln()等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

Document 对象描述（此处基本上不懂）

HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。

很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。

这些集合属性都源自于 0 级 DOM。？它们已经被 Document.getElementsByTagName() 所取代，但是仍然常常使用，因为他们很方便。

write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。

注意，在 1 级 DOM 中，HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。在 2 级 DOM 中，该方法已经被转移到了 Document 接口，它现在由 HTMLDocument 继承而不是由它定义了。

innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法:

Object.innerHTML

注意:

1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。

2.注意书写，innerHTML区分大小写。

我们通过id="con"获取<p> 元素，并将元素的内容输出和改变元素内容，代码如下:

<body> <h2 id="con">javascript</H2> <p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p> <script type="text/javascript"> var mychar= document.getElementById("con") ; document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容 mychar.innerHTML = "Hello World"; document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容 </script> </body>

改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？

语法:

Object.style.property=new style;

注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

基本属性表（property）:

注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。

<body> <h2 id="con">I love JavaScript</H2> <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p> <script type="text/javascript"> var mychar= document.getElementById("con"); mychar.style.color="blue"; mychar.style.backgroundColor ="#CCC"; mychar.style.width = "300px"; </script> </body>

显示和隐藏（display属性）

网页中经常会看到显示和隐藏的效果，可通过display属性来设置。

语法：

Object.style.display = value

注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

value取值:

看看下面代码:

<title>display</title> <script type="text/javascript"> function hidetext() { var mychar = document.getElementById("con"); mychar.style.display="none"; } function showtext() { var mychar = document.getElementById("con"); mychar.style.display="block"; } </script> </head> <body> <h1>JavaScript</h1> <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> <form> <input type="button" onclick="hidetext()" value="隐藏内容" /> <input type="button" onclick="showtext()" value="显示内容" /> </form> </body>

转载于:https://www.cnblogs.com/xuedexin/articles/5605051.html

最新回复(0)