js组成
- EcmaScript js基础语法
- BOM 浏览器相关 浏览器对象模型、
- DOM 文档对象模型 操作html
BOM
window对象
是js顶层对象，全局对象 window属性和方法，都可以省略window直接使用window:是浏览器BOM相关api，基本都是 window对象的
BOM相关api
?alert() window.alert(); 弹窗prompt(); window.prompt() 弹窗接受用户输入信息confirm() 确认框 返回值：当用户点击确认时，返回true,点击取消 返回 false
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.onscroll=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对象也是对象 具备对象的基础语法获取： 元素.属性名 元素[‘属性名‘]设置 元素.属性名=值 元素[‘属性名‘]=值
{ nodeName:"DIV", innerHTML:"内容", className:"class属性", style:{
}}dom对象：在html中自定义的属性，是不在dom中的，就不能通过对象名.属性名，js为了方便使用，封装了方法 getAttribute() 可以获取自定义属性
总结： 获取元素的属性 元素.属性 可以获取元素本来就有的属性 也可以获取在js中自定义的属性 90%需求 元素[属性] 在属性是一个变量的时候用 5% getAttribute() 万能 在html中自定的属性， 就用它 5% 设置： 元素.属性 = 值 元素[属性]=值 元素.setAttribute("属性",值)
获取和设置元素的类型
className属性 可以获取 可以设置
元素.className获取
元素.className = 值
获取和设置元素的内容
文本内容
innerText 只包含文本 不包含标签
html内容
innerHTML 包含标签 *
获取元素的样式
js中是通过内联的形式来设置元素的样式原因： 1，内联的优先级别最高， 保证js代码添加样式一定有效果 2，只针对当前标签有效，不会影响全局的代码<div style="width:200px;height:200px"></div>{ 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:都要记??
原文地址：https://www.cnblogs.com/cxf1214/p/11403067.html