复习一下DOM和BOM

今天和大家一起复习复习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

  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)
  }