JS开发引用HTML DOM的location和document对象[通俗易懂]

JS开发引用HTML DOM的location和document对象[通俗易懂]本文主要介绍报表软件FineReport的JavaScript开发中,可以访问并处理的HTMLDOM的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)

JS开发引用HTML DOM的location和document对象[通俗易懂]

参考完整代码:

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

2.3 getElementByName()方法

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() 方法来关闭文档。

示例:

JS开发引用HTML DOM的location和document对象[通俗易懂]

参考代码:

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/161665.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 设置窗体透明C#代码

    上个示例是C#调用windowsapi在原来代码上加入窗体透明,控件不透明代码:1usingSystem;2usingSystem.Runtime.InteropServices;3

    2021年12月21日
    43
  • 简单的使用protobuf和protostuff「建议收藏」

    简单的使用protobuf和protostuff「建议收藏」在我们的开发过程中,序列化是经常需要处理的问题,比如在做分布式访问数据时,或者是在做redis缓存存储数据时,如果我们涉及的知识面不够广的话,可能会简单的使用JDK的序列化,也即在需要序列化的类上implements Serializable接口去实现序列化,我想说的是这种方式在小系统中尚且可以用一用,如果是并发很大的系统会受到严重影响,这是由于JDK自带的序列化效率很低,不论是时间上还是空间上。

    2022年5月27日
    38
  • win10修改dns服务器命令,Win10怎么更改首选DNS服务器地址?

    win10修改dns服务器命令,Win10怎么更改首选DNS服务器地址?DNS(DomainNameServer,域名服务器)是进行域名(domainname)和与之相对应的IP地址(IPaddress)转换的服务器。说得似乎有点过于专业,简单来说就是如果DNS出现问题,就会导致电脑可以上QQ,但是不能够上网页的现象,当然了,不管是浏览器也好,还是第三方的安全工具都能针对DNS错误进行修复,但是如果想要自己修改DNS服务器地址的话,我们应该怎么修改?方法/步…

    2022年5月27日
    102
  • 看完此文,必须明白一致性Hash算法「建议收藏」

    看完此文,必须明白一致性Hash算法「建议收藏」  一致性Hash算法在1997年由麻省理工学院提出的一种分布式哈希(DHT)实现算法,设计目标是为了解决因特网中的热点(HotSpot)问题,初衷和CARP十分相似。一致性Hash修正了CARP使用的简单哈希算法带来的问题,使得分布式哈希(DHT)可以在P2P环境中真正得到应用。  一致性Hash算法提出了在动态变化的Cache环境中,判定哈希算法好坏的四个定义:1、平衡性(Bal…

    2022年9月26日
    5
  • hibernate5二级缓存配置

    hibernate5二级缓存配置hibernate默认有一个一级缓存,就是默认的Session缓存,当我们做了一次查询,hibernate会把这个结果缓存起来,叫做一级缓存,当我们接着在这个Session会话里面再做一次同样条件的查询,hibernate不会再次查询数据库,而是直接在一级缓存中获取结果并返回。一级缓存是内置的,他也不能被卸载。一级缓存是指在同一个Session会话内的查询做的缓存,如果跨了Session,或者当前…

    2022年5月23日
    28
  • gridbaglayout布局_gridsearch

    gridbaglayout布局_gridsearch自己想做个小程序,却在布局上犯了难,使用FlowLayout和BorderLayout这些功能不够强大,使用GridBagLayout却不会,只好求助于文档了。文档对这个布局管理器介绍很详细,但是最痛苦的是英文。不过幸好它有实例,经过在网上查阅和推敲实例,终于对GridBagLayout的使用有了一个成型的了解,拿出来与大家分享。GridBagLayout是一个灵活的布局管理器,部件如果想

    2022年9月9日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号