XZ_JavaScript之JavaScript的两大内置对象

时间：2020-12-25 15:15:17
1、内置对象-window
所有浏览器都支持  window  对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window . document .getElementById( "header” );
与此相同：
document .getElementById( "header” );

window的尺寸
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
  • document.documentElement.clientHeight
  • document.documentElement.clientWidth
或者
  • document.body.clientHeight
  • document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：
var w = window .innerWidth || document .documentElement.clientWidth || document .body.clientWidth;

var h = window .innerHeight || document .documentElement.clientHeight || document .body.clientHeight;

其他window方法
  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口
  • window.moveTo() - 移动当前窗口
  • window.resizeTo() - 调整当前窗口的尺寸

Window Screen
window.screen  对象在编写时可以不使用 window 这个前缀。
一些属性：
  • screen.availWidth - 可用的屏幕宽度,属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
  • screen.availHeight - 可用的屏幕高度,属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

Window Location
window.location  对象在编写时可不使用 window 这个前缀。
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
一些例子：
  • location.hostname 返回 web 主机的域名
  • location.pathname 返回当前页面的路径和文件名
  • location.port 返回 web 主机的端口 （80 或 443）
  • location.protocol 返回所使用的 web 协议（http:// 或 https://)
  • location.href 属性返回当前页面的 URL。
  • location.assign() 方法加载新的文档。例如：
window . location .assign( " http://www.baidu.com ” )

Window History
window.history  对象在编写时可不使用 window 这个前缀。
window.history 对象包含浏览器的历史。
为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。
一些方法：
  • history.back() - 与在浏览器点击后退按钮相同,加载历史列表中的前一个 URL。
  • history.forward() - 与在浏览器中点击按钮向前相同,加载历史列表中的下一个 URL。

Window  Navigator
window.navigator 对象在编写时可不使用 window 这个前缀。
window.navigator 对象包含有关访问者浏览器的信息。

注意： 来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：1>navigator 数据可被浏览器使用者更改；2>浏览器无法报告晚于浏览器发布的新操作系统


< script type = "text/javascript” >
// window第一大作用
// 1.1所有全局的变量都是window的属性
// 1.2所有的全局函数都是window的方法

// 全局的变量
var age = 17 ;
// 打印结果都是17
console .log(age, window .age); 

// 全局的函数
function  Dog () {
// 这个name如果使用console.log(window.name);是打印不出来的，因为是局部变量，不是全局变量
var name = '张三' ;
console .log( '这是一条可爱的狗' );
}
// 调用
Dog();
window .Dog();

window .alert( '哈哈' );
window . console .log( '全局的’ );

function Person () {
     console .log( this );
}

Person();  // 全局的函数，属于window的方法，this 代表window
new Person(); // this 代表Person

// window的第二大作用
// 1.可以进行动态的跳转
alert( 0 );
window . location .href = ' https://www.baidu.com ' ;
// JS交互：移动端和HTML传递数据，OC中的WebView中有一个代理，可以拦截任何请求， 通过特殊协议头（XZ://），传递参数，在WebView中进行拦截
window . location .href = 'XZ://openCamera?user=zhangsan' ;
</ script >

2、内置对象-document
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

Document 对象集合
all[], 提供对文档中所有 HTML 元素的访问。
anchors[], 返回对文档中所有 Anchor 对象的引用。
applets, 返回对文档中所有 Applet 对象的引用。
forms[], 返回对文档中所有 Form 对象引用。
images[], 返回对文档中所有 Image 对象引用。
links[], 返回对文档中所有 Area 和 Link 对象引用。

Document 对象属性
body, 提供对 <body> 元素的直接访问。 对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie, 设置或返回与当前文档有关的所有 cookie。
domain, 返回当前文档的域名。
lastModified, 返回文档被最后修改的日期和时间。
referrer, 返回载入当前文档的文档的 URL。
title, 返回当前文档的标题。
URL, 返回当前文档的 URL。

Document 对象方法
close(), 关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById(), 返回对拥有指定 id 的第一个对象的引用。
getElementByName(), 返回带有指定名称的对象集合。
getElementByTagName(), 返回带有指定标签名的对象集合。
open(), 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write(), 向文档写 HTML 表达式 或 JavaScript 代码。
writeln(), 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

// document内置对象的作用：
// 1.可以动态获取网页中所有的标签的（节点）
// 2.可以对获取到的标签进行增删改查（CRUD）
< script >
JavaScript：写入 HTML 输出 
document .write( 'hello,world' );
document .write( '<input type="file" />' );
document .write( '<img src="../../03-登录界面/imgs/login_QQ.png" />' );
</ script >

点击更改图片按钮，修改图片内容
< head >
< meta charset = "UTF-8" >
< title >document的常用操作-1</ title >
< script >
// 点击更改图片按钮，修改图片
function changeImg () {
alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。
//  alert(0);
// 1.获取网页中的img标签
var img = document .getElementsByClassName( 'icon' )[ 0 ];
console .log(img);
// 2.改变src属性 
JavaScript：改变 HTML 图像
img.src = "image/img_02.jpg" ;
}
</ script >
</ head >

< body >
< img class = "icon" src = "image/img_01.jpg" alt = "美景" />
< p ></ p >
JavaScript：对事件作出反应
< button onclick = " changeImg () " >更改图片</ button >
</ body >

效果图
XZ_JavaScript之JavaScript的两大内置对象

注意：script写在header中，有的时候会不起作用，所以，大多数时候是写在body中的

点击“隐藏”按钮，让文字和图片隐藏掉，点击“显示”按钮，让文字和图片显示
< body >
< img class = "icon" src = "image/img_01.jpg" alt = "美景" />
< p id = "word" >这里风景很美</ p >
< p ></ p >
<!--onclick="hideOrShowImg()"-->
< button >隐藏</ button >


< script >
// 点击“隐藏”按钮，让文字和图片隐藏掉，点击“显示”按钮，让文字和图片显示
JavaScript：改变 HTML 内容（1.查找元素；2.改变内容）
// 1.1拿到所有要操作的标签
var icon = document .getElementsByClassName( 'icon' )[ 0 ];
var p = document .getElementById( 'word' );
var btn = document .getElementsByTagName( 'button' )[ 0 ];

console .log(btn);

// 1.2监听按钮的点击
btn. onclick = function () {

// 隐藏 css属性 style.display
if (btn.innerText == '隐藏' ) {
     p. style .display = 'none' ;
     icon. style .display = 'none' ;
     btn.innerText = '显示' ;
} else {
     // p是块级标签,默认是block
     p. style .display = 'block' ;
     // img是行内-块级标签,inline-block
     icon. style .display = 'inline-block' ;
     btn.innerText = '隐藏' ;
}
}
</ script >
</ body >

效果图
XZ_JavaScript之JavaScript的两大内置对象
标签：

相关文章