JS学习笔记Day9

一、BOM

  (一)概念:是 Browser object model 的缩写,简称浏览器对象模型。

    BOM 提供了独立于内容而与浏览器窗口进行交互的对象

    由于 BOM 主要用于管理窗口与窗口之间的通讯,因此其核心对象是 window

  (二)Window窗口对象

  

    1.Window 对象是 BOM 的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为 window 的子对象,由于window 是顶层对象,因此调用它的子对象时可以不显示的指明 window 对象。

  (三)Window 内置对象(location/history/navigator)及方法

    1. Location 对象

      1)Location 对象包含有关当前 URL (统一资源定位器)的信息,是 window 对象的一个部分,可通过 window.location 属性来访问

      2)href 属性:是一个可读可写的字符串,可设置或返回当前显示的文档的完整 URL,因此,我们可以通过为该属性设置新的 URL,使浏览器读取并显示新的 URL 的内容

      语法:location.href = URL;

         Demo:location.href = http://www.baidu.com;

      3)Reload()用于重新加载当前文档(刷新)

      语法:location.reload();

         Location.reload(true):刷新页面,不使用缓存

    2.History 对象

      1)History.back():载入历史列表中前一个网址,相当于按下“后退”按钮

      2)History.forward():载入历史列表中后一个网址(如果有的话),相当于按下“前进”按钮

      3)History.go():打开历史列表中一个网址

        注:要使用这个方法,必须在括号内指定一个正数或负数

    3.Navigator 对象

      1)appName:浏览器名称

      2)appVersion:浏览器版本

      3)platform:操作系统注:最新的浏览器已经全面放弃以上这些属性

      4)userAgent:用户代理信息,通过该属性可以获取浏览器及操作系统信息

二、onload 事件

三、定时器

  (一) SetInterval():(间歇式)计时器:按照指定的周期(以毫秒计)来调用函数或计算表达式

  (二) clearInterval():可取消由 setInterval()设置计时

  (三) setTimeout()(超时)定时器:用于在指定的毫秒数后调用函数或计算表达式

  (四) clearTimeout():可取消由 setTimeout()方法设置的定时

  (五) demo:1. 页面换背景

四、Window.onscroll 事件

  (一) Document.documentElement.scrollTop 代表垂直的滚动条,向下滚动的距离

  (二) Document.body.scrollTop//chrome 代表垂直的滚动条,向下滚动的距离

  (三) Document.documentElement.scrollLeft

  (四) Document.body.scrollLeft

  (五) 兼容写法:

    1. document.documentElement.scrollTop || document.body.scrollTop

    2. document.documentElement.scrollLeft || document.body.scrollLeft

四、DOM

  (一) 概念:DOM 即(Document Object Model)文档对象模型

  (二) 作用:通过 JavaScript 操作 DOM,可以重构整个 HTML 文档、添加、移除、改变或重排页面上的项目

  (三)DOM 的基本操作(查询、修改、创建、删除)

    查询

    1. getElementById():获取特定 ID 元素的节点。如果找到相应的元素则返回该元素的节点对象,如果不存在,则返回 null

    2. getElementsByTagName():获取相同元素的节点列表(对象伪数组)

    3. getElementsByName():获取相同名称的节点列表

    4. getElementsByClassName():获取相同 class 属性的节点列表(IE9 以下不兼容)

    5. document.documentElement:获取 html 的方法

    6. document.body:获取 body 的方法

    7. querySelector : 通过选择器获取一个元素(IE7 及以下不兼容),返回一个对象

    8. querySelectorAll : 通过选择器获取一组元素(IE7 及以下不兼容),返回一个集合

    创建

    1. createElement():创建一个元素节点

    2. createTextNode():创建一个文本节点

    3. 扩展:document.createDocumentFragment()创建文档碎片

    修改

    1. 父节点.replaceChild(newNode, oldNode) 方法用新节点替换某个子节点

     删除

    1. 父节点.removeChild(nodeChild):删除节点

    扩展:追加节点

    1. appendChild():向指定节点的子节点列表末尾追加新的节点

  (四)DOM 元素类型(元素和文本)

    1.node 节点属性

    节点可以分为元素(标签)节点、属性节点和文本节点,而这些节点又有三个非常有用的属性,分别为:nodeName、nodeType 和 nodeValue.

    2.节点类型:元素 1 属性 2 文本 3

               

猜你喜欢

转载自www.cnblogs.com/liufuyuan/p/10382325.html
今日推荐