2、操作BOM,DOM对象

1、class继承

class关键字，是在ES6中引入的

1. 定义一个类,属性和方法

        // 定义一个学生类
        class Student{
            constructor(name) {
                this.name = name;
            }

            hello(){
                alert('hello');
            }
        }

        var rose = new Student("rose");

2. 继承

        // 定义一个学生类
        class Student{
            constructor(name) {
                this.name = name;
            }

            hello(){
                alert('hello');
            }
        }

        class XiaoStudent extends Student{
            constructor(name,grade) {
                super(name);
                this.grade = grade;
            }

            myGrade(){
                alert('我是一名小学生');
            }
        }

        var rose = new Student("rose");
        var jack = new XiaoStudent("Jack",1);

2、操作BOM对象(重点)

BOM：浏览器对象模型

	document

document 代表当前的页面，HTML，DOM文档树

获取具体的文档树节点

    <dl id="app">
        <dt>java</dt>
        <dd>javaweb</dd>
        <dd>js</dd>
    </dl>


    <script>
        var dl = document.getElementById('app');
    </script>

3、操作DOM对象(重点)

	核心

浏览器网页就是一个DOM树形结构

• 更新
• 遍历dom节点
• 删除一个dom节点
• 添加一个新的dom节点

要操作一个Dom节点，就必须要先获得这个Dom节点

3.1、获得dom节点

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
     // 标签选择器
     var h1 = document.getElementsByTagName('h1');
     var p1 = document.getElementById('p1');
     var p2 = document.getElementsByClassName('p2');
     // 获取父节点下的所有子节点
    var father = document.getElementById('father');
    var childrens = father.children;
</script>

这是原生代码，之后我们尽量都是用jQuery()

3.2、更新节点

<div id="app">

</div>

<script>
    var id1 = document.getElementById('app');
</script>

• id1.innerText='123' 修改文本的值
• id1.innerHTML='<strong>123</strong>' 可以解析HTML文本标签

操作js

id1.style.color='red'
id1.style.fontSize='100px' // fontSize驼峰命名

3.3、删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var p1 = document.getElementById('p1');
    // 获取p1的父节点
    var father = p1.parentElement;
    father.removeChild(p1)

</script>

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意

3.4、创建和插入DOM节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了!会产生覆盖

1、追加

<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');
    var list = document.getElementById('list');
    list.appendChild(js);
</script>

效果：

2、创建一个新的节点

<script>
    // 创建一个新的节点
    var newP = document.createElement('p');
    newP.id = 'newP';
    newP.innerText = 'hello zs';
    //创建一个标签节点(通过这个属性，可以设置任意的值)
	var myscript = document.createElement("script");
	myscript.setAttribute('type' ,"text/javascript")

</script>

4、操作表单（验证）

	表单是什么

• 文本框text
• 下拉框
• 单选框radio
• 多选框checkbox
• 隐藏域hidden
• 密码框password

表单的目的：提交信息

4.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');
    var boy_sex = document.getElementById('boy');
    var girl_sex = document.getElementById('girl');
    // 得到输入框的值
    input_text.value
    // 修改输入框的值
    input_text.value = '123'

    //对于单选框,多选框等固定的值，boy_sex.vaLue只能取到当前的值
    girl_sex.checked // 查看返回的结果，是否为true，如果为true，则被选中
    girl_sex.checked = true;
</script>

4.2、提交表单

md5加密使用的CDN

  <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/1.0.1/js/md5.min.js"></script>

md5 加密密码，表单优化

<!--表单绑定提交事件 οnsubmit=绑定一个提交检测的函数 true/false
    将这个结果返回给表单，使用onsubmit接收!
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aa()">
    <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 aa() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');

        md5pwd.value = md5(pwd.value);
        // 可以校验判断表单内容,true就是通过提交,false为阻止提交
        return true;
    }
</script>