前端开发之BOM和DOM（转载）
BOM
BOM：是指浏览器对象模型，它使JavaScript可以和浏览器进行交互。
1，navigator对象：浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。
navigator.appName // Web浏览器全称 navigator.appVersion // Web浏览器厂商和版本的详细字符串 navigator.userAgent // 客户端绝大部分信息 navigator.platform // 浏览器运行所在的操作系统
2，screen对象：屏幕对象，可以获取一些和屏幕相关的信息。
screen.availWidth // 可用的屏幕宽度 screen.availHeight // 可用的屏幕高度
3，history对象：浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。
history.forward() // 前进一页 history.back() // 后退一页
4，location对象：用于获取浏览器的当前的网页地址，还可以重定向新的地址。
location.href // 获取URL location.href="URL" // 跳转到指定页面 location.reload() // 重新加载页面
5，弹出框相关方法
1，alert方法：警告框，让用户看到某些信息。
alert("浏览此网页注意个人信息保护！");
2，confirm方法：确认框，用于验证一些用户的选择。
confirm("是否要下载此文件？")
3，prompt方法：提示框，用于接收用户的输入值。
prompt("请在输入你的答案")
6，计时相关方法
1，setTimeout方法：设定多长时间后开始执行一段JavaScript代码。
setTimeout("JavaScript代码"，秒数) // 秒数的单位为毫秒
2，clearTimeout方法：取消计时设定。
var t=setTimeout("console.log('哈哈哈')",2000); clearTimeout(t);
3，setInterval方法：按设定的周期执行一段JavaScript代码。
setInterval("JavaScript代码",时间间隔) // 返回ID值
4，clearInterval方法：取消设定的setInterval()。
clearInterval(setInterval返回的ID值)
DOM
DOM：是指文档对象模型，使用它可以访问HTML文档中的所有元素。
DOM树：DOM规定HTML文档中的每一个元素都是一种节点。
1、document对象：文档节点，代表整个HTML文档
2、element对象：标签节点，代表文档中的标签
3、text对象：文本节点，代表标签中的文本内容
4、attribute对象：属性节点，代表标签中的属性
5、comment对象：注释节点，代表文档中的添加的注释
通过这些对象我们就可以操作HTML文档做出各种动态变化。
1，标签查找
1，直接查找
document.getElementById("id值") // 根据ID获取一个标签
document.getElementsByClassName("类名") // 根据class属性获取
document.getElementsByTagName("标签名") // 根据标签名获取标签合集
2，间接查找
document.parentElement // 父节点标签元素 document.children // 所有子标签 document.firstElementChild // 第一个子标签元素 document.lastElementChild // 最后一个子标签元素 document.nextElementSibling // 下一个兄弟标签元素 document.previousElementSibling // 上一个兄弟标签元素
2，节点操作
1，创建节点：createElement(标签名)
document.createElement("div");
2，添加节点：
// 添加一个子节点 某节点.appendChild(标签名) // 在某节点内的一个节点之前添加一个节点 某节点.insertBefore(标签名，一个节点)
3，删除节点：
// 删除某节点下的一个子节点 某节点.removeChild(要删除的节点)
4，替换节点：
// 替换某节点下的一个子节点 某节点.replaceChild(新节点, 要替换的子节点);
5，节点的文本：
// 获取节点的文本值 某节点.innerHTML // 获取节点的所有的标签以及文本值 某节点.innerText // 只获取节点的文本值 // 设置节点的文本值 某节点.innerHTML = 新的标签和文本值 某节点.innerText = 新的文本值
6，节点的属性：
// 设置节点的属性和值 某节点.setAttribute("属性名"，"属性值") // 获取节点的属性值 某节点.setAttribute("属性名") // 删除节点的属性 某节点.removeAttribute("属性名") // 标签的自带属性还可以通过 .属性名 来获取和设置 节点.自带属性名 节点.自带属性名=属性值
7，获取节点返回值：
// 适用的标签有：input select textarea 节点.value
8，节点的类的操作：
className // 获取所有样式类名(字符串) classList.remove() // 删除指定类 classList.add() // 添加类 classList.contains() // 类存在返回true，否则返回false classList.toggle() //类存在就删除，否则添加
JavaScript操作CSS的属性
1，对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2，对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
事件
当用户触发某一条件时，浏览器会运行一些JavaScript代码来改变HTML文件的一些属性，从而完成某一件事情，这个条件就是事件。
JavaScript中常用的事件：
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
事件要想被触发就要事先将其绑定到对应的标签上，JavaScript绑定事件的方式有：
1，在标签内添加事件属性
<div id="d1" onclick="changeColor(this);">点我</div> // this表示触发事件的当前元素 <script> function changeColor(ths) { ths.style.backgroundColor="green"; } </script>
2，在body标签的最后的script标签里添加事件
<div id="d2">点我</div> <script> var divEle2 = document.getElementById("d2"); divEle2.onclick=function () { this.innerText="真点啊"; } </script>
转载自蔠缬草
