JavaScript 宿主对象

BOM

window

全局对象

window对象是可以直接被访问到的
每一个用var声明的变量都会自动作为window对象的属性存在 function声明的函数也会自动作为window对象的方法存在
访问window对象的属性和方法可以不用写window

属性

innerWidth 获取浏览器窗口的宽度
innerHeight 获取浏览器窗口的高度
location history document screen navigator

方法

alert();
prompt();
confirm();

        let r = confirm("sdsf");console.log(r); // 弹窗，确定输出true

setInterval(); 接收两个参数回调函数和时间每隔1000ms执行一次操作

                let i = 0;let r = setInterval(function () {i++;console.log(i);if(i===5){clearInterval(r);} // i等于5，停止},1000)  // 回调函数  时间console.log(r); // 异步执行let r1 = setInterval(function () {console.log("hello");},1000)  // 回调函数  时间console.log(r1);clearInterval(r1);

clearInterval(); 停止运行
setTimeout(); 只会执行一次
clearTimeout();
getComputedStyle();

    let one = document.querySelector(".one");let styleObj = getComputedStyle(one);console.log(styleObj);console.log(styleObj.background);let borderWidth = getComputedStyle(container).borderLeftWidth;let cw = parseInt(getComputedStyle(container).width);let ch = parseInt(getComputedStyle(container).height);

onpopstate(); 当浏览器历史记录发生改变后触发
onhashchange(); 当浏览器锚链接地址发生改变后触发

history

state 当前历史记录中保存的状态信息
length 保存的历史记录条数
back(); 后退到上一条
forward(); 前进到下一条
go(0) 刷新 go(1) 前进到下一条 go(-1) 后退到上一条 go(3) 跳转到第三个
pushState(); 添加一条历史记录
replaceState(); 替换当前界面的历史记录信息

location对象

属性

protocol 协议部分 eg: http: https:
hostname 域名部分 eg: www.sxuek.com localhost www.news.baidu.com
host 域名+端口号
port 端口号 eg: :63342 :80
pathname 路径部分 eg: /s /aa/bb /index/index.html
search 查询部分 eg: ?name=zhangsan&age=19
hash 锚链接部分 eg: #top
href 完整的url

方法

reload(); 刷新重新加载所有资源
assign(); 页面跳转到另外一个地址
replace(); 页面跳转到另外一个地址（不会生成历史记录）

DOM

document

整个文档

属性

title
body

方法

querySelector();
从文档中获取某个标签对象；
参数：css选择器
querySelectorAll();
从文档中获取某个标签对象集合；
getAttribute(); 获取元素身上某个属性的值

以div为代表的普通元素对象

className 获取或设置元素的类名；

 let two = document.querySelector(".two");let three = document.querySelector(".three");two.onclick= function () {three.className = "active";}

innerHTML 获取或者设置元素的内容；

 let p = document.querySelector("p");p.innerHTML="<b>hello</b>"; console.log(p.innerHTML);

textContent 获取或设置元素的纯文本格式的内容（不能设置标签，设置标签时不识别）

 let divObj = document.querySelector("#demo");divObj.textContent="hello";console.log(divObj.textContent);

style 获取到当前的行内样式对象

let divObj = document.querySelector("#demo");divObj.onclick=function(){console.log(divObj.style);console.log(divObj.style.width);divObj.style.width="500px";divObj.style.height="500px";divObj.style.backgroundColor="red";}

classList 类名集合对象

add 添加一个类名
remove 移除一个类名

toggle 切换类名如果有则移除，如果没有则添加

 let divObj = document.querySelector("#demo");console.log(divObj.classList);divObj.classList.add("d");console.log(divObj.classList);divObj.classList.remove("c");divObj.onclick = function () {divObj.classList.toggle("active");}console.log(divObj.classList);

contains 判断是否包含某个类名

offsetWidth 实际占据的宽度
offsetHeight 实际占据的高度
scrollTop 获取或设置当前元素的内部元素滚动超出容器顶部的值（一定是正值）
scrollLeft 获取或设置当前元素的内部元素滚动超出容器左部的值

let out = document.querySelector(".out");out.onclick = function(){console.log(out.scrollTop);//内部元素超出out顶部的值的console.log(out.scrollLeft);}out.scrollLeft=200; // 直接设置超出左边的值

 let one = document.querySelector(".one");console.log(one.offsetWidth); //340

offsetLeft 距离有定位属性的前辈元素的左边距，如果前辈元素没有定位，那就是基于文档的位置
offsetTop 距离有定位属性的前辈元素的上边距，如果前辈元素没有定位，那就是基于文档的位置

事件

onClick 点击事件方法：可以通过用户鼠标点击div调用
onmouseenter 鼠标进入元素后触发

  banner.onmouseenter = function () { //鼠标移入停止播放clearInterval(st);}

onmouseleave 鼠标离开元素后触发

 banner.onmouseleave = function () { // 鼠标移除后继续播放if(flag){ // 判断是否点击了轮播点，如果为真之后代码不执行，否则接着自动播放return;}st = setInterval(move,3000); // 继续播放}

onscroll 检测元素内部发生滚动的事件(一般给window)
onfocus 获得焦点
onblur 失去焦点

方法

addEventListener(); 具体给某个事件添加事件监听函数
- transitionend

 banner.addEventListener("click",function () {});
banner.addEventListener("transitionend",function () {});

事件扩展

常用
- click 鼠标单击
- mouseenter 鼠标从外部进入
- mouseleave 鼠标进入外部
- dblclick 鼠标双击事件
- mousedown 鼠标按下事件
- mouseup 鼠标抬起事件
- mousemove 鼠标移动事件
- wheel 滚轮事件
  - mousewheel IE/Google
  - DOMMouseScroll Firefox
- contextmenu 右击事件
- mouseover 鼠标从外部进入
- mouseout 鼠标进入外部
- scroll 滚动事件
- resize 尺寸发生改变
- load 加载完成 img/window页面加载完成
键盘触发事件
- keydown 某个键按下按压不动（window document body 可输入内容的标签）
- keyup 某个键抬起
- keypress 某个键按压不动
- focus 获取焦点
- blur 失去焦点
- change 内容改变并且失去焦点
- submit 表单提交事件
- reset 表单重置事件
- transitionend 过渡结束
事件添加
- obj.on+事件名=function(){}
  - DOM为我们提供的快速的给对象添加事件的借口（1.并不是每一个事件都有 2.每个接口只能添加一个函数-事件处理程序）
- obj.addEventListener(“事件名”,function(){})
  - 元素时间用来添加事件的方法（1.可以添加任意事件 2.对于同一个事件可以添加同一个处理程序）
事件移除
- div.onclick = function(){} --> div.onclick = null;
- div.addEventListener(“事件名”,函数名) --> removeEventListener(“事件名”,函数名);
事件对象

用来保存事件发生的时候才会产生的一些信息

获取对象

div.onclick = function (val) {console.log(val);}
div.addEventListener(“click”,function (e) { console.log(e);});

事件对象的属性

鼠标事件
- screenX screenY 触发事件时鼠标距离屏幕的位置
- clientX clientY 触发事件是鼠标距离浏览器窗口的位置
- pageX pageY 触发事件时鼠标距离文档的位置
- offsetX offsetY 触发事件时鼠标距离事件源的位置
- which 用来判断当前按下的是左键还是右键
通用
- type 当前事件的名称
- target 目标事件源（事件冒泡开始的元素）
滚轮事件
- deltaY 滚轮滚动方向
键盘事件
- keycode 获取所按键的键盘码
- ctrlKey 判断当前ctrl键是否按下
- shiftKey 判断当前shift键是否按下
- altKey 判断当前alt键是否按下