报表软件JS开发引用HTML DOM的location和document对象

简介:

上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows、location、document三种。这次就继续介绍后两种,location和document对象。

 

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)



 

参考完整代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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() 方法来关闭文档。

示例:



 

参考代码:

1
2
3
4
5
6
7
8
9
<html>  
<body>  
    
<script type= "text/javascript" >  
document.write( "Hello World! " , "Hello You! " , "<p style='color:blue;'>Hello World!</p>" )  
</script>  
    
</body>  
</html>


本文转自 雄霸天下啦 51CTO博客,原文链接:http://blog.51cto.com/10549520/1767520,如需转载请自行联系原作者
相关文章
|
1月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
33 0
|
26天前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
21 0
|
4月前
|
JavaScript 前端开发
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
65 1
|
3天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
15天前
|
JavaScript
为实例方法创建错误的引用(js的问题)
为实例方法创建错误的引用(js的问题)
11 0
|
15天前
|
JavaScript
为实例方法创建错误的引用(js的问题)
为实例方法创建错误的引用(js的问题)
|
2月前
|
JavaScript 前端开发
HTML DOM 集合(Collection)
HTML DOM 集合(Collection) 是用于表示和操作 HTML 文档的树状结构的数据结构。DOM 代表文档对象模型(Document Object Model),它是 HTML 文档的树状结构表示,允许通过 JavaScript 编程语言来访问和修改 HTML 文档的内容、结构和样式。
34 7
|
2月前
|
监控 前端开发 JavaScript
局域网远程管理软件的图形化界面设计(使用HTML/CSS)
在现代企业和组织中,局域网远程管理软件发挥着至关重要的作用。为了更好地实现对局域网内设备的远程管理,图形化界面设计显得尤为重要。本文将探讨如何使用HTML和CSS创建一种直观而功能强大的远程管理软件界面。
215 0
|
3月前
|
缓存 JavaScript Java
thymeleaf引用JS加随机数防止缓存
thymeleaf引用JS加随机数防止缓存
19 0
|
3月前
|
前端开发 JavaScript
html+css+js开发一个猜数字游戏
【1月更文挑战第5天】html+css+js开发一个猜数字游戏
35 1