目录
一、BOM
（一）定义
- BOM：浏览器对象模型，可以和浏览器进行”对话“
- 在调用window对象的方法和属性时，可以省略window对象的引用
（二）window对象
所有浏览器都支持对象，它表示浏览器窗口
- window.innerHeight：浏览器窗口的内部高度
- window.innerWidth：浏览器窗口的内部宽度
- window.open()：打开新窗口
- window.close()：关闭当前窗口
（三）window的子对象
（1）navigator对象
浏览器对象，通过这个对象可以判定用户使用的浏览器，包含了浏览器相关信息
- navigator.appName：Web浏览器全称
- navigator.appVersion：Web浏览器厂商和版本的详细字符串
- navigator.userAgent：客户绝大部本信息
- navigator.platform：浏览器所在操作系统
（2）screen对象
不常用
- screen.availWidth：可用的屏幕宽度
- screen.availHeight：可用的屏幕高度
（3）history对象
包含浏览器的历史，可以前进或者后退
- history.fowward()：前进一页
- history.back()：后退一页
（4）location对象
获得当前页面的地址（url），并且重定向
- location.href：获取url
- location.href = "URL"：跳转到指定页面
- location.reload()：重新加载页面
（5）弹出框
-
警告框alert
点击确定才能继续操作
-
确认框confirm
点击确认返回true，点击取消返回false
-
提示框prompt
点击确认返回输入的值，点击取消返回null
（6）计时事件
-
setTimeout()
过多长时间后再执行JS语句
var t = setTimeout("JS语句/函数调用",毫秒) -
clearTimeout
取消setTimeout设置
clearTimeout(t) -
setInterval()
按照指定的周期（毫秒计）循环调用函数或者JS语句
-
clearInterval()
取消setInterval()设置的循环调用
二、DOM
（一）定义
-
DOM是页面的文档对象模型，通过它，可以访问HTML文档的所有元素。
- DOM标准规定html文档的每个成分都是一个节点
- 文档节点（document对象）：代表整个文档
- 元素节点（element对象）：代表一个元素（标签）
- 文本节点（text对象）：代表元素中的文本
- 属性节点（attribute对象）：代表一个属性，元素才有属性
- 注释是注释节点（comment对象）
- 可以创建动态的html
- 改变页面中的所有html元素
- 改变页面中的所有html属性
- 改变页面中的所有css样式
- 对页面中的所有事件做出反应
（二）查找标签
（1）直接查找
- document.getElementById：根据ID获取一个标签
- document.getElementsByClassName：根据class名获取包含改标签的数组
- document.getElementsByTagName：根据标签名获取所有标签的数组
（2）间接查找
- parentElement：父节点标签
- children：所有子标签（数组）
- firstElementChild：第一个子标签
- lastElementChild：最后一个子标签
- nextElementSibling：下一个兄弟标签
- previousElementSibling：上一个兄弟标签
（三）节点操作
（1）创建节点
document.createElement("标签名")
// 语法createElement(标签名)// 示例var divEle = document.createElement("div");// 增加属性方法1divEle.setAttribute("id","d1")//增加属性方法2,该方法无法增加自定义属性divEle.id = "d1"（2）添加节点
- somenode.appendChild(newnode)：最佳一个子节点（作为最后的子节点）
- somenode.insertBefore(newnode, 某个节点)：在某个子节点前面增加节点
var imgEle = document.createElement("img");imgEle.setAttribute("src","https://img.zhankr.net/3kvm1ad1rp2288056.png?a=1574073646113");var d1Ele = document.getElementById("d1");d1Ele.appendChild(imgEle);（3）删除节点
somenode.removeChild(要删除的节点)：通过父元素调用该方法删除
（4）替换节点
somenode.replaceChild(newnode,某个节点)
（5）属性节点
-
innerText：获取标签内文本
-
innerHTML：获取标签html代码，包括文本
-
getAttribute("属性名")：获取属性值
-
setAttribute("属性名"，“属性值”)：设置属性值，可以添加自定义属性
-
标签对象.属性：获取和设置属性，不可以设置自定义属性
-
removeAttribute("属性名")：移除属性
var divEle = document.getElementById("d1");divEle.innerText // 获取文本divEle.innerHTML // 获取html代码，包括文本divEle.innerText = "1"divEle.innerHTML = "<p>2</p>" divEle.setAttribute("age","18")divEle.getAttribute("age")divEle.removeAttribute("age")
（6）获取用户输入
标签对象.value：适用于input/select/textarea标签
var iEle = document.getElementById("i1");console.log(iEle.value);var sEle = document.getElementById("s1");console.log(sEle.value);var tEle = document.getElementById("t1");console.log(tEle.value);（7）class的操作
- className：获取所有样式类名
- classList.remove(cls)：删除指定类
- classList.add(cls)：添加类
- classList.contains(cls)：存在返回true，否则返回false
- classList.toggle(cls)：切换，存在就删除，否则添加
（8）css属性操作
// 语法obj.style.属性名obj.style.marginobj.style.widthobj.style.leftobj.style.position// 对含有中横线的CSS属性，将中横线后面的第一个字母换成大写obj.style.marginTopobj.style.borderLeftWidthobj.style.zIndexobj.style.fontFamily三、事件
HTML事件触发浏览器中的动作（action）
（一）常用事件
- onclick：当用户点击某个对象时调用的事件句柄
- onblclick：当用户双击某个对象时调用的事件句柄
- onfocus：元素获得焦点
- onblur：元素失去焦点
- onchange：域的内容被改变，比如select下拉选择标签
- onkeydown：某个键盘按键被按下
- onkeypress：某个键盘按键被按下并松开
- onkeyup：某个按键被松开
- onload：页面或图像完成加载
- onmousedown：鼠标按钮被按下
- onmousemove：鼠标被移动
- onmouseout：鼠标从某元素移开
- onmouseover：鼠标移到某元素之上
- onselect：在文本框中的文本被选中时发生
- onsubmit：确认按钮被点击，使用的对象是form
（二）绑定方式
（1）行内绑定
this是实参，表示触发事件的当前元素
函数定义过程中的ths是形参
<div id="d1" onclick="changeColor(this);">点我</div><script> function changeColor(ths) { ths.style.backgroundColor="green"; }</script>（2）标签查找动态绑定
<div id="d2">点我</div><script> var divEle2 = document.getElementById("d2"); divEle2.onclick=function () { this.innerText="呵呵"; }</script>
