JavaScript 学习 第十天 BOM操作

DOM操作表单

1、DOM如何快速获取表单元素

DOM中可以通过form.表单的name名称获取表单元素

<form action="">
        请输入账号：<input type="text" name="userName"><br>
</form>
var oForm = document.getElementsByTagName("form")[0];

//oForm.name名称
console.log(oForm.userName); //输入框

2、表单事件

oForm.onsubmit : 表单提交事件

​ return true : 允许提交

​ return false : 禁止提交

oForm.onreset : 表单重置事件

​ return true : 允许重置

​ return false : 禁止重置

input.onfocus : 获得焦点事件

input.onblur : 失去焦点 （鼠标离开判断输入是否正确）

input.onchange : 失去焦点时，内容发生改变了触发

input.oninput : 只要在input中输入内容，实时触发 ie不兼容

input.onpropertychange 兼容ie

oForm.userName.oninput = input;
        oForm.userName.onpropertychange =input;
        function input(){
            if(this.value.length >= 12){
                oP.innerHTML = "强";
                oP.style.color = "Red";
            }else if(this.value.length >= 9){
                oP.innerHTML = "中";
                oP.style.color = "Red";
            }else if(this.value.length >= 6){
                oP.innerHTML = "弱";
                oP.style.color = "Red";
            }
        }

3、表单方法

oForm.submit(); 提交方法

oForm.reset(); 提交方法

*input.focus():自动获取焦点

input.blur():自动获取焦点

BOM

BOM : Browser Object Model 浏览器对象模型

BOM的核心：window

window：窗口

document：文档 html

1、系统对话框

 //1.警告框  
    window.alert("下课了");//一般省略window

//2.confirm()：带确认的对话框,有返回值，确定---true   取消---false
    var iss = confirm("是否下课");
    console.log(iss);

//3. prompt(message,defaultValue) 带输入的对话框 ,有返回值，确定---返回输入的值   取消---null
    var s = prompt("请输入一个数字",007);
    console.log(s);

    <button onclick="aaa()">打印</button>

2、open与close

//open(url,打开方式，控制打开窗口样式的特殊字符串，replace);返回一个新窗口的window
open("http://www.ujiuye.com","_blank","width=500px,height=500px");

3、loaction与navigator

1、location.href：返回当前加载页面的完整URL

location.href = “09 open与close.html”; 可以设置当前显示的url

2、location.search：返回URL的查询字符串。这个字符串以问号开头

3、location.reload();//重新加载当前页面

if(navigator.userAgent.indexOf("MSIE")>=0){
            alert("IE浏览器");
        }

4、三大系列

client系列

元素的可视宽高：
  元素.clientWidth : 内容宽+左右padding值
  元素.clientHeight : 内容宽+上下padding值

屏幕的可视宽高：
  document.doucmentElement.clientWidth/Height

offset系列

元素的占位宽高
  元素.offsetWidth/height ： content+padding+border 
                
  元素.offsetTop:当前元素的顶部到定位父元素的距离，如果没有定位父元素到body的距离
  元素.offsetLeft:当前元素的左边到定位父元素的距离，如果没有定位父元素到body的距离

注意：offsetTop一般用来获取元素在页面当中的位置

scroll系列

滚动事件：onscroll，滚动条在谁身上就给谁加滚动事件

元素.srcollTop:元素被卷去的高
元素.srcollLeft:元素被卷去的宽
 获取页面的滚动距离：
    document.doucmentElement.scrollTop || document.body.scrollTop

注意：document.doucmentElement.scrollTop可以设置，例：

document.doucmentElement.scrollTop = 0；