JavaScript---2

BOM和DOM

1.BOM

 BOM:Browser Object Model:浏览器对象模型

//页面的加载事件,页面中所有的内容加载完毕后才执行
window.onload=function () {
      //通过id获取元素
      var btnObj=document.getElementById("btn");
      console.log(btnObj.value);
    };

//页面关闭之后才执行,谷歌不支持,IE8支持
 window.onunload=function () {
      alert("我执行了");
    };

 定时器

setInterval：

setTimeout：一次性的定时器,执行一次

location对象

//location是window对象下的一个属性,实际上也是一个对象,主要是对浏览器的地址栏做操作

//获取地址的
console.log(location.href);
//设置地址,地址改变,就会跳转
location.href="http://www.baidu.com";
 location.assign("http://www.baidu.com");//-----一边去
location.reload();//重载,刷新

 

navigator对象

//是不同浏览器的信息
console.log(navigator.userAgent);
//系统的信息
console.log(navigator.platform);

 

history对象

document.getElementById("btn1").onclick=function () {
      location.href="11test.html";
  };
  document.getElementById("btn2").onclick=function () {
    //前进
    history.forward();
  };

 

 2.DOM

DOM:Document Object Model 文档对象模型
 页面中的顶级对象是:document
 element:元素
 node:节点
 parent:父亲
 children:孩子

html:侧重于展示数据
xml:侧重于存储数据
 CSS:侧重于美化


节点:页面中所有的内容都是节点:标签,文本(空白项),属性
元素:页面中的标签都是元素,标签

 

对象.innerText属性是设置或者获取标签中间的文本内容(一般都是成对的标签)

 

获取元素的方式

//根据id属性
    document.getElementById("id属性的值");返回一个对象
    //根据标签名字
    document.getElementsByTagName("标签的名字");返回的是多个,组成了一个数组
    //获取应用了cls类样式的标签--h5中的
    document.getElementsByClassName("类样式的名字");返回的是多个,组成了一个数组
    //根据name属性的值来获取元素
    document.getElementsByName("name属性的值");返回的是多个,组成了一个数组
    //根据选择器的方式来获取--h5中的
    document.querySelector("选择器");返回一个对象
    document.querySelectorAll("选择器");返回是多个