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)
参考完整代码:
<html>
<head>
<scripttype="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 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() 方法来关闭文档。
示例:
参考代码:
<html>
<body> <scripttype="text/javascript">
document.write("Hello World!","Hello You! ","<p style='color:blue;'>HelloWorld!</p>")
</script> </body>
</html>
JS开发引用HTML DOM的location和document对象的更多相关文章
- 报表软件JS开发引用HTML DOM的location和document对象
上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows.location.document三种.这次就继续介绍后两种,locati ...
- 报表软件JS开发引用HTML DOM的windows对象
HTML DOM是W3C标准(是HTML文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM定义了用于HTML的一些列标准的对象,以及访问和处理H ...
- DOM操作(Window.document对象)
间隔与延迟: 间隔一段代码: window.setInterval("代码",间隔执行秒数) 延迟一段时间后执行一段代码: window.setTimeout("执行代码 ...
- JavaScript的DOM操作。Window.document对象
间隔执行一段代码:window.setlnteval("需要执行的代码",间隔毫秒数) 例 : window.setlnteval("alert("你 ...
- JS之BOM和DOM(来源、方法、内容、应用)
1.Javascript组成(此文为转载) JavaScript的实现包括以下3个部分: 1)核心(ECMAScript):描述了JS的语法和基本对象. 2)文档对象模型 (DOM):处理网页内容的方 ...
- 【翻译】十大要避免的Ext JS开发方法
原文地址:http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid/ 作者:Sean Lanktree Sean ...
- Node.js开发Web后台服务
一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
- 十大要避免的Ext JS开发方法
原文地址:http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid/ 作者:Sean LanktreeSean i ...
- MPVUE - 使用vue.js开发微信小程序
MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发 ...
随机推荐
- 【图文详解】Hadoop集群搭建(CentOs6.3)
本文主要详细地描述了hadoop集群的搭建以及一些配置文件的说明,用于自己复习以及供新人学习,若有错误之处还请指出. 前期准备 先给出我的集群架构: 到hadoop官网下载好hadoop安装包http ...
- JavaScript基础知识必知!!!
JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型. JS作用:表单验证,减轻服务端的压力:添加页面动画效果:动态更改页面内容:Ajax网络请求. 下面简单介 ...
- 【博弈】【HDU】取石子游戏
取石子游戏 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- C/C++静态数组与动态数组的区别
简介 以下三行代码有什么区别? int a[10]; int *a = (int*)malloc(sizeof(int)*10); int *a = new int[10]; 第一行代码定义a为包含1 ...
- JUnit单元测试教程(翻译自Java Code Geeks)
JUnit单元测试教程--终极指南 JUnit单元测试教程终极指南 说明 单元测试简介 1 什么是单元测试 2 测试覆盖 3 Java中的单元测试 JUnit简介 1 使用Eclipse实现简单JUn ...
- linux TCP头部的构造的简单分析
TCP的头部的构造是在函数tcp_transmit_skb()中进行的 函数片段如下: /* Build TCP header and checksum it. */ th = tcp_hdr(skb ...
- Docker与容器
Docker介绍 1. Docker 主要解决什么问题 Docker 对外宣称的是Build.Ship 和Run,Docker 要解决的核心问题就是快速地干这三件事情.它通过将运行环境和应用程序打包到 ...
- Web自动化框架LazyUI使用手册(6)--8种控件对应的class,及可对其进行的操作
概述: 本文详述8种控件对应的class,及可对其进行的操作 回顾: 回顾一下,下文中的工具设计思路部分: http://blog.csdn.net/kaka1121/article/details/ ...
- Android 的 Sqlite基本操作
在 SQL 数据库中保存数据 使用数据库 将数据保存到数据库对于重复或结构化数据(比如契约信息)而言是理想之选. 本课程假定您基本熟悉 SQL 数据库并且可帮助您开始在 Android 中使用 SQL ...
- 剑指Offer——完美+今日头条笔试题+知识点总结
剑指Offer--完美+今日头条笔试题+知识点总结 情景回顾 时间:2016.9.28 16:00-18:00 19:00-21:00 地点:山东省网络环境智能计算技术重点实验室 事件:完美世界笔试 ...