复习一下DOM和BOM

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 8 天，点击查看活动详情

今天和大家一起复习复习DOM和BOM.

一、DOM

什么是DOM ？

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

• JavaScript 可以访问和操作存储在 DOM 中的内容

尝试DOM

1.1 尝试修改HTML内容

document.getElementById().innerHTML

1.2 尝试修改HTML属性

document.getElementById('main').style='color: blue;'

1.3 尝试绑定点击事件

<input type="text" name="" id="" onclick="document.getElementById('main').innerText='666'">

1.4 添加事件

addEventListener('事件'，方法名)

document.getElementById('main').addEventListener("click",bibibi);
function bibibi(){
    console.log(123123)
}
document.getElementById('main').removeEventListener("click", bibibi);

DOM事件

2.1 onclick 点击事件

<input type="button" onclick="Click()">
<script>
    function Click(){
    console.log('123')
}
</script>

2.2 oninput 输入事件

<input type="text" oninput="Click()">
<script>
    function Click(){
    console.log('123')
}
</script>

2.3 onmousedown 按下鼠标事件触发

<input type="text" onmousedown="Click()">
<script>
    function Click(){
    console.log('123')
}
</script>

2.4 onmouseup 释放鼠标触发的事件

<input type="text" onmouseup="Click()">
<script>
    function Click(){
    console.log('123')
}
</script>

2.5 onselect 当input里的内容文本被选中后执行

<input type="text" onselect="Click()">
<script>
    function Click(){
    console.log('123')
}
</script>

2.6 onfocus 当input 获取到焦点时触发

<input type="text" onfocus ="Click()">
<script>
    function Click(){
    console.log('123')
}
</script>

2.7. onblur 当input失去焦点时触发

<input type="text"  onblur ="Click()">
<script>
    function Click(){
    console.log('123')
}
</script>

二、BOM

浏览器对象模型（Browser Object Model (BOM)。

Window Screen

//总宽度和高度
screen.width
screen.height
//可用宽度和高度
screen.availWidth
screen.availHeight
//色彩深度
screen.colorDepth
//色彩分辨率
screen.pixelDepth

Window Location

• 获取IP

window.location.href

window.history

//返回上一页
window.history.back()
//跳转下一页
window.history.forward()

Window Navigator

appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。

  function Submit(){
    var studentno =  document.getElementById('studentno').value
    var username =  document.getElementById('username').value
    var sex_1 =document.getElementById('sex_1').checked
    var sex_2
    var cours = document.getElementById('cours').value
    if(sex_1==true)
    {
    sex_2 ='我是男生'
    }else{
    sex_2 ='我是女生'
    }
    console.log(studentno)
    console.log(username)
    console.log(sex_2)
    console.log(cours)
  }