JavaScript BOM/DOM

倾城 • • 杂文

一、BOM
（1） 认识BOM
BOM：浏览器对象模型
JavaScript代码中访问和操作浏览器的各种信息的一系列特殊对象，包含了 浏览器窗口对象、地址信息对象、历史访问对象、版本信息对象、网页文档对象

  • 窗口对象：可以操作浏览器弹窗、获取/设置浏览器尺寸、获取/设置浏览器位置等等

  • 地址对象：可以操作浏览器访问url地址，实现根据地址切换不同页面

  • 历史对象：可以操作浏览器访问历史记录

  • 版本对象：可以获取浏览器和当前运行浏览器的操作系统信息

  • 文档对象：DOM对象，描述了当前浏览器打开的网页文档
    （2） 常见BOM对象
    常见BOM对象：

  • 窗口对象：window

    • alert() / confirm() / prompt() / 其他bom对象...

  • 地址对象：location || window.location

    • href：地址url信息

  • 历史对象：history

    • back()后退
    • forward()前进
    • go()访问某个记录

  • 版本信息对象：navigator

    • appName：浏览器内核名称
    • appVersion：浏览器版本信息
    • userAgent：浏览器相关信息，一般和版本信息相同

  • 文档对象：document

    • 文档对象，当前浏览器打开的网页文档

  • 屏幕对象：screen

    • 当前计算机屏幕信息
      （3） 重要属性/事件

  • window.innerHeight / window.innerWidth : 窗口尺寸

  • window.onload / window.onresize / window.onscroll ：事件操作

  • location.href：访问地址

  • history.back() / forward() / go()：访问历史记录

  • navigator.appName / appVersion / userAgent浏览器版本信息
    （4） 案例：吸顶菜单




  
  
  
  Document
  
  

  
    
    
内容0001

    
内容0002

    
..

（5） 案例：回到顶部

二、DOM
（1） 认识DOM
DOM：文档对象模型
JavaScript语法上提供的可以用于对网页文档进行标签查询、创建/修改/删除标签、操作标签属性、操作标签样式、操作标签内容的一系列函数！
（2） 查询DOM对象
网页文档对象的操作，首先通过代码查询标签对象——DOM对象
① 基础查询函数

函数 描述
document.getElementById(idVal) 根据id属性值查询单个DOM对象
document.getElementsByClassName(cVal) 根据class属性查询多个DOM对象
document.getElementsByTagName(tVal) 根据标签名称查询多个DOM对象
document.getElementsByName(nVal) 根据name属性查询多个DOM对象
document.querySelector(selector) 根据css选择器查询第一个匹配的对象
document.querySelectorAll(selector) 根据css选择器查询多个匹配的对象

② 查询其他标签

函数 描述
domObj.getElementById()/querySelecto().. 查询某个标签中包含的标签对象
domObj.parentElement 获取父标签对象
domObj.parentNode 获取父节点对象
domObj.children 获取子标签对象
domObj.childNodes 获取子节点对象(包含文本节点)
domObj.previousElementSibling 获取上一个兄弟标签节点
domObj.previousSibling 获取上一个节点(包含文本节点)
domObj.nextElementSibling 获取下一个兄弟标签节点
domObj.nextSibling 获取下一个节点（包含文本节点）
document.forms 查询网页中的所有表单

（3） 标签对象操作
DOM操作中我们已经可以查询对应的节点：需要对节点进行增加、修改和删除的操作

函数 描述
document.createElement() 创建标签节点
document.createTextElement() 创建文本节点
document.appendChild() 末尾追加一个子节点
document.insertBefore() 指定标签前面增加一个节点
document.removeElement() 删除一个指定节点
document.replaceElement() 替换/修改一个指定节点

（4） 标签属性操作

函数 描述
obj.id = val 设置id属性
obj.className = val 设置class属性
obj.setAttribute(属性名称, 变量值) 给标签对象设置属性名称="属性值"的属性
obj.getAttribute(属性名称) 获取标签对象的属性名称对应的属性值
obj.removeAttribute(属性名称) 删除标签上属性名称对应的属性

（5） 标签样式操作
行内样式：设置和获取

代码 描述
obj.style.样式名称 获取指定标签的行内样式
obj.style.样式名称 = 值 给指定标签设置/添加 行内样式

外联样式：非行内样式，一般操作过程中主要用于获取操作，代码中设置样式推荐/指定使用行内样式

代码 适用浏览器 描述
obj.currentStyle.样式名称 IE 获取样式
getComputedStyle(obj).样式名称 非IE 获取样式

当前标签对象的特殊属性

属性 描述
obj.offsetHeight 高度
obj.offsetWidth 宽度
obj.offsetLeft 离窗口左侧的距离
obj.offsetTop 离窗口顶部的距

（6） 标签内容操作

代码 描述
obj.innerText 获取或者设置文本内容
obj.innerHTML 获取或者设置标签文本内容
obj.textContent 获取或者设置文本内容，等价innerText
obj.createTextNode() 创建文本节点，标准DOM操作，一般不推荐使用

版权声明：
作者：倾城
链接：https://www.techfm.club/p/49663.html
来源：TechFM
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>