（1）innerHTML属性会把内容中的 html 元素解析后再执行，而 innerText 不会解析内容中的 html 元素。

5.2、元素属性

 演示案例：

    <img src="1.jpeg">
    <script>
        var img = document.querySelector('img')
            // 获取src属性 
        console.log(img.src);
        // 修改src属性 
        img.src = '2.jpeg';
        // 添加属性 
        img.alt = '图片';
        img.title = '提示';
        console.log(img);
    </script>

5.3、表单元素

在 Web 开发中，表单是一种常用的元素，利用 DOM 可以操作如下表单元素的属性。

 这些属性都具有读写操作，通过 元素对象.属性名 来获取元素属性值，通过 元素对象.属性名= 值 来设置元素属性值。而 checked、selected和disabled 元素属性的值是布尔类型。

演示案例：

    <input type="text" name="name" value="123456"><br>
    <input type="checkbox" name=""><br>
    <select name="">
        <option value="">--请选择--</option> 
        <option value="北京">北京</option> 
        <option value="上海">上海</option>
         <option value="重庆">重庆</option> 
        </select>

    <script>
        var input = document.querySelector('input')
            // 获取type
        console.log(input.type);
        // 设置type 
        //input.type = 'password'; 
        // 获取value 
        console.log(input.value);
        // 设置value 
        input.value = 'jock'
            // 获取disabled 
        console.log(input.disabled);
        // false 
        // 设置 disabled 
        input.disabled = true;
        // 获取元素 
        var ck = document.querySelector('[type="checkbox"]');
        console.log(ck);
        // 获取选中状态 
        console.log(ck.checked); // false 
        // 设置选中状态 
        ck.checked = true;
        // 获取下拉列表
        var sl = document.querySelector('select');
        console.log(sl);
        //console.log(sl[2]);
        var op = sl[2];
        console.log(op.selected);
        // 设置被选中 
        op.selected = true;
    </script>

5.4、样式元素

    <style>
        .box {
            width: 150px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>

    <div class="box"></div>
    <script>
        // 通过 JS 来改变 div 的宽和背景颜色 
        var box = document.querySelector('.box')
            //console.log(box); 
            // 通过 style 方式
        box.style.width = '300px';
        box.style.backgroundColor = 'red';
    </script>

5.4.2、className属性

示例：

  
<style>
        .box {
            width: 150px;
            height: 100px;
            background-color: blueviolet;
        }
        
        .bg {
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
        }
        
        .ft {
            color: white;
        }
    </style>

    <div class="box">这是文字</div>
    <script>
        // 通过 JS 来改变 div 的宽和背景颜色 
        var box = document.querySelector('.box');
        console.log(box.className);
        box.className = 'bg ft'
    </script>

说明：

（1）通过对象.className 的方式可以获取当前对象的样式名称；

（2）通过对象.className='值' 的方式可以给当前对象设置样式。

5.5、操作属性、

     <style>
        div {
            width: 100px;
            height: 30px;
            border: 1px solid #000000;
        }
        
        .bg {
            background-color: cornflowerblue;
            color: white;
        }
    </style>

  <div title="这是标题">这是内容</div>
    <script>
        var div = document.querySelector('div')
            // 设置属性 
        div.setAttribute('class', 'bg');
        div.setAttribute('title', '我改了标题');
    </script>

    <div title="这是标题">这是内容</div>
    <script>
        var div = document.querySelector('div')
            // 获取title属性 
            //console.log(div.title); 
        var attrValue = div.getAttribute('title');
        console.log(attrValue);
    </script>

    <div title="这是标题">这是内容</div>
    <script>
        var div = document.querySelector('div');
        // 删除title属性
        div.removeAttribute('title');
    </script>

    <div data-index="1" data-list-name="jock"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.getAttribute('data-index'));
        div.setAttribute('data-title', '标题');
    </script>

    <button id="btn">点我会触发事件</button>
    <script>
        // 1. 获取元素
        var btn = document.querySelector('#btn')
            // 1.事件源：这个按钮就是事件源 
            // 2. 事件类型：这个按钮要点击后才会触发，那么它的事件类型就是点击事件 
            // 3. 事件处理程序 
        btn.onclick = function() {
            console.log('你点了我');
        };
    </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见鼠标事件类型</title>
    <style>
        .box {
            width: 150px;
            height: 100px;
            border: 1px solid #000000;
        }
        .bg {
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
<div class="box"></div>
<input type="text" id="account" value="123456">
<script>
    var box = document.querySelector('.box')
    // 单击事件：onclick
    /*box.onclick = function () {
        console.log('点我干嘛？');
    };
    // 双击事件：ondblclick
    box.ondblclick = function () {
        console.log('别烦我。');
    };
    */

    // 鼠标经过时触发：onmouseover
    box.onmouseover = function () {
        this.className = 'box bg';
    };
    // 鼠标离开时触发:onmouseout
    box.onmouseout = function () {
        this.className = 'box';
    };
    // 鼠标移动时触发:onmousemove
    box.onmousemove = function () {
        console.log('你摸我干嘛');
    };

    var input = document.querySelector('#account')
    // 获取鼠标焦点时触发:onfocus
    input.onfocus = function () {
        //console.log(this.value)
        this.style.backgroundColor = 'cornflowerblue';
    };
    // 失去鼠标焦点时触发:onblur
    input.onblur = function () {
        this.style.backgroundColor = '';
        console.log(this.value);
    };

    // 文本框内容改变时触发:onchange
    input.onchange = function () {
        console.log('内容已经被修改');
    };

    // 文本框内容被选中时触发:onselect
    input.onselect = function () {
        console.log('我不想当干部');
    };
</script>
</body>
</html>