BOM的认识-CSDN博客

本文链接：https://blog.csdn.net/Xalbadora/article/details/118056857

BOM对象概念

BOM:浏览器对象模型（地址栏，历史记录，屏幕，滚动条，关闭）

顶级对象window

 //       下面5个属于window的子对象
 //               document  文档对象
 //               history   历史记录对象
 //               location  地址栏对象
 //               screen    屏幕对象
 //               navigtor  浏览器对象

自定义对象
内置对象 Array String Math
宿主对象

window的五大对象

一. document文档对象

body 获取body的
documentElement 获取html的
console.log(document.body);
console.log(document.documentElement); // 获取html的

二. screen对象

    // console.log(screen.width);
    // console.log(screen.height);

三. history 历史记录

    // console.log(history);
    //   方法：back()   后退一个页面
    //   方法：forward()   前进一个页面
    //        history.go(-1)  往后退
    //        history.go(1)  往前进

四.location地址栏

    //   host: 主机 域名   host: "www.jd.com"
    //   href： 地址栏信息
    //   pathname:路径名
    //   port: 端口
    //   protocol： 协议名 https http  ftp 
    //  方法：reload() 刷新

//  window.location.reload() ;// 刷新，放在全局位置会一直刷新。f5
//  window.location.reload(true) ;// 强制刷新，放在全局位置会一直刷新。f5+shift

//  不建议放在window全局下

五. navigator: 浏览器相关信息

// console.log(navigator);

window相对的属性和方法

window对象

属性：

innerHeight（浏览器的高度,带滚动条）

innerWidth（浏览器的宽度,带滚动条）

 console.log(window.innerWidth);//
 console.log(innerWidth);//window对象可以省去
 console.log(document.body.clientWidth);//获取元素的可视宽度

方法：

alert() 弹出框等价于 window.alert()
confirm()确认框带返回值，点击确定返回true，点击取消返回false
prompt()输入框待返回值返回你输入的内容
setInterval(回调函数,毫秒值)设置间歇型定时器
clearInterval(定时器名称) 清除间歇型定时器
setTimeout(回调函数,毫秒值) 设置延迟性定时器（超时定时器）
clearTimeout 清除延迟性定时器（超时定时器）
onload() : 等页面资源（页面图片，文字，标签）加载完毕后执行
onscroll(): 页面滚动时会触发
onresize(): 页面窗口变化时触发

BOM操作元素

操作元素

    // 1. 先获取元素
    var oDivs = document.getElementsByTagName('div')[0]
    // 2. 设置样式
    // oDivs.style.width = getRandomNum()+'px'
    // oDivs.style.height = getRandomNum()+'px'
    // oDivs.style.backgroundColor = getColor()
    // oDivs.style.fontSize = getNum(10,80)+'px'
    // oDivs.style.color = "#000"

    oDivs.className = 'box'

    // 3. 设置内容   innerHTML 支持标签   innerText不支持标签
    // oDivs.innerHTML = '<a href="http://www.baidu.com">百度</a>'
    oDivs.innerText = '<a href="http://www.baidu.com">百度</a>'

表格的增加

document.createElement('标签名')
// 1. 获取到tbody
var oTbody = document.getElementById('tbody')
// 创建一行
var oTr = document.createElement('tr')
// 创建列
var oTd1 = document.createElement('td')
var oTd2 = document.createElement('td')
var oTd3 = document.createElement('td')

// 往td1，td2，td2中设置内容
oTd1.innerText = '语文'
oTd2.innerText = '数学'
oTd3.innerText = '英语'

// 把每一列追加放到行中
oTr.appendChild(oTd1)
oTr.appendChild(oTd2)
oTr.appendChild(oTd3)

// 把行追加到tbody中
oTbody.appendChild(oTr)

总结

Window对象

属性：innerWidth和innerHeight document.body.clientWidth
方法：
alert() 弹出框等价于 window.alert()
confirm()确认框带返回值，点击确定返回true，点击取消返回false
prompt()输入框待返回值返回你输入的内容
setInterval(回调函数,毫秒值)设置间歇型定时器
clearInterval(定时器名称) 清除间歇型定时器
setTimeout(回调函数,毫秒值) 设置延迟性定时器（超时定时器）
clearTimeout 清除延迟性定时器（超时定时器）
onload() : 等页面资源（页面图片，文字，标签）加载完毕后执行
onscroll(): 页面滚动时会触发
onresize(): 页面窗口变化时触发
onclick

window对象的五大对象：

document 文档对象
screen 屏幕对象
history 历史对象
location 地址栏信息
navigator 浏览器对象

DOM：获取元素oDiv
document.getElementById(‘id名称’)
document.getElementsByClassName(‘class名称’)
document.getElementsByName(‘name值’)
document.getElementsByTagName(‘标签名称’)

var oDiv = document.querySelector(‘标签名’)；获取的是一个，而且是第一个
var oDiv = document.querySelector(’.类名’) 获取的是一个，而且是第一个
var oDiv = document.querySelector(’#id’)获取的是一个，而且是第一个
var oDiv = document.querySelectorAll(‘标签名’)
var oDiv = document.querySelectorAll(‘div’)

操作元素（分为样式和内容和固有属性）
oDiv.className=’’
oDiv.style.属性名=‘属性值’

 //         oDiv.innerHTML = ''
 //         oDiv.innerText = ''
 //  元素的固有属性  element.属性名
 //         oIpt.value = ''
 //         oImg.src = ''

创建元素 oDiv document.createElement(‘标签名’)
追加元素父元素.appendChild(子元素)
删除元素元素.remove() 删除元素本身
删除元素父元素.removeChild(即要删除的节点)