继上一博文:javaScript的组成–BOM浏览器对象模型
Global对象和window对象的区别
global对象无论从任何角度都是不存在的,直接打印不出来。global对象只是一个规范,表明他是一个全局对象,任何属性或方法如果不属于任何对象,这样这些属性和方法都属于global这个对象。window对象是对global对象这个规范的实现。任何属性和方法如果不属于任何对象,都属于window对象。比如定义的全局变量、函数等都属于window对象。
如window.history对象可以直接写成histroy;alert(a)等于alert(window.a);
document对象 文档对象
内存中的对象,代表一个html或xml文档。每次打开一个网页,都会在内存中生成一个html或xml文档对象,来操作整个文档。
常用方法:
①document.getElementById(“form1”);//获得html标签、html元素、dom对象等。
②document.write();//往body中写内容,分了两种情况:1)页面没加载完,直接写到body中 。 2)页面加载完成,之后使用该方法是覆盖body中内容
document.writeln();//不能换行,因为写在body中是html代码,不写<’br’/>是无法换行的。
③document.open();document.close();//用来打开、关闭文档输出
④getElementsByName根据指定名称获得节点集合。
getElementsByTagName获得指定标签的节点集合(获得所有的div节点、a节点)
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
document.write("世界!");
function test () {
document.write("123<br/>");
document.write("456<br/>");
}
</script>
</head>
<body>
你好
<input type="button" name="btn1" id="btn1" value="点我" onclick="test()" />
</body>
</html>
<script type="text/javascript">
document.getElementById("div1");
</script>
<div id="div1"> </div>
location地址栏对象
常用属性和方法:
- href属性,用来获得url
- search属性,获得传过来的?之后的内容
- reload(boolean flag)刷新方法,默认false,内容修改,才会被重新加载,改为true,无论如何都重新加载。
- assign(“网址”);跳到指定网址
示例代码:
第一个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="按钮.html" method="get">
用户名:
<input type="text" name="btn1" id="btn1" value="" />
<input type="submit" value="提交"/>
</form>
</body>
</html>
第二个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function href () {
alert(location.href);
}
function search () {
alert(location.search);
}
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="href" onclick="href();"/>
<input type="button" name="btn2" id="btn2" value="search" onclick="search();"/>
<input type="button" name="btn4" id="btn4" value="刷新" onclick="location.reload()" />
<input type="button" name="btn3" id="btn3" value="跳转baidu" onclick="location.assign('http://www.baidu.com')" />
</body>
</html>
navigator浏览器对象
常用属性:userArgent获得浏览器描述,可以获得浏览器的版本
示例:
<script type="text/javascript">
alert(navigator.userAgent);
</script>
screen屏幕对象
获得关于屏幕的一些描述信息。
示例:
<script type="text/javascript">
for (var prop in screen) {
document.write(prop + "=" + screen[prop] +"<br/>");
}
</script>
补充:console控制台对象
常用方法:1.console.dir(对象); 需要在firefox中安装firebug工具查看,查看对象属性和方法。
2.日志对象,从上到下,级别从高到低
console.log(“我是log”); //普通信息 全部
console.debug(“我是debug”); //调试
console.info(“我是info”); //消息
console.warn(“我是warn”); //警告
console.error(“我是error”); //错误F
好处:代替了各种调试方法,不影响页面内容
3.如何打断点?
“脚本”选项卡中打断点,进行单步调试。
右下角窗口可写片段js代码,不需要新建页面。
4.测试js运行时间,查看效率
示例代码:
<script type="text/javascript">
/*console.time("test");
for(var i=1;i<=1000;i++){
document.write(i + "<br/>");
}
console.timeEnd("test");*/
//老方法
var start = new Date().getTime();//long start = System.currentTimeMillis();
//代码
for(var i=1;i<=1000;i++){
document.write(i + "<br/>");
}
var end = new Date().getTime();//long end = System.currentTimeMillis();
alert(end-start);//单位 毫秒 System.out.println("该程序运行的时间是" + (end-start) + "毫秒");
</script>