前端开发之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>