BOM和DOM

BOM

全称 browser object model - 浏览器对象模型

浏览器对象模型：使用对象组成的结构对浏览器进行操作

navigator

存储浏览器信息

appName ==> application name ==> 应用程序名称 ==> 记录的是浏览器名称

history

操作浏览器的历史记录

back():后退一个页面

scss
btn.onclick = function() {
    // 回退
    history.back()
}

forward():前进一个页面

scss
btn.onclick = function() {
    // 前进
    history.forward()
}

go():前进或后退多个页面

scss
btn.onclick = function() {
    // history.back()

    // go方法可以前进或后退多个页面
    // 数字是几，就前进或后退几个页面
    // 前进用正数   后退用负数
    history.go(-2)
}

location

操作地址栏url

属性href：获取/设置完整的url

ini
获取完整的地址
location.href
console.log(location.href);

设置完整的地址
location.href = 新地址
location.href = 'http://baidu.com'

属性search：获取地址url中的参数/数据部分

ini
设置地址栏参数
location.search = ?键=值&键=值
location.search = '?a=1&b=2'

获取地址栏参数
location.search
console.log(location.search);

属性hash：获取地址栏中的锚点

python
设置锚点
location.hash = #单词
location.hash = '#abc'

获取锚点
location.hash
console.log(location.hash);

window的属性

获取浏览器窗口大小

innerWidth属性

arduino
console.log(innerWidth);

innerHeight属性

arduino
console.log(innerHeight);

都会包含滚动条的宽和高

window方法

弹出层

javascript
window.alert(123)
window.confirm(123)
window.prompt('143qwasdf')

全局定义的函数，都属于window的方法

全局定义的变量，都属于window的属性

定时器

setInterval(函数, 毫秒数)：让函数每隔毫秒数，就执行一次，会不停的执行下去

利用返回值，可以停止定时器 - clearInterval(返回值)

setTimeout(函数, 毫秒数)：让函数延迟毫秒数执行一次，就这一次

返回这个定时器在页面中是第几个，利用返回值，可以停止定时器 - clearTimeout(返回值)

javascript
var a = setTimeout(function() {
    console.log(1111);
}, 3000)
console.log(a);

btn.onclick = function() {
    clearTimeout(a)
}

window.open(url):打开新的标签页

javascript
window.open('http://baidu.com') // 新打开一个标签页

window.close():关闭窗口

window.scrollTo(x, y):设置卷去的距离

javascript
控制滚动条位置
window.scrollTo(200, 500)

window事件

window.onload：当所有资源加载完成后，触发执行

window.onresize：当浏览器窗口大小发生改变，触发执行

javascript
window.onresize = function() {
    console.log(innerWidth, innerHeight);
}

window.onscroll：当浏览器卷去的距离发生改变，触发执行

javascript
window.onscroll = function() {
    console.log(666);
}

DOM

document object model 文档对象模型,由对象组成的结构操作html文档

获取标签

document.querySelector(css选择器)

获取满足css选择器的第一个标签,返回一个标签

css
var li = document.querySelector('ul li')
console.log(li);

document.querySelectorAll(css选择器)

获取所有满足css选择器的标签,返回一个集合

ini
var lis = document.querySelectorAll('ul li')
console.log(lis);

document.getElementById('id名') - 只能获取到一个标签

javascript
console.log( document.getElementById('var') );

document.getElementsByClassName('类名') - 只要标签有这个类名，就都可以获取到

javascript
console.log( document.getElementsByClassName('uu') );
console.log( document.getElementsByClassName('uu')[0] );

document.getElementsByTagName('标签名')

javascript
复制代码
console.log( document.getElementsByTagName('ul') );
console.log( document.getElementsByTagName('ul')[0] );

document.getElementsByName('name属性的值')

javascript
console.log( document.getElementsByName('myul') );

html基本结构标签

html标签

javascript
console.log( document.documentElement );

body标签

javascript
console.log( document.body );

head标签

javascript
console.log( document.head );

网页标题

javascript
console.log( document.title ); // 获取标签

document.title = '这是我的网页' // 设置网页标题

获取标签名

标签.tagName

arduino
console.log( oDiv.tagName );

操作内容

文本内容

标签.innerText:给标签设置内容

ini
oDiv.innerText = '哈哈'

获取标签内容：标签.innerText

arduino
console.log(oDiv.innerText);

带标签的内容

arduino
oDiv.innerHTML = '<b>哈哈</b>'  //设置
console.log(oDiv.innerHTML);   //获取

表单标签的内容

标签.value = 值

ini
ipt.value = '张三'

标签.value

arduino
console.log(ipt.value);

操作属性

设置属性标签.setAttribute(属性名, 属性的值)

rust
box.setAttribute('name', 'dd')
box.setAttribute('name', 'mydd')

获取属性的值标签.getAttribute(属性名)

arduino
console.log( box.getAttribute('name') );
console.log( box.getAttribute('class') );

删除属性标签.removeAttribute(属性名)

rust
复制代码
box.removeAttribute('name')

样式操作

获取标签样式：getComputedStyle(标签)--- 返回所有css键值对组成的对象

arduino
console.log( getComputedStyle(box) );

设置样式

标签.style.css键 = 值 ---- 设置到行内

ini
box.style['margin-left'] = '100px'
如果css键中包含连字符，有歧义，就必须使用中括号语法了
将带有连字符的css键使用小驼峰写法
box.style.marginLeft = '100px'   
box.style.width = '400px'
box.style.height = '400px'

类名操作

直接操作class属性值

标签.className = 值

标签.className

rust
给box添加类名mybox
console.log(box.className);
box.className = 'mybox' // 重新设置class属性的值

标签.classList

add():添加一个类名

csharp
box.classList.add('mybox')

remove():删除一个类名

csharp
box.classList.remove('mybox')

contains():判断是否有这个类名

arduino
console.log( box.classList.contains('mybox') );

toggle():让类名在删除和添加之间切换

javascript
btn.onclick = function() {
    // 让某个类名在删除和添加之间切换
    box.classList.toggle('mybox')
}

获取卷去的距离

有文档声明

javascript
document.documentElement.scrollTop

没有文档声明

javascript
document.body.scrollTop

万能写法

javascript
var t = document.documentElement.scrollTop || document.body.scrollTop
    // console.log(t);
    
document.documentElement.scrollTop = document.body.scrollTop = 数字

短路运算

使用逻辑运算符 && 和 || 给变量进行赋值

var 变量 = 值1 && 值2

如果左边为true，就会将右边的值赋值给变量

如果左边为false，就会将左边的值赋值给变量

ini
var b = 2 && 3;
console.log(b); // 3

var c = 5 && false
console.log(c); // false

var 变量 = 值1 || 值

如果左边为true，就会将左边的值赋值给变量

如果左边为false，就会将右边的值赋值给变量

ini
var a = 1 || 2;
console.log(a); // 1

var a = 0 || 2
console.log(a); // 2

国庆倒计时案例

ini
<div class="box">
    距离国庆还有： <span>0</span> 天 <span>0</span> 小时 <span>0</span> 分钟 <span>0</span> 秒
</div>

// 获取所有标签
var spans = document.querySelectorAll('span')
daojishi()
function daojishi() {
    // 获取国庆的时间日期对象中的时间戳
    var guoqing = new Date('2023-10-1 0:0:0')
    guoqing = guoqing.getTime()
    // 获取当前的时间戳
    var now = new Date()
    now = now.getTime()
    // 求毫秒差
    var diff = guoqing - now
    // 根据毫秒差换算天、小时、分钟、秒
    var day = parseInt(diff / 1000 / 60 / 60 / 24)
    var hour = parseInt(diff / 1000 / 60 / 60) % 24
    var minute = parseInt(diff / 1000 / 60) % 60
    var second = parseInt(diff / 1000)  % 60
    // 将天、小时、分钟、秒放在对应的span标签中
    spans[0].innerText = day
    spans[1].innerText = hour
    spans[2].innerText = minute
    spans[3].innerText = second
}
// 设置定时器






setInterval(daojishi, 1000)

​ BOM ​ 和 DOM 应用