BOM DOM

BOM
BOM相关api
alert() window.alert(); 弹窗
prompt(); window.prompt() 弹窗接受用户输入信息
confirm() 确认框
返回值：当用户点击确认时，返回true,点击取消 返回 false
window对象
是js顶层对象，全局对象 window属性和方法，都可以省略window直接使用
window:是浏览器
BOM相关api，基本都是 window对象的
history对象
history对象，主要保存，浏览器 历史记录相关的信息
三个方法history.forward() 前进一步history.back() 后退一步history.go() go(1) 前进一步 go(0) 刷新 go(-1) 后退一步
location对象
保存的是浏览器地址栏相关信息：获取当前窗口地址，可以改变当前窗口的地址
href属性 保存了当前窗口的地址（完整的地址）
获取href属性，获取了当前地址 改变了href属性，跳转页面
reload() 方法 刷新
navigator
记录浏览器一些基本信息 属性 可以不记
userAgent 记录浏览器基本信息

• navigator.appName` 获取当前浏览器的名称
• navigator.appVersion 获取当前浏览器的版本号
• navigator.platform 获取当前计算机的操作系统
  open方法 close方法
  打开和关闭窗口
  open(url,target,style)
  三个参数：

​ 1，url

​ 2，打开方式 _self _blank 默认_blank

​ 3,外观

​ “width=300,height=300,left=300,top=300”
返回值：打开的网页的window对象
close([window])
要关闭的网页的window对象 如果没有默认是当前网页的window
浏览器窗口尺寸相关
- window.innerHeight - 浏览器窗口的内部高度

• window.innerWidth - 浏览器窗口的内部宽度 包含滚动条
  可视区宽高：
  document.documentElement.clientWidth 可视区 宽度 不包含滚动条
  document.documentElement.clientHeight 可视区 高度 不包含滚动条
  滚动距离
  document.documentElement.scrollTop IE其他浏览器
  document.documentElement.scrollLeft //横向
  document.body.scrollTop 低版本chrome
  滚动事件
  scroll 鼠标滚轮滚动或者点击滚动条
  window.οnscrοll=function(){

}
load事件
网页加载事件：等待网页html/css资源加载完毕后触发
注意：
​ 一个html文件中只能出现一次，如果出现多次，下面会覆盖上面的
使用场景：
如果js写在头部，应该将所有的js代码，扔进window.onload事件中，否则获取不了元素
DOM
document object model 文档对象模型 操作html
document是最大的dom对象
dom对象：js中把标签，称为dom对象
获取元素
通过元素的id获取
document.getElementById(“id名字”)
返回值：dom对象
通过元素的标签名获取 document.getElementsByTagName(“标签名”) 返回值： 类数组
- 注意：
​ 前面的document也可以是别的dom对象，只要是它的祖先元素就可以，在祖先元素的范围内去找某些标签
好处：范围进一步缩小
通过 元素的 类名来获取元素 IE8以下不支持
document.getElementsByClassName(“class值”)
返回值：类数组
注意： 前面的document也可以是别的dom对象，只要是它的祖先元素就可以，在祖先元素的范围内去找某些标签
好处：范围进一步缩小
新增 h5选择器
document.querySelector(“css选择器”)
​ 找到第一个符合条件的元素，就立即返回，返回是dom对象
document.querySelectorAll(“css选择器”)
​ 找到所有的符合条件的元素，返回的数类数组
元素属性操作
获取元素的属性
​ 元素.getAttribute(“属性名”);
设置元素的属性
​ 元素.setAttribute(“属性名”,值); 了解
移除一个元素的属性
​ 元素.removeAttribute(“属性名”); 了解
dom对象也是对象 具备对象的基础语法
总结：
获取元素的属性
元素.属性 可以获取元素本来就有的属性 也可以获取在js中自定义的属性 90%需求
元素[属性] 在属性是一个变量的时候用 5%
getAttribute() 万能 在html中自定的属性， 就用它 5%
设置：
元素.属性 = 值
元素[属性]=值
元素.setAttribute(“属性”,值)
{
nodeName:“DIV”,
innerHTML:“内容”,
className:“class属性”,
style:{

}

}
dom对象：在html中自定义的属性，是不在dom中的，就不能通过对象名.属性名，js为了方便使用，封装了方法 getAttribute() 可以获取自定义属性
获取和设置元素的类型
className属性 可以获取 可以设置

元素.className获取

元素.className = 值
获取和设置元素的内容
文本内容
​ innerText 只包含文本 不包含标签
html内容
​ innerHTML 包含标签 *****
获取元素的样式
js中是通过内联的形式来设置元素的样式
原因：
1，内联的优先级别最高， 保证js代码添加样式一定有效果
2，只针对当前标签有效，不会影响全局的代码

{ style:{ width:"200px", height:"200px" } } 元素.style.css属性名 = "值" 注意： js中是不允许出现 - css属性中有很多连接符 background-color -webkit-transform-origin 去 - 变驼峰 元素.style.backgroundColor 元素.style.WebkitTransformOrigin="center center" 获取内联样式的值 前提：必须通过内联设置某个css属性的值，才能 通过 元素.style.属性 否则没有值 如何给元素绑定事件 js中 元素.on事件名=function(){ 事件函数 事件函数中this是指向事件源 }

function fn(){}
元素.on事件名 = fn; //不加括号
在事件中涉及到数组和数组之间一一对应关系
for循环中使用自定义属性
var arr = [1, 2, 3];
for(var i = 0; i < btns.length; i++) {
btns[i].num = i;
btns[i].onclick = function() {
alert(this.num);
}
}
BOM:
history
location
可视区宽高
滚动距离
滚动事件
load事件
dom:都要记