JavaScript学习——BOM对象、DOM对象、操作表单（加密提交）

1、BOM对象

BOM(Browser Object Model) 是指浏览器对象模型

BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window

window
alert()、prompt()、confirm（）、open()、close()

    <script>
        window.alert("hello world");
        window.prompt("请输入，取消返回null,确认返回输入内容");
        window.confirm("确认返回true,取消返回false");
        window.open();//没有url,也会打开一个空页面
        window.open();
        window.close() //关闭当前窗口
        console.log(window.innerWidth,window.innerHeight)//获取浏览器窗口的整个宽高
    </script>   

navigator

navigator 对象表示浏览器的信息

• navigator.appName：浏览器名称；
• navigator.appVersion：浏览器版本；
• navigator.language：浏览器设置的语言；
• navigator.platform：操作系统类型；
• navigator.userAgent：浏览器设定的 User-Agent 字符串。

screen

screen 对象表示屏幕的信息

• screen.width：屏幕宽度，以像素为单位；
• screen.height：屏幕高度，以像素为单位；
• screen.colorDepth：返回颜色位数，如8、16、24。

console.log('Screen size = ' + screen.width + ' x ' + screen.height);

history（已被弃用）

history 对象保存了浏览器的历史记录，JavaScript可以调用 history 对象的 back() 或

forward () ，相当于用户点击了浏览器的“后退”或“前进”按钮。

location

location 对象表示当前页面的URL信息。

        'use strict';
        location.protocol; // 'http' 
        location.host; // 'www.example.com' 
        location.port; // '8080' 
        location.pathname; // '/path/index.html' 
        location.search; // '?a=1&b=2' 
        location.hash; // 'TOP'    

加载一个新页面，可以调用 location.assign() 。

如果要重新加载当前页面，调用 location.reload() 方法。

document

document 对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构， document 对

象就是整个DOM树的根节点。

用 document 对象提供的 getElementById() 和 getElementsByTagName() 可以按ID获得一个

DOM节点和按Tag名称获得一组DOM节点

document 对象还有一个 cookie 属性，可以获取当前页面的Cookie。（为了确保安全，服务器端在设置Cookie时，应该始终坚持使用 httpOnly 。设定了 httpOnly 的Cookie将不能被JavaScript读取）

2、DOM对象

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作 DOM

在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是

• document.getElementById()

• document.getElementsByTagName()

• 以及CSS选择器 document.getElementsByClassName() 。

// 返回ID为'test'的节点： 
var test = document.getElementById('test'); 
// 先定位ID为'test-table'的节点，再返回其内部所有tr节点： 
var trs = document.getElementById('test-table').getElementsByTagName('tr'); 

// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点： 
var reds = document.getElementById('test- div').getElementsByClassName('red'); 

// 获取节点test下的所有直属子节点: 
var cs = test.children; 

// 获取节点test下第一个、最后一个子节点： 
var first = test.firstElementChild; 
var last = test.lastElementChild;

第二种方法是使用 querySelector() 和 querySelectorAll() ，需要了解selector语法(请看下一篇Jquery)

更新DOM

• innerText ：直接插入文本，不会进行解析
• innerHTML：如果插入的是HTMl会进行解析后插入

插入DOM

innerHTML 会直接替换掉原来的所有子节点

appendChild ，把一个子节点添加到父节点的最后一个 子节点

动态创建一个节点然后添加到DOM树中，可以实现很多功能。举个例子，下面的代码动态创建了一个 节点，然后把它添加到 节点的末尾，这样就动态地给文档添加了新的CSS定义：

var d = document.createElement('style');//创建一个style节点
d.setAttribute('type', 'text/css'); //设置节点类型
d.innerHTML = 'p { color: red }'; 
//head 头部标签 
document.getElementsByTagName('head')[0].appendChild(d);

获取head和body标签时，获得的都是第0个

删除DOM

要删除一个节点，需要调用父节点的 removeChild 把自己删掉

// 拿到待删除节点: 
var self = document.getElementById('to-be-removed'); 
// 拿到父节点: 
var parent = self.parentElement; 
// 删除: 
var removed = parent.removeChild(self);

removed === self; // true

（注意：删除是一个动态的过程，删除第一个节点后，原来的第二个节点就成为了第一个节点）

3、操作表单

方式一是通过 <form> 元素的submit()方法提交一个表单

    <form action="#" method="get">
        <p>
            <span>请输入用户名：</span><input type="text" name="username" id="username" required>
        </p>
        <p>
            <span>请输入密码</span><input type="password" name="pwd" id="pwd" required>
        </p>
        <p>
            <span>性别</span>
            <input type="radio" name="sex" value="man" id = "man">男
            <input type="radio" name="sex" value="women" id = "women">女
        </p>
        <!--绑定一个点击事件-->
        <input type="submit" onclick="clickbutton()">
    </form>

    <script>
        function clickbutton() {
            var username = document.getElementById("username");
            var pwd = document.getElementById("pwd");
            pwd.value = md5(pwd);
            return true;
        }
    </script>

用户输入了口令提交时，口令框的显示会突然从几个 * 变成32个 * （因为MD5有32个字符）

    <form action="#" method="get">
        <p>
            <span>请输入用户名：</span><input type="text" name="username" id="username">
        </p>
        <p>
            <span>请输入密码</span><input type="password" id="pwd">
        </p>
        <input type="hidden" id="md5_pwd" name="mad5_pwd">
        <p>
            <span>性别</span>
            <input type="radio" name="sex" value="man" id = "man">男
            <input type="radio" name="sex" value="women" id = "women">女
        </p>
        <!--绑定一个点击事件-->
        <input type="submit" onclick="clickbutton()">
    </form>

    <script>
        function clickbutton() {
            var username = document.getElementById("username");
            var pwd = document.getElementById("pwd");
            var md5_pwd = document.getElementById("md5_pwd");
            md5_pwd.value = md5(pwd.value);
            return true;
        }

(采用中间新建一个md5_pwd进行提交)

方式二是响应 <form> 本身的onsubmit事件，在提交form时作修改

( return true 来告诉浏览器继续提交，如果 return false ，浏览器将不会继续提交

form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。 )

    <!--绑定表单提交事件-->
    <!--onsubmit绑定一个提交函数，true提交表单，false不提交表单-->
    <form action="#" method="get" onsubmit="return clickbutton()">
        <p>
            <span>请输入用户名：</span><input type="text" name="username" id="username">
        </p>
        <p>
            <span>请输入密码</span><input type="password" id="pwd">
        </p>
        <input type="hidden" id="md5_pwd" name="mad5_pwd">
        <p>
            <span>性别</span>
                <input type="radio" name="sex" value="man" id = "man">男
                <input type="radio" name="sex" value="women" id = "women">女
        </p>
        <!--绑定一个点击事件-->
        <input type="submit" >
    </form>

    <script>
        function clickbutton() {
            var username = document.getElementById("username");
            var pwd = document.getElementById("pwd");
            var md5_pwd = document.getElementById("md5_pwd");
            md5_pwd.value = md5(pwd.value);
            return true;
        }
    </script>

(md5加密blueimp-md5 (v2.19.0) - JavaScript MD5 implementation. | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务)