JavaScript基础4（BOM对象、DOM对象（获得、更新、删除、插入节点）、提交表单、MD-5加密表单）

JavaScript语言基础

一、BOM对象

概述：BOM 浏览器对象模型（Browser Object Model），使 JavaScript 有能力与浏览器"对话"。

1. Window 对象

浏览器窗口，全局对象，一般省略不写。

浏览器内外高宽度

window.innerHeight //浏览器窗口的内部高度(包括滚动条)
330
window.innerWidth  //浏览器窗口的内部宽度(包括滚动条)
1536
window.outerHeight //浏览器窗口的外部高度
824
window.outerWidth  //浏览器窗口的外部宽度
1536

2. Navigator

navigator.appName     //浏览器的名称
navigator.appVersion  //返回浏览器的平台和版本信息
navigator.userAgent   //返回由客户机发送服务器的user-agent 头部的值
navigator.platform    //返回运行浏览器的操作系统平台

3. screen

包含有关客户端显示屏幕的信息

screen.width   //返回屏幕的宽度
1920 px
screen.height  //返回屏幕的高度
1080 px

4. location

当前 URL 的信息

//在百度首页 location
location.host                  // "www.baidu.com"
location.href                  // "https://www.baidu.com/"
location.protocol              // "https:"  
location.reload()              // 刷新网页
location.assign('https://...') // 设置新的地址:从百度网页跳到设置的地址
location.search                // 查询url?以后的字符串
location.port                  // 查询端口号

5. document

代表当前的页面

//百度网页
document.title
"百度一下，你就知道"
//更改网页名称
document.title='你好'
"你好"
//对cookie信息读写
document.cookie="name=定义的cookie值"

6. history

在浏览器窗口中，访问过的 URL

history.back()    //网页后退
history.forward() //网页前进

二、操作DOM

1. DOM

文档对象模型（Document Object Model，简称DOM），它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和www文档的风格，它是一种基于树的API文档，浏览器网页就是一个 Dom 树形结构，树叶被定义为节点。

2. 获得节点

由于ID在HTML文档中是唯一的；

1. document . getElementById ()：定位唯一的一个DOM节点；
2. document. getElementsByTagName ()和document . getElementsByClassName ()：返回一组DOM节点。

要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。

<div id="father">
	<h1>标题1</h1>
	<p id="p1">p1</p>
	<p class="p2">p2</p>
</div>
<script>
//对应 css 选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var childrens = father.children[index]; //获取父节点下的所有子节点
father.firstChild 
father.lastChild
</script>

3. 更新节点

<!--获取节点-->
<div id="id1">
</div>
<script>
    var id1 = document.getElementById('id1');
</script>

修改文本的值
id1.innerText='123' 
可以解析HTML文本标签
id1.innerHTML='<strong>123</strong>' 
操作css
id1.style.color = 'red';      // 属性使用 字符串 包裹
id1.style.fontSize='20px';
id1.style.padding = '2em'

注意：JS操作CSS下划线（_）变为驼峰命名

4. 删除节点

先获取父节点，通过父节点删除自己

 <div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
   var self = document.getElementById('p1'); 
   var father =  p1.parentElement; //获取父节点
   father.removeChild(self)
   
   father.removeChild(father.children[0])
   father.removeChild(father.children[1])
   father.removeChild(father.children[2])
</script>

删除是一个动态的过程: 删除多个节点的时候，children是在时刻变化的，即当你删除了children[0]时，再去删除children[1]时候，其实children[1]已经成为children[0]。

5. 插入节点

当我们获得了某个Dom节点，假设这个dom节点是空的，我们通过 innerHTML 就可以增加一个元素了；但是这个DOM 节点已经存在元素了，会产生覆盖掉原来的节点，所以我们引入追加操作。

• 操作已有的标签

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js = document.getElementById('js');    //获取“js”节点
    var list = document.getElementById('list');//获取“list”节点
    list.appendChild(js);//将“js”节点追加到“list”的子节点里面
</script>

没追加之前的网页：

追加后（list.appendChild(js)）

• 创建新的标签

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    //通过JS创建一个新的节点：创建一个p标签，将新建的p标签加到上面的list节点里面
    var p = document.createElement('p');
    p.id = 'p';
    p.innerText = '我是新建的p标签';
    list.appendChild(p);
    //创建一个script标签
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    list.appendChild(myScript);  //将myScript加到list节点里面
    //创建一个Style标签
    var myStyle= document.createElement('style'); //创建了一个空style标签 
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color: blue}'; //设置标签内容,将背景颜色设置为蓝色
    document.getElementsByTagName('head')[0].appendChild(myStyle)//将myStyle加到head里面
</script>   

结果：

• insertBefore()：在已有的子节点前插入一个新的子节点

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
     //要包含的节点.insertBefore(newNode,targetNode);
    var ee = document.getElementById('ee');  //获取ee标签
    var js = document.getElementById('js');  //获取js标签
    var list = document.getElementById('list'); //获取list标签
    list.insertBefore(js,ee); //()里面的参数：(放入的标签,放在哪个标签前面)
</script>

现在我们可以通过只写JS代码实现html和CSS，不过太复杂…

三、操作表单

1. 获得提交的信息

<form action="post">
    <p>
        <span>用户名: </span> <input type="text" id="username">
    </p>
    <!--单选按钮-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy"> 男
        <input type="radio" name="sex" value="women" id="girl"> 女
    </p>
</form>
<script>
    var input_text = document.getElementById('username'); // 获取用户名节点
    input_text.value  //得到输入框的值      
    input_text.value = '123'  //修改输入框的值
    //性别
    var boy_radio = document.getElementById('boy');       
    var girl_radio = document.getElementById('girl');   
    //对于单选框，多选框等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked; //查看返回的结果，是否为true，如果为true，则是被选中按钮
    girl_radio.checked = true; //给单选按钮赋值
</script>

结果：

选中男性按钮：

2. 提交表单

1. 获取输入的用户名和密码

<form action="post">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span> <input type="password" id="password" name="password">
    </p>
    <!--绑定事件 onclick 被点击-->
    <button type="button" onclick="aaa()">提交</button>
</form>
<script>
	//写一个函数，获取输入的用户名和密码
    function aaa() {
        var name = document.getElementById('username');
        var pwd = document.getElementById('password');
        console.log(name.value);
        console.log(pwd.value);
    }
</script>

• 点击提交后
  
  我们在登录一些网站时，通过抓包可以获取用户名和密码，密码肯定是加密的，如下图：
  
  模拟加密通过MD-5加密自己的表单密码：这里我们引入一个MD-5的工具类链接

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD-5 工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表单绑定提交事件(提交到百度页面): οnsubmit= 绑定一个提交检测的函数，
    将这个结果返回给表单，使用 onsubmit 接收！-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span> <input type="password" id="input-password">
    </p>
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">提交</button>
</form>
<script>
    function aaa() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');
        //pwd.value = md5(pwd.value);  这里会在提交的一瞬间使密码长度突然加长
        md5pwd.value = md5(pwd.value);
        // 可以校验判断表单内容，true就是通过提交，false阻止提交
        return true;
    }
</script>

//下篇再见…谢谢