DOM与BOM

博客分类: 笔记 阅读次数: comments
DOM (1) BOM (1) JS (1)

DOM与BOM

DOM (1) BOM (1) JS (1)

你必须要知道的DOM与BOM

概述

在浏览器器环境下,浏览器器窗口口下包含了了多个部分:当前的浏览器器窗口口与⻚页面面内的节点。当我们使用用 JavaScript进行行行操作时,分别对应了了BOM和DOM。

DOM

元素节点的获取

  1. 基本获取方方式 document.getElementById() document.getElementsByClassName() document.getElementsByTagName() document.getElementsByName() // 使用用选择器器的形式获取元素 document.querySelector() document.querySelectorAll() 唯一一 类数组 类数组 类数组 选取单一一元素 选取多个元素
  2. 节点查找 节点:包含元素节点和文文本节点 childNodes 子子节点 children 子子元素 firstChild 第一一个子子元素 firstElementChild 第一一个元素子子节点 lastChild 最后一一个子子节点 lastElementChild 最后一一个子子元素节点 previousSibling 上一一个兄弟节点 previousElementSibling 上一一个兄弟元素节点 nextSibling 下一一个兄弟节点 nextElementSibling 下一一个兄弟元素节点 parentNode 父父级节点 parentElement 父父级节点
  3. 节点操作cloneNode() 克隆隆节点,默认只克隆隆本身 cloneNode(true) 深度克隆隆 removeChild() 移除子子节点 replaceChild() 替换子子节点 appendChild() 追加子子节点
  4. 属性操作方方法 操作属性的添加、获取、移除 setAttribute() 设置属性 getAttribute() 获取属性 removeAttribute() 移除属性
  5. 元素内容的设置 innerHTML 设置元素内容,识别HTML标签 textContent 设置元素文文本内容,HTML标签会被转为实体字符直接显示
  6. 元素样式设置 ele.style.background = ‘red’; ele.className = ‘active’;

    BOM

    概念:Browser Object Model 浏览器器对象模型 作用用:描述了了与浏览器器进行行行交互的方方法和接口口 特点:是各个浏览器器厂厂商根据DOM在各自自浏览器器的实现(各个浏览器器可能在实现和变现的形式上有差距)

    DOM

    概念:Document Object Model 文文档对象模型 作用用:描述了了处理理网网⻚页内容的方方法和接口口 特点:是W3C规范的标准 说明: window是BOM的对象,是DOM中的顶层对象,由此说明BOM>window>DOM BOMBOM的核心心是window,而而window对象又又具有双重⻆角色色,它既是通过js访问浏览器器的接口口,又又是一一个全局的Global(全局)对象

    常⻅见对象

    screen对象

    存放显示有关浏览器器屏幕的信息的对象

  7. width 获取屏幕的宽度
  8. height 获取屏幕的高高度
  9. availWidth 获取屏幕可用用的宽度(去除任务栏的值)
  10. availHeight 获取屏幕可用用的高高度(去除任务栏的值)
history对象

描述有关浏览器器历史记录的对象

  1. length 描述当前⻚页面面内历史记录的数量量
  2. go(n) ⻚页面面进行行行前或后的跳转,n可为负数也可为正数
  3. back() 回到前一一个⻚页面面
  4. forward() 向前进一一个⻚页面面
location对象

描述有关地址栏信息的对象

  1. href 文文件的地址
  2. host 地址的主机(包括端口口号)
  3. hostname 地址的主机名
  4. pathname 文文件路路径名
  5. port 端口口号
  6. protocol 协议
  7. hash 锚点
  8. search 地址栏包含的参数信息
  9. reload() ⻚页面面重载方方法 reload(true) ⻚页面面强制重载(默认表单数据刷新时是不不清除的)
  10. replace() ⻚页面面替换,将当前的地址替换已存储的值,不不能通过“前进”和“后退”进行行行访问
  11. location.href 进行行行赋值操作,跳转⻚页面面
frames对象

描述了了包含当前⻚页面面中所有的子子窗口口在内的信息对象

  1. frames 是一一个对象
  2. frames[n] 获取第n个子子窗口口
  3. 获取子子窗口口内的元素 frames[0].document.getElementById()
  4. 在子子窗口口内获取父父级窗口口和顶层窗口口 self 表示自自身窗口口 selft.parent 父父级窗口口 self.top 表示顶层窗口口

描述了了包含当前浏览器器的名称、版本等信息的对象

  1. 关于浏览器器的名称和版本相关信息一一定程度上不不准确
  2. cookieEnabled 客户端浏览器器是否支支持cookie true 支支持 false 不不支支持
  3. onLine 判断是否连网网 true 连接 false 未连接
常⻅见方方法
  1. alert() 警告框
  2. confirm() 确认框
  3. prompt() 用用于显示可提示用用户进行行行输入入的对话框
  4. setInterval() 周期性定时器器 clearInterval() 清除一一次性定时器器
  5. setTimeout() 一一次性定时器器 clearTimeout() 清除一一次性定时器器
  6. window.open() 打开浏览器器窗口口 var baidu = window.open(‘http://www.baidu.com’, ‘name’, ‘width=200,height=100, top=100’)
  7. window.close() 关闭open打开的窗口口 baidu.close() 关闭名字为baidu的窗口口 window.close() 关闭当前的窗口口 self.close() 关闭自自身窗口口
常⻅见值的获取
  1. 屏幕可视区域的宽度document.documentElement.clientWidth
  2. 屏幕可视区域的高高度 document.documentElement.clientHeight
  3. 文文档的宽度 document.documentElement.scrollWidth
  4. 文文档的高高度 document.documentElement.scrollHeight
  5. 水水平滚动条的值 document.documentElement.scrollLeft 文文档水水平滚动条 ele.scrollLeft 元素水水平滚动条
  6. 垂直滚动条的值 document.documentElement.scrollTop ele.scrollTop 元素垂直滚动条
  7. 元素的宽度 ele.offsetWidth
  8. 元素的高高度 ele.offsetHeight
  9. 元素相对第一一个参考对象的水水平偏移 ele.offsetLeft
  10. 元素相对第一一个参考对象的垂直偏移 ele.offsetTop 文文档垂直滚动条

本文由 倪建成学习时 编辑，只是普通笔记。若是对你有用，可以自行转载

最后编辑时间为:2019-08-24 00:00:00