Javascript学习笔记——操作浏览器对象

时间:2022-09-02 14:09:08

Javascript学习笔记

目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改,

浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。IE最新版为Edge。

 
Javascript学习笔记——操作浏览器对象

对于IE浏览器,有些浏览器提供的对象中的属性兼容性是对版本有要求的,比如IE>8才能支持window对象中的innerWidthinnerHeight属性。

当然,目前我们经常使用的是谷歌浏览器,所以兼容性还是比较强的。

目前来回忆一下今天所学的浏览器对象的操作:

操作的浏览器的对象有:

一.window

首先是window对象,刚开始就提到了innerWidthinnerHeight属性,通过名称我们可以很容易看出,这就是浏览器内部的长和宽,内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。

所以,我们可以通过 console.log 去访问控制台,获取当前窗口大小

console.log(window.innerWidth+' '+innerHeight);

当然,有内部宽高,也肯定有整体宽高

console.log(window.outerWidth+' '+window.outerHeight);

一般全屏后,浏览器的outerWidth属性就是你当前电脑屏幕的宽度,可以通过你的NVIDIA去观察一下。

二.navigator

navigator对象的作用一般是获取浏览器的基本信息,我们可以通过一下代码来获取浏览器的基本信息:

console.log('浏览器名称:' + navigator.appName);
console.log('浏览器版本:' + navigator.appVersion);
console.log('浏览器设置的语言: ' + navigator.language);
console.log('操作系统类型:' + navigator.platform);
console.log('浏览器设定的User-Agent字符串:' + navigator.userAgent);

谷歌浏览器的控制台是带有语法填补的,可以通过快捷键快速输入。

三.screen

顾名思义就是获取屏幕信息,一般是获取屏幕分辨率及颜色位数。

console.log(screen.width+' '+screen.height+' '+screen.colorDepth);

四.location

location对象一般用于获取浏览器的URL及URL各个部分的值:

console.log(location.href);//获取整个url

或者各部分信息:

location.protocol;//使用的协议
location.host;//主页
location.port;//当前url的端口号
location.pathname; //路径
location.search;//search 属性是一个可读可写的字符串,可设置或返回当前 URL 的查询部分(问号 ? 之后的部分)。
location.hash; //URL 的锚部分(从 # 号开始的部分)

五.document

深入学习我们会发现,HTML文档被浏览器解析后就是一棵DOM树,而document就是就是整个树的根节点,所以我们要访问其他节点都可以通过document来访问,最常用的查找就是ID和Tag Name.

用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点:

我写了个实例来测试:

Javascript学习笔记——操作浏览器对象

很明显,我通过document.getElementById来修改了相应ID的信息。这样,我们就可以很轻松的找到子节点并且进行修改:

修改节点前:

Javascript学习笔记——操作浏览器对象

修改节点后:

Javascript学习笔记——操作浏览器对象

当然我们也可以尝试用item()方法来获取其他信息:

Javascript学习笔记——操作浏览器对象

或者用简单清晰明了的方法来表示:

<!DOCTYPE html>
<html>
<body>
<p id="demo">获得 body 元素首个子节点的名称。</p>
<button onclick="myFunction()">点击</button>
<script>
function myFunction()
{
var x=document.getElementById("demo");
x.innerHTML=document.body.childNodes.item(0).nodeName;
}
</script> </body>
</html>

可以自己去尝试一下。

document也有个改变比较直观的属性是title,这个title就是<title></title>,它可以动态改变,学过HTML的应该知道这是什么吧,所以可以去尝试一下改变页面的名字来玩玩。

Javascript学习笔记——操作浏览器对象

Javascript学习笔记——操作浏览器对象

尝试在控制台输入document.title = 'xxx';就可以了。

暂时就先记在这咯,下一个应该会去记忆一下操作表单获取用户输入的方法。

--------------------------------------------------------------------------------------------------------------------------------------

Javascript学习笔记——操作浏览器对象

Javascript学习笔记——操作浏览器对象的更多相关文章

  1. JavaScript&colon;学习笔记&lpar;9&rpar;——Promise对象

    JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...

  2. JavaScript&colon;学习笔记&lpar;10&rpar;——XMLHttpRequest对象

    JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新 ...

  3. javascript学习笔记 - 面向对象 理解对象

    ECMAScript 中有两种属性:数据属性和访问器属性 一 属性类型 1.数据属性.数据属性有4个描述其行为的特性 [[Configurable]]表示能否通过delete删除属性从而重新定义属性: ...

  4. javascript学习笔记02--面向对象学习

    js面向对象编程 1.  javascript 是一种基于对象的编程    object-based(基于对象):遇到的所有对象都是对象2.javascript没有类class,但是有新的原型对象,习 ...

  5. JavaScript学习笔记之原型对象

    本文是学习<JavaScript高级程序设计>第六章的笔记. JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返 ...

  6. JavaScript学习笔记&lpar;一&rpar;——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  7. 1&period;4(JavaScript学习笔记) window对象的属性及方法

    一.window对象 window对象代表当前窗口,所有全局对象都是windows的属性, 例如document是window的属性,window.document.writer("&quo ...

  8. JavaScript学习笔记之BOM对象

    目录 1.Window 2.Window Screen 3.Window Location 4.Window History 5.Window Navigator 浏览器对象模型(Browser Ob ...

  9. JavaScript学习笔记之DOM对象

    目录 1.Document 2.Element 3.Attribute 4.Event 1.Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允 ...

随机推荐

  1. 自定义右键菜单,禁用浏览器自带的右键菜单&lbrack;右键菜单实现--Demo&rsqb;

    许多从事Web开发的会发现有些事,我们需要禁用浏览器本事自带的右键菜单,而实现自定义的右键菜单下面我们也来实现一个自定义的右键菜单 首先来创建JSP页面 <%@ page language=&q ...

  2. 应用内存优化之OnLowMemory&amp&semi;OnTrimMemory

    1.应用内存onLowMemory& onTrimMemory优化 onLowMemory& onTrimMemory简介:OnLowMemory是Android提供的API,在系统内 ...

  3. 8&period;cadence&period;CIS&lbrack;原创&rsqb;

    一.CIS数据库配置 ------ ---------------------------- --------------- ------------------ ---- 二.CIS放置元件 --- ...

  4. Navigation Drawer&lpar;导航抽屉&rpar;

    目录(?)[-] 创建一个导航抽屉 创建抽屉布局 初始化抽屉列表 处理导航项选点击事件 监听导航抽屉打开和关闭事件 点击应用图标来打开和关闭导航抽屉 创建一个导航抽屉 导航抽屉是一个位于屏幕左侧边缘用 ...

  5. struts2语法--error页面如何捕获&quest;

    如果地址栏输入了不带后缀或者action为后缀, 不存在的页面跳转到error.jsp: struts.xml配置" <package name="default" ...

  6. jobss目录结构

    一. JBoss的目录结构       bin:包含各种脚本文件以及相关文件,比如run.bat和shutdown.bat批处理文件.        client:存储配置信息和可能被Java客户端应 ...

  7. Java知多少(7)类与对象

    Java是一门面向对象的编程语言,理解Java,首先要理解类与对象这两个概念. Java中的类可以看做C语言中结构体的升级版.结构体是一种构造数据类型,可以包含不同的成员(变量),每个成员的数据类型可 ...

  8. ie6&comma;ie7下a标签无法点击(转载)

    前几天在做一个网站的引导页面,因为都是用图片,所以按钮需要用空a标签来做,发现a标签在IE6与IE7中点击无效中点击不了,其他浏览器都正常.一开始以为是z-index的问题,但不论z-index设置多 ...

  9. task 定时设置

    每天凌晨2点  0 0 2 * * ?和每天隔一小时 0 * */1 * * ? 例1:每隔5秒执行一次:*/5 * * * * ? 例2:每隔5分执行一次:0 */5 * * * ? 在26分.29 ...

  10. c&num;使用 HtmlAgilityPack来进行抓取和解析来获得table表格信息

    项目上要用到抓取网页,最后选用了HtmlAgilityPack来进行. 官网地址:https://html-agility-pack.net/,可以看一下 基础的: // From File var ...