`
绿色滑板鞋
  • 浏览: 85074 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

JS开发引用HTML DOM的location和document对象

阅读更多

上一次提到,在报表软件FineReportJavaScript开发中,可以访问并处理的HTML DOM对象有windowslocationdocument三种。这次就继续介绍后两种,locationdocument对象。

 

Location

Location 对象包含有关当前 URL 的信息。 Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

location对象的常用属性

hash         设置或返回从#开始的URL

host          设置或返回主机名和当前URL的端口号

hostname     设置或返回当前URL的主机名

href          设置或返回完整的URL

pathname     设置或返回当前URL的路径部分

port          设置或返回当前URL的端口号

search        设置或返回从?开始的URL(查询部分)

 

1.location对象的reload()方法

reload()方法用于重新加载当前文档

语法为:

location.reload(false)

如果该方法没有规定参数,或者参数是 false,它就会用 HTTP If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

 

Document

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

Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问

 

1.document对象的常用属性

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

title        返回当前文档的标题

URL        返回当前文档的URL

 

2.document对象的常用方法

2.1 close()方法

close() 方法可关闭一个由 document.open 方法打开的输出流,并显示选定的数据。语法:

document.close()

该方法将关闭 open() 方法打开的文档流,并强制地显示出所有缓存的输出内容。

 

如果使用 write() 方法动态地输出一个文档,必须记住这么做的时候要调用 close() 方法,以确保所有文档内容都能显示。

一旦调用了 close(),就不应该再次调用 write(),因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档。

 

2.2 getElementByID()方法

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。语法:

document.getElementById(id)



 

参考完整代码:

<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}
</script>
</head>
<body>
 
<h1 id="myHeader" onclick="getValue()">这是标题</h1>
<p>点击标题,会提示出它的值。</p>
 
</body>
</html>

2.3 getElemenByName()方法

getElementsByName() 方法可返回带有指定名称的对象的集合。

该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。

因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。

传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

 

2.4write()方法

write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。 可列出多个参数(exp1,exp2,exp3,...) ,它们将按顺序被追加到文档中。

语法:

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

通常按照两种方式使用 write() 方法:

一是在使用该方法在文档中输出 HTML,另一种是在调用该方法的的窗口之外的窗口、框架中产生新文档。

第二种情况中,请务必使用 close() 方法来关闭文档。

示例:



 

参考代码:

<html>
<body>
 
<script type="text/javascript">
document.write("Hello World! ","Hello You! ","<p style='color:blue;'>Hello World!</p>")
</script>
 
</body>
</html>

 

  • 大小: 3 KB
  • 大小: 385 Bytes
0
6
分享到:
评论

相关推荐

    如何引用HTML DOM的location和document对象

    在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows、location、document三种。这里我们介绍后两种,location和document对象。

    报表软件如何引用HTML DOM的windows对象进行开发

    在HTML DOM中,有三个基础的对象经常被使用:windows对象、location对象和document对象。其中,windows对象代表浏览器中的窗口,包括当前窗口以及任何由当前页面所打开的窗口或框架。 window对象是JavaScript中最...

    第14讲 DOM编程-Document对象(一).ppt

    【Document对象】是JavaScript中用于访问和操作HTML或XML文档的核心接口,它是整个DOM(文档对象模型)的基础。本讲主要介绍了Document对象的一些关键属性和方法,这些特性使得JavaScript能够与网页内容进行交互。 ...

    BOM和DOM对象的简单介绍

    在 JavaScript 中,BOM( Browser Object Model)和 DOM(Document Object Model)是两个重要的对象模型。BOM 主要关注浏览器窗口和屏幕的信息,而 DOM 则是文档对象的树形结构,从而描述了 HTML 文档的结构和内容。...

    javascript的document对象

    ### JavaScript的Document对象详解 在Web开发中,`Document`对象是浏览器提供的核心对象之一,它代表了当前加载的HTML文档,并提供了与该文档交互的方法和属性。掌握`Document`对象的基本用法对于进行前端开发至关...

    什么是document对象?什么是window对象?.pdf

    document对象和window对象是JavaScript中最为重要的内置对象,它们是网页交互的核心。document对象代表了整个HTML文档,而window对象则代表了浏览器窗口本身。理解这两个对象可以帮助开发者实现动态网页内容的更新、...

    038HTML-DOM对象.doc

    DHTML 对象模型如图-1 所示,包括 window 对象、document 对象、screen 对象、history 对象、location 对象、navigator 对象等。 2.1.2. screen 对象 screen 对象每个 Window 对象的 screen 属性都引用一个 Screen...

    Javascript的document对象

    JavaScript的`document`对象是浏览器环境中核心的全局对象之一,它代表了当前HTML或XML文档,并提供了与文档交互的各种方法和属性。这个对象允许我们访问和操作文档的元素、属性以及执行与用户交互相关的操作。在...

    BOM对象和DOM对象

    在Web开发中,BOM(Browser Object Model)对象和DOM(Document Object Model)对象是两个至关重要的概念,它们分别处理浏览器交互和HTML文档结构的解析。 **一、BOM对象** BOM,浏览器对象模型,主要负责处理...

    DOM对象DOM对象DOM对象.doc

    DOM,全称Document Object Model,是一种标准,它允许程序员和脚本语言如JavaScript与HTML或XML文档进行交互。DOM将整个文档表示为一个树形结构,每个节点代表文档的一部分,如元素、属性、文本等。在JavaScript中,...

    JavaScrip文档对象模型(DOM).

    文档对象模型(Document Object Model,简称DOM)是一项由万维网联盟(W3C)制定的标准,旨在提供一种独立于编程语言的接口,使得开发者能够通过脚本语言(如JavaScript)动态地访问和更新文档的内容、结构和样式。...

    js中的BOM和DOM对象

    在这个过程中,JavaScript与两种关键的对象模型紧密相关:浏览器对象模型(BOM)和文档对象模型(DOM)。本文将深入探讨这两个概念,并通过实例解析它们的工作原理。 **浏览器对象模型(BOM)** BOM全称为Browser ...

    javascript 的document对象

    JavaScript 的 `document` 对象是浏览器环境中访问和操作HTML文档的主要接口。它包含了与当前页面相关的各种属性、方法和事件,使得JavaScript能够与用户界面进行交互。以下是对 `document` 对象及其相关属性和方法...

    【JavaScript源代码】JavaScript中BOM和DOM详解.docx

    JavaScript中的BOM(Browser Object Model,浏览器对象模型)和DOM(Document Object Model,文档对象模型)是两个核心概念,它们都是JavaScript与网页交互的关键部分。 **BOM(浏览器对象模型)** 1. **Window...

    document对象内容集合.txt

    文档对象模型(Document Object Model,简称DOM)是HTML和XML文档的编程接口,它将文档表示为树形结构,使得程序可以更改文档的结构、样式和内容。在给定的文件“document对象内容集合.txt”中,我们深入探讨了与DOM...

    前段JS开发和DOM兼容问题大全

    在前端开发中,JavaScript和DOM操作是核心组成部分,而不同浏览器之间的兼容性问题常常困扰开发者。以下将详细介绍在处理JavaScript和DOM时遇到的兼容性问题以及相应的解决方法。 一、DOM节点的访问兼容性问题及...

    JavaScript的document对象和window对象详解

    JavaScript是一种运行在浏览器端的脚本语言,其核心功能之一就是操作网页文档(DOM)和与浏览器窗口交互。在JavaScript中,有两个极为重要的全局对象:document和window。document对象表示整个HTML文档,而window...

    javascript中的BOM与DOM、JS核心.pdf

    JavaScript使用心得之BOM与DOM,主要是使用JavaScript的基本语句,以及BOM和DOM提供的对象的属性和方法,来操作各个BOM对象的属性以及各个DOM节点的属性甚至是结构,从而控制浏览器窗口行为和文档内容及其展示。

    第十五章JavaScript-HTMLDOM对象2022优秀文档.ppt

    本章主要讨论了几个关键的DOM对象,包括History、Location、Screen、Navigator、Event、Document、Form、Select和Option对象,以及如何利用它们实现浏览器交互。 首先,History对象允许开发者对用户的浏览历史进行...

Global site tag (gtag.js) - Google Analytics