image.png

BOM

  • BOM 提供了很多对象，用于访问浏览器的功能，这些 功能与任何网页内容无关。
  • BOM将浏览器中的各个部分转换成了一个一个的对象， 我们通过修改这些对象的属性，调用他们的方法，从而 控制浏览器的各种行为。 | BOM对象 | 在浏览器中都是作为window对象的属性 | | —- | —- | | Window | 代表的是整个浏览器的窗口，同时window也是网页中的全局对象 | | Navigator | 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 | | Location | 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面 | | History | 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
    由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页 | | Screen | 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息 |

DOM

获取元素

document.querySelector(‘选择器’) 根据选择器返回第一个元素对象
document.querySelectorAll(‘选择器’) 根据指定选择器返回
document.getElementsByClassName(‘类名’) 根据类名返回原始的对象集合
document.documentElement html
document.body body
document.title title

操作元素

element.id / .value / .title 元素属性操作
element.style 行内样式操作
element.className 类名样式操作
element.classList .add
.remove
.toggle

image.png

自定义属性

element.setAttribute(‘属性’)

element.getAttribute(‘属性’)

removeAttribute 移除属性

image.png

H5设置获取自定义属性 ie11才支持

设置 :

|| element.setAttribute(‘data-index’,1)
获取: element.dataset.index || element.dataset[‘index’]
image.png