BOM&&DOM

BOM&&DOM

BOM的概念

提供了独立于页面内容而与浏览器进行交互的对象,其核心对象是window

在浏览器中,window对象(注意,w为小写)指当前的浏览器窗口。它也是所有对象的顶层对象。

“顶层对象”指的是最高一层的对象,所有其他对象都是它的下属。JavaScript规定,浏览器环境的所有全局变量,都是window对象的属性

判断浏览器类型

  var t = navigator.userAgent;

  if(t.indexOf('Trident')!= -1){

  console.log('ie内核')

  }else if(t.indexOf('Presto')!= -1){

  console.log('欧朋')

  }else if(t.indexOf('Chrome')!= -1){

  console.log('chrome ')

  }else if(t.indexOf('Safari')!= -1){

  console.log('Safari ')

  }else{

  console.log('其他')

  }

判断是移动端还是PC(重要)

//移动端

  var ua = navigator.userAgent.toLowerCase();

  if (ua.indexOf('mobi') !=-1) {

    // 手机浏览器

    console.log('手机')

  } else {

    // 非手机浏览器

    console.log('非手机')

  }

判断是移动端还是PC(重要)

//移动端

  var ua = navigator.userAgent.toLowerCase();

  if (ua.indexOf('mobi') !=-1) {

    // 手机浏览器

    console.log('手机')

  if(ua.indexOf('android') !=-1){

  console.log('移动端 安卓')

  }else if(ua.indexOf('ipod') !=-1

        || ua.indexOf('iphone') !=-1

        || ua.indexOf('ipad') !=-1)

  {

  console.log('移动端  苹果手机')

  }

  } else {

    // 非手机浏览器

    console.log('非手机')

  }

location对象

location对象包含有关当前 URL 的信息。

location对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

属性:hash、host、hostname、href、pathname、port、protocol、search

href:设置或返回完整的 URL。(常用)

hash:设置或返回从井号 (#) 开始的 URL(锚)。

search:设置或返回从问号 (?) 开始的 URL(查询部分?id=1&name=abb)。(常用)

host  设置或返回主机名和当前 URL 的端口号。

hostname  设置或返回当前 URL 的主机名。

pathname  设置或返回当前 URL 的路径部分。

port  设置或返回当前 URL 的端口号。

protocol  设置或返回当前 URL 的协议。

location对象

方法:assign(url), replace(url) , reload()

assign()  加载新的文档。

reload()  重新加载当前文档。

replace()  用新的文档替换当前文档。

window.open();

打开一个新的浏览器窗口。

window.close();

关闭浏览器窗口。

alert(arg1)

显示带有一段消息和一个确认按钮的警告框。

prompt(arg1,arg2)

显示可提示用户输入的对话框。

confirm(arg1) (偶尔)

显示带有一段消息以及确认按钮和取消按钮的对话框。

history对象:

   history对象保存着用户上网的历史记录,从窗口被 打开的那一刻算起.

   后退一页  history.go(-1)     history.back()

   前进一页  history.go(1)      history.forward()

   前进两页  history.go(2)

window.onload

load事件发生在文档在浏览器窗口加载完毕时。window.onload属性可以指定这个事件的回调函数。

window.onload = function() {

  console.log('页面加载完毕')

};

定时器和延时器

JavaScript 提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成。

  延时器

  setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。

  var timerId = setTimeout(func, delay);

上面代码中,setTimeout函数接受两个参数,第一个参数func是将要推迟执行的函数名,第二个参数delay是推迟执行的毫秒数。

  console.log(1);

  //推迟执行

  setTimeout(function(){

  console.log(2)

  },1000);

  console.log(3);

广告弹出自动关闭

  需要使用 oDiv.style.display = 'block';//让div显示

  需要使用 oDiv.style.display = 'none';//让div隐藏

window.onscroll

可以监听页面的滚动

window.onscroll = function(){

  console.log('页面滚动')

}

一旦页面滚动就会触发onscroll 函数

document.scrollingElement

document.scrollingElement属性返回文档的滚动元素。也就是说,当文档整体滚动时,到底是哪个元素在滚动。

这个属性返回的文档的根元素document.documentElement(即)。

获取可视区域距离页面顶部的距离

document.scrollingElement.scrollTop;

设置滚动条的距离页面顶面的距离

document.scrollingElement.scrollTop = 0

或者也可以像下面

  获取

  scrollTop = document.scrollingElement.scrollTop

  scrollTop=document.documentElement.scrollTop  || document.body.scrollTop

设置

document.documentElement.scrollTop  = 0

 document.body.scrollTop = 0;

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

document.getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点,则返回null。

getElementsByName,根据name属性

document.getElementsByClassName方法返回一个类似数组的对象(HTMLCollection实例),包括了所有class名字符合指定条件的元素(兼容问题,低版本ie)

document.getElementsByTagName方法搜索 HTML 标签名,返回符合条件的元素。它的返回值是一个类似数组对象(HTMLCollection实例)

document.querySelector方法接受一个 CSS 选择器作为参数,返回匹配该选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null。

var el1 = document.querySelector('.myclass');

document.querySelectorAll方法与querySelector用法类似,区别是返回一个NodeList对象,包含所有匹配给定选择器的节点。

elementList = document.querySelectorAll('.myclass');  

DOM节点类型(元素和文本)

DOM 的最小组成单位叫做节点(node)。文档的树形结构(DOM 树),就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。


Element:网页的各种HTML标签(比如、等)

Text:标签之间或标签包含的文本  (创建Text)

注释也是节点

通过 nodeType属性可以查看类型

如果节点是一个元素节点,nodeType 属性返回 1。

如果节点是属性节点, nodeType 属性返回 2。

如果节点是一个文本节点,nodeType 属性返回 3。

如果节点是一个注释节点,nodeType 属性返回 8

文档碎片  document.createDocumentFragment()  作为容器使用,可以避免频繁操作dom

你可能感兴趣的:(BOM&&DOM)