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

转载自蔠缬草

巴特西

前端开发之BOM和DOM（转载）

BOM

DOM

最新文章

热门文章