Javascript学习笔记

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

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

 

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

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

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

操作的浏览器的对象有：

一.window

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

所以，我们可以通过 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节点：

我写了个实例来测试：

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

修改节点前：

修改节点后：

当然我们也可以尝试用item（）方法来获取其他信息：

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

<!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的应该知道这是什么吧，所以可以去尝试一下改变页面的名字来玩玩。

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

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

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

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

  1. JavaScript:学习笔记(9)——Promise对象

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

  2. JavaScript:学习笔记(10)——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学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

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

  7. 1.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. Codeforces Round #455 (Div. 2) D题(花了一个早自习补了昨晚的一道模拟QAQ)

    D. Colorful Points You are given a set of points on a straight line. Each point has a color assigned ...

  2. react-native-page-scrollview 的使用方法(实现酷炫的分页轮播效果,还支持自定义View)

    react-native-page-scrollview 对ScrollView的封装,可以很方便的实现水平,垂直分页轮播效果.而且可以自定义分页宽高,和侧边View的旋转,透明度,大小等. 对于原生 ...

  3. java实现上传文件夹

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 首先我们需要了解的是上传文件三要素: 1.表单提交方式:post (get方式提交有大小 ...

  4. 并发编程入门（二）：分析Boost对 互斥量和条件变量的封装及实现生产者消费者问题

    请阅读上篇文章<并发编程实战: POSIX 使用互斥量和条件变量实现生产者/消费者问题>.当然不阅读亦不影响本篇文章的阅读. Boost的互斥量,条件变量做了很好的封装,因此比" ...

  5. 【线性代数】Linear Algebra Big Picture

    Abstract: 通过学习MIT 18.06课程,总结出的线性代数的知识点相互依赖关系,后续博客将会按照相应的依赖关系进行介绍.(2017-08-18 16:28:36) Keywords: Lin ...

  6. MySQL认识索引

    什么是索引? 索引在MySQL中也叫是一种“键”,是存储引擎用于快速找到记录的一种数据结构.索引对于良好的性能非常关键,尤其是当表中的数据量越来越大时,索引对于性能的影响愈发重要.索引优化应该是对查询 ...

  7. ARTS打卡计划第十周

    Algorithms: https://leetcode-cn.com/problems/next-greater-node-in-linked-list/ 链表中下一个更大的值,双层循环及优化,后面 ...

  8. IntelliJ IDEA 2017.3 搭建一个多模块的springboot项目（三）

    你得先看完前两篇文章才可以进行第三章.这章我又新建了一个模块,起名叫project-core.建立方式与(一)里面一致,一个普通的maven模块.不需要勾选archetype的那种. 大家自己建好后, ...

  9. 关于php文件操作的几个小trick

    记录一些ctf题目中近期遇到的一些文件操作trick,不定时更新 1.move_uploaded_file 一般用来保存上传的文件,第二个参数一般是最终保存的文件名,针对此函数,若在一定条件下$new ...

  10. OUC_Summer Training_ DIV2_#16 725

    今天做了这两道题真的好高兴啊!!我一直知道自己很渣,又贪玩不像别人那样用功,又没有别人有天赋.所以感觉在ACM也没有学到什么东西,没有多少进步.但是今天的B题告诉我,进步虽然不明显,但是只要坚持努力的 ...