JavaScript-BOM操作和DOM操作

系列文章目录

一、BOM操作

BOM全称Browser Object Model（浏览器对象模型），该模型用来操作浏览器对象。

1. 常用对象及其属性和方法

• window对象：

  该对象指的就是浏览器的页面窗口。

  属性或方法	说明
  window.innerHeight	窗口高度
  window.innerWidth	窗口宽度
  window.open(‘指定url’, ‘’, ‘height=高度px,width=宽度px’)	以指定尺寸在子页面中，打开该url
  window.close()	关闭页面

• window.navigator对象：

  属性	描述
  appName	返回浏览器的名称。
  appVersion	返回浏览器的平台和版本信息。
  browserLanguage	返回当前浏览器的语言。
  platform	返回运行浏览器的操作系统平台。
  systemLanguage	返回操作系统使用的默认语言。
  userAgent	返回浏览器用于 HTTP 请求的用户代理头的值
  userLanguage	返回操作系统的自然语言设置。

  userAgent属性是只读的，包含客户端的一些基本信息，这些信息在每次浏览器 HTTP 请求时发送到服务器。

  useragent举例：

  “Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36 Edg/92.0.902.84”

• window.history对象：

  方法	说明
  history.back()	回退到上一个页面
  history.forward()	前进到下一个页面

• window.location对象：

  属性或方法	说明
  location.href	返回当前页面的url
  location.href=指定url	跳转到指定url
  location.reload()	重新加载页面，即刷新

2. 弹出框

• 警告框：

  alert("警告信息！")
  

• 确认框：

  confirm("你是认真的吗？")
  

  在确认框中，按下确定返回true，取消则返回false。

• 提示框：

  prompt("提示信息","默认值")
  

  确认框中，提示信息下有一个输入框，默认值显示在该输入框中，可以删除。

  点击确定就会返回输入框里的内容。

3. 计时器

• 等待一段时间后只触发一次（一次）：

  var 变量名 = setTimeout(函数名,时间)
  

  如果定时器需要被清除，则需要使用变量保存定时器。

  时间参数的单位为毫秒。

  清除：

  clearTimeout(变量名)
  

• 每隔一段时间就触发一次（循环）：

  var 变量名 = setInterval(函数名,时间)
  

  清除：

  clearInterval(变量名)
  

二、DOM操作

DOM全称Document Object Model（文档对象模型），当网页被加载时，浏览器会创建页面的DOM。通过DOM，js就能够访问和改变 HTML 文档的所有元素。

• DOM树：

  HTML DOM模型被构造为对象的树。

  
  图片引用自https://www.cnblogs.com/juham/p/13361668.html

1. 查找元素（标签）

想要通过DOM操作元素，就先要查找并获取元素！！！

• 直接查找：

  // id查找
  var 变量 = document.getElementById('元素id')
  // 类查找
  var 变量 = document.getElementsByClassName('元素类名')
  // 标签查找
  var 变量 = document.getElementsByTagName('元素标签名')
  

  类查找和标签查找，通常会找到多个元素。因此，这两种查找方法返回的是元素组成的数组，方法名中Element后面也多了个s。

• 间接查找：

  在上面方法的基础之上，还可以通过元素间的关系查找元素。

  // 获取父元素
  元素.parentElement
  // 获取所有子元素，返回数组
  元素.children
  // 获取第一个子元素
  元素.firstElementChild
  // 获取最后一个子元素
  元素.lastElementChild
  

2. 节点（元素）操作

• 创建元素：

  document.createElement('标签名称')  //返回元素对象
  

• 在元素内部添加元素：

  外部元素.appendChild(要添加的元素)  // 追加到子元素的最后面
  

• 获取或设置元素内部的文本：

  元素.innerText = '文本内容'
  

• 获取或设置元素内部的所有内容：

  innerHtml与innerText的区别在于：后者只能操作文本内容，不能操作内部的标签，而前者则可以。

  元素.innerHtml = '内容'
  

• 在A节点内部的B节点前面，插入C节点：

  A节点.insertBefore(C节点, B节点)
  

• 添加或修改属性及值：

  元素.setAttribute('属性','值')  // 支持自定义属性
  元素.属性 = '值'  // 不支持自定义属性
  

• 获取属性值：

  元素.getAttribute('属性名')
  

• 移除元素的指定属性：

  元素.removeAttribute('属性名')
  

• 获取用户上传的文件：

  元素.fileEle.files[0]
  

3. 事件

• 事件的概念：

  事件是指发生在html元素上的一些状况，比如，元素被点击、获得焦点等。事件发生时，可以触发一些js代码的执行。

• 常见的事件：

  onclick：当用户点击某个对象。
  ondblclick：当用户双击某个对象。
  onfocus： 元素获得焦点。
  onblur：元素失去焦点。
  onchange：域的内容被改变。
  onkeydown：某个键盘按键被按下。
  onkeypress：某个键盘按键被按下并松开。
  onkeyup：某个键盘按键被松开。
  onload：一张页面或一幅图像完成加载。
  onmousedown：鼠标按钮被按下。
  onmousemove：鼠标被移动。
  onmouseout：鼠标从某元素移开。
  onmouseover：鼠标移到某元素之上。
  onselect：在文本框中的文本被选中时发生。
  onsubmit：确认按钮被点击，使用的对象是form。

• 绑定方法：

  • 方法1：

    直接在标签内写入，this关键字指的是触发事件的当前元素。

    <div onclick="changeColor(this);">点我</div>
    
    <script>
      function changeColor(this) {
        this.style.backgroundColor="green";
      }
    </script>
    

  • 方法2：

    在js脚本中，先获取触发事件的元素，然后绑定。

    <div id="d2">点我</div>
    
    <script>
      var divEle2 = document.getElementById("d2");
      divEle2.onclick=function () {
        this.innerText="呵呵";
      }
    </script>
    

• window.onload：

  当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。

  window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。