BOM&DOM

BOM 

BOM是浏览器对象模型,可以理解成是当前浏览器打开的窗口。通过window对象可以操作浏览器本身它里面提供一些操作当前浏览器的对象和方法。例如:定时器方法

 定时器方法:

指定毫秒后,执行的定时器

window.setTimeout()

每隔指定的毫秒后,执行的定时器

window.setInterval()

常用属性

location属性:

location是window对象的属性,该属性用于设置网页的地址栏

location.href属性 表示跳转,当前浏览器的地址栏发生了跳转

location.reload()方法 表示刷新当前地址栏(刷新当前窗口)

history属性:

history是window对象的属性,该属性用于设置网页的浏览历史记录

forward()前进

window.history.forward()

back()后退

window.history.back()

go()方法,既可以实现前进,也可以实现后退

window.history.go(1) //前进一次

window.history.go(3) //前进三次

window.history.go(-1) //后退一次

window.history.go(-3) //后退三次

 DOM

DOM 文档对象模型,就是当前网页里面的所有内容。因为网页是在浏览器中显示的,整个浏览器是BOM,所以DOM其实是BOM的一部分。

BOM 是 window对象     DOM 就是 document对象

querySelector()方法,根据选择器的名称返回元素,如果有多个元素,只返回第一个元素。

querySelectorAll()方法,根据选择器的名称返回所有的元素。

注意:querySelectorAll()方法,返回的是集合对象,不是数组对象。可以利用展开运算符,将集合对象转为数组对象。转为数组对象后,就可以使用数组相关的方法了。let divs2 = [...divs]

 操作DOM元素的内容和样式

操作DOM的样式,有多种方式:

通过style属性直接设置

通过className属性设置类选择器

也可以通过classList属性添加多个类选择器

操作DOM的内容:

innerText属性,用于获取 和 操作 DOM的文本内容。

innerHTML属性,用于获取 和 操作 DOM的HTML内容。

操作DOM元素的属性

获取和设置标签自带的属性(原生属性),直接点

let src = img.src //src是图片标签的原生属性

获取和设置标签自定义的属性,需要通过getAttribute()和setAttribute()方法

setAttribute()方法,设置元素的属性值,需要传两个参数(属性名和属性值)

getAttribute()方法,获取元素的属性值,只需要传一个参数(属性名)

 创建和删除DOM元素

createElement()方法,用于创建DOM元素

appendChild()方法,用于在当前DOM元素中添加子元素

删除元素有两种写法:

自删 remove()方法,是元素删除自己

通过父级删除子级 removeChild()方法,是删除元素里面指定的子元素

补充1:onclick是点击事件,on表示当,click表示点击

补充2:parentElement和parentNode属性,返回父级元素

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、BOM&DOM 1.BOM BOM 是浏览器对象模型,就可以理解成是当前浏览器打开的窗口 window对象 就...
    早上好嗷阅读 1,521评论 0 0
  • 1.BOM BOM是浏览器对象模型,就可以理解成是当前浏览器打开窗口 window对象就是BOM 通过window...
    奔向我阅读 1,820评论 0 1
  • 1 BOM Browser Object Model:浏览器对象模型,是浏览器为JS提供的能对浏览器进行相关操作的...
    采蘑菇的仔仔阅读 3,610评论 0 0
  • javacsript是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览...
    Lethe35阅读 3,777评论 0 4
  • 2js组成 我们都知道,javascript有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)...
    微笑_edac阅读 3,173评论 0 0