JS的BOM与DOM操作

BOM与DOM

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

BOM（浏览器对象模型）

window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

*如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

*没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。

接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。

一些常用的Window方法：

• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
• window.open() - 打开新窗口
• window.close() - 关闭当前窗口

主要用open的方法：

window.open('https://www.sogo.com/','_blank','width=800px,left=200px')
// 分别是网址、打开网页的方式和网页的大小

window子对象

可以通过window点出来的对象就是window的子对象。

navigator对象

浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

navigator.userAgent　　// 客户端绝大部分信息

history对象

浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。类似于网页上的这两个图标的功能。

history.forward()  // 前进一页
history.back()  // 后退一页

screen对象

screen.availWidth // 可用的屏幕宽度
screen.availHeight  // 可用的屏幕高度

location对象

location.href  // 获取URL
location.href="url"  // 跳转到某个界面
location.reload()  // 重新加载页面

弹出框

• alert() 警告框：返回值为undefined

  

• confirm() 确认框：选择确定返回true，选择取消返回false

  

• prompt() 提示框：返回用户输入的值

  

计时器*

• 设置定时任务

  在等待一定时间间隔后执行指定的任务。

  timeTask = setTimeout(function(){
      alert("警告警告！！")
  }, 3000)  // 传入函数任务和延迟时间（时间单位为毫秒）
  clearTimeout(timeTask)  // 取消定时任务（不执行任务）
  

• 循环定时任务

  loopTask = setInterval(function(){
      alert("警告警告！！")
  }, 3000)  // 每三秒弹出一次警告窗
  setTimeout(function(){
      clearInterval(loopTask)  // 结束指定的循环的任务
  }, 10000)  // 到十秒了结束循环任务
  

总结：

方法	说明
setTimeout(func, time)	设置定时任务，提交函数任务和延迟时间
clearTimeout(task)	关闭定时任务不执行，task是setTimeout()的返回对象
setInterval(func,interval_time)	设置循环定时任务，提交函数任务和间隔时间
clearInterval(loop_task)	关闭循环定时任务，loop_task是setInterval()的返回对象

DOM（文档对象模型）

html dom树

DOM标准规定HTML文档中的每个成分都是一个节点(node)

• 文档节点(document对象)：代表整个文档
• 元素节点(element 对象)：代表一个元素（标签）
• 文本节点(text对象)：代表元素（标签）中的文本
• 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
• 注释是注释节点(comment对象)　

js可以通过获取这些节点，对html中的文档标签进行操作。

节点查找

与css进行标签查找类似，我们需要先找到标签，才能精确的对标签的属性进行修改。

节点查找的方法都在document节点对象中，需要通过document句点的方式调用。

直接查找

类似css的基础选择器，我们可以对通过id、类、标签类型对标签进行查找。

1. id查找

   document.getElementById('d1')         //  根据ID获取一个标签
   // 如果有对应id，会获取那个id的标签节点，我们通常需要用一个变量接收
   d1Ele = document.getElementById('d1')  // 标签名见名知义
   

2. 类查找和标签查找

   c1Ele = document.getElementsByClassName('c1')   //  根据class属性获取
   divEle = document.getElementsByTagName('div')   // 根据标签名获取标签合集
   

间接查找

类似css的组合选择器，js所提供的间接查找方法如下：

parentElement    //     父节点标签元素
children                 //   所有子标签
firstElementChild     //   第一个子标签元素
lastElementChild         //  最后一个子标签元素
nextElementSibling       //  下一个兄弟标签元素
previousElementSibling   //  上一个兄弟标签元素

以上方法都可以通过一个直接查找过的标签通过句点的方式来使用。

节点操作

创建节点

我们可以通过js动态的创建一个标签节点：createElement("标签类型")

let divEle = document.createELement("div")  // 创建一个div标签

添加节点

创建好的节点可以插入html文档流中：

// 追加为子节点
somenode.appendChild(newnode)；
// 在某个子节点前插入节点
somenode.insertBefore(newnode,some-son-node);

删除节点和替换节点

需要分别找到父节点和要删除或替换的节点，然后通过父节点删除或替换子节点。

somenode.removeChild(要删除的节点);   // 删除节点
somenode.replaceChild(newnode, 某个节点);  //  替换节点

设置节点属性*

获取和设置文本节点的值：

	获取	设置
不识别标签文本	oneEle.innerText	oneEle.innerText = 新的文本
可以识别标签文本	oneEle.innerHTML	oneEle.innerHTML = 新的html文本

• 这里操作的是双标签中所夹着的文本内容，可能包括标签和纯文本
• 识别标签的html可以拿到标签对象和向某标签中放入html超标记文本
• 如果标签中原本有文本，那么设置就会覆盖原文本

attribute操作

// 对于标签对象中原本没有的属性也可以进行操作的attribute操作
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 对于标签已经有的属性可以通过点的方式：
inputEle.value  // 拿到value值
inputEle.value="blabla"

/*这类操作就可以拿到用户输入的内容并做些简单的判断和做出一些即时的判断*/

一些常见的属性操作：

• class操作

  标签对象.classList.add()
  标签对象.classList.contains()
  标签对象.classList.remove()
  标签对象.classList.toggle()
  

• css样式操作

  标签对象.style.样式名（样式名的-变为驼峰）
  divEle.style.backgroundColor='green'
  

事件

在网页节点上发生的一些变化都可以称之为事件，我们可以通过js代码在触发这些事件的时候对节点进行操作。

常见事件

• onclick：点击某标签时触发，经常用于空白button

• onfocus：获取焦点时触发

• onblur：失去焦点时触发

  焦点常应用于表单标签，用户操作时的动效设计

• onchange：域的内容发生变化时触发，如select标签选择的选项发生变化。

• onload：等待页面、图片加载出来触发 window.onload
  页面加载完成意味着所有的标签节点都在DOM树中了

其他常见事件

onkeydown      某个键盘按键被按下。      // 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

事件绑定

• 方式1：在内联标签中加入对应事件的属性

  <div id="d1" onclick="changeColor(this);">点我</div>
  <script>
    function changeColor(thisEle) {   // this传入触发的标签（但是形参不能用this命名）
      thisEle.style.backgroundColor="green";
    }
  </script>
  

  关于事件属性的值，直接填入函数名以及对应的实参，this实参有特殊的含义。

  this实参是指触发的标签，我们可以通过this对标签进行一些属性操作等等。

• 方式2：在js中，对标签进行查找，绑定对应的事件属性

  <div id="d2">点我</div>
  <script>
    let divEle2 = document.getElementById("d2");
    divEle2.onclick=function () {  // 绑定属性通过句点的方式
      this.innerText="呵呵";   // 这种方式this参数直接传入
    }
  </script>