目录
一、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");
// 增加属性方法1
divEle.setAttribute("id","d1")
//增加属性方法2,该方法无法增加自定义属性
divEle.id = "d1"
（2）添加节点
- somenode.appendChild(newnode)：最佳一个子节点（作为最后的子节点）
- somenode.insertBefore(newnode, 某个节点)：在某个子节点前面增加节点
var imgEle = document.createElement("img");
imgEle.setAttribute("src","https://images.cnblogs.com/cnblogs_com/wick2019/1592198/t_191116084835%E7%BA%B9%E9%BE%99%E5%B0%91%E5%A5%B3.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.margin obj.style.width obj.style.left obj.style.position // 对含有中横线的CSS属性，将中横线后面的第一个字母换成大写 obj.style.marginTop obj.style.borderLeftWidth obj.style.zIndex obj.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>