[JavaScript知识库]【JavaScript】DOM、BOM和Event

DOM

DOM（文档对象模型）

介绍

浏览器获取到HTML代码，结构化一个浏览器能识别并且可以操作的对象模型（Document Object Model），模型被结构化为对象数

节点操作

1. 创建节点

   // 创建一个DOM片段
   createDocumentFragment();
   // 创建一个具体的元素
   createElement();
   // 创建一个文本节点
   createTextNode();
   

2. 增、删、改、插

   // 添加
   appendChild()
   // 移除
   removeChild()
   // 替换
   replaceChild()
   // 插入（在已有节点之前）
   insertBefore（）
   

3. 查找

   // 通过标签获取
   getElementByTagName()
   // 通过类名来查找元素（可能是一个数组）
   getElementsByClassName()
   // 通过元素Id获取（Id具有唯一性）
   getElementById()
   

4. 改变元素

   // 改变元素的 inner HTML
   element.innerHTML = new html content	
   // 改变 HTML 元素的属性值(标签)
   element.attribute = new value	
   // 改变 HTML 元素的属性值(标签)
   element.setAttribute(attribute, value)	
   // 改变 HTML 元素的样式(js对象)
   element.style.property = new style	
   

BOM

BOM（浏览器对象模型）

介绍

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话

Window对象：window代表浏览器的窗口，所有全局的JavaScript对象、函数和变量都自动改称为window对象的成员。

• 全局变量：window的属性
• 全局函数：window的方法

常用操作

navigator

• navigator.userAgent

  //获取浏览器信息，区分出来浏览器类型
  var ua=navigator.userAgent  
  var isChrome=ua.indexOf('Chrome')
  console.log(isChrome)
  

window

• 获取属性

  // 浏览器窗口的内高度（以像素计）
  window.innerHeight
  // 浏览器窗口的内宽度（以像素计）
  window.innerWidth
  

  var w = window.innerWidth
  || document.documentElement.clientWidth
  || document.body.clientWidth;
  
  var h = window.innerHeight
  || document.documentElement.clientHeight
  || document.body.clientHeight; 
  

• 基础操作

  // 打开新窗口
  window.open() 
  // 关闭当前窗口
  window.close()
  // 移动当前窗口
  window.moveTo() 
  // 重新调整当前窗口
  window.resizeTo()
  

Screen

• 属性

  // 宽度
  screen.width
  // 高度
  screen.height
  // 可用宽度
  screen.availWidth
  // 可用高度
  screen.availHeight
  // 色深
  screen.colorDepth
  // 像素深度
  screen.pixelDepth
  

window.location（location）

• 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面

  // 输出URL地址
  console.log(location.href)
  // 输出协议https:
  console.log(location.protocol)
  // 输出域
  console.log(location.host)
  // 输出路径
  console.log(location.pathname)
  // “?fish”
  console.log(location.search)
  // 输出“#”后的东西
  console.log(location.hash)
  

Event

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

常用事件