操作元素--普通元素

javascript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等，以下都是属性：

$\color{rgba(254, 67, 101, .8)}{改变元素的内容}$

element.innerText
从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerHTML
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

$\color{rgba(254, 67, 101, .8)}{element.innerText}$

innerText 属性表示一个节点及其后代的“渲染”文本内容。

    <style>
        div {
            width: 300px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <script>
        //当点击按钮，div里的文字发生变化
        //1.获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        //注册事件：
        btn.onclick = function() {
            //div.innerText = '2019-6-6';这样就写死了
            div.innerText = getDate();
        }

        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];
        }
    </script>

image.png

$\color{rgba(254, 67, 101, .8)}{点击按钮后：}$

image.png

getDate();根据本地时间，返回一个指定的日期对象为一个月中的哪一日（从1--31）。

getDay();方法根据本地时间，返回一个具体日期中一周的第几天，0 表示星期天。对于某个月中的第几天，参考`Date.prototype.getDate()

getFullYear() 方法根据本地时间返回指定日期的年份。

getHours() 方法根据本地时间，返回一个指定的日期对象的小时。

getMonth()根据本地时间，返回一个指定的日期对象的月份，为基于0的值（0表示一年中的第一月）。

$\color{rgba(254, 67, 101, .8)}{元素也可以不用添加事件就触发}$
$\color{rgba(254, 67, 101, .8)}{如上例，让p标签不添加事件直接显示时间}$

    <style>
        p,
        div {
            width: 300px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>123</p>
    <script>
        //当点击按钮，div里的文字发生变化
        //1.获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        //注册事件：
        btn.onclick = function() {
            //div.innerText = '2019-6-6';这样就写死了
            div.innerText = getDate();
        }

        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];
        }

        //元素不添加点击事件，直接触发
        var p = document.querySelector('p');
        p.innerText = getDate();
    </script>

image.png

$\color{rgba(254, 67, 101, .8)}{element.innerText和element.innerHTML区别}$
$\color{rgba(254, 67, 101, .8)}{最大的区别是：是否识别html标签}$
$\color{rgba(254, 67, 101, .8)}{innerText是IE标准，innerHTML是W3C标准}$
$\color{rgba(254, 67, 101, .8)}{innerText会去除空格和换行}$
$\color{rgba(254, 67, 101, .8)}{innerHTML会保留空格和换行}$

$\color{rgba(254, 67, 101, .8)}{这两个属性是可读写的，既可以赋值，也可以获取值(获取元素里的内容)}$

    <div></div>
    <script>
        //element.innerText和element.innerHTML区别
        //1.element.innerText(不识别html标签，直接打出来了)
        var div = document.querySelector('div');
        div.innerText = '<strong>今天是：</strong> 2020';

        //element.innerHTML
        var div = document.querySelector('div');
        div.innerHTML = '<strong>今天是：</strong> 2020';
    </script>

image.png

$\color{rgba(254, 67, 101, .8)}{innerText会去除空格和换行}$
$\color{rgba(254, 67, 101, .8)}{innerHTML会保留空格和换行}$

    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        //element.innerText和element.innerHTML区别
        //1.element.innerText(不识别html标签，直接打出来了)
        var div = document.querySelector('div');
        div.innerText = '<strong>今天是：</strong> 2020';

        //element.innerHTML
        var div = document.querySelector('div');
        div.innerHTML = '<strong>今天是：</strong> 2020';

        //这两个属性都是可读写的，既可以赋值，也可以获取元素里的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>

image.png

$\color{rgba(254, 67, 101, .8)}{常用元素的属性操作}$

1.innerText、innerHTML改变元素内容
2.src、href
3.id、alt、title

$\color{rgba(254, 67, 101, .8)}{点击按钮换图片}$

默认图片是刘德华。点击按钮切换成对应的图片

    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <br>
    <img src="ldh.jpg" alt="" title="刘德华">


    <script>
        //修改元素属性 src 其他属性是一样的方法
        //1.获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');

        //注册事件：处理程序
        zxy.onclick = function() {
            img.src = 'zxy.jpg'; //点击张学友按钮后，图片换成张学友图片，完成赋值操作
            img.title = '张学友'; //title是鼠标放到图片上时图片显示的文字
        }
        ldh.onclick = function() {
            img.src = 'ldh.jpg'; //点击刘德华按钮后，图片换成刘德华图片(ldh.jpg不是代码，是图片路径，这里是把图片的路径赋值给img.src)
            img.title = '刘德华';
        }
    </script>

image.png

$\color{rgba(254, 67, 101, .8)}{案例：分时问候案例}$

根据不同时间，页面显示不同图片，同时显示不同的问候语
如果是上午打开页面，显示上午好，显示上午图片
如果是下午打开页面，显示下午好，显示下午图片
如果是晚上打开页面，显示晚上好，显示晚上图片

分析：
1.根据系统不同时间来判断，所以需要用到日期内置函数
2.用多分支语句来设置不同图片
3.需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
4.需要一个div元素，显示不同问候语，修改元素内容即可

    <style>
        img {
            width: 300px;
        }
    </style>
</head>

<body>
    <img src="images/s.gif" alt="">
    <div>上午好</div>
    <script>
        //>根据不同时间，页面显示不同图片，同时显示不同的问候语
        // 如果是上午打开页面，显示上午好，显示上午图片
        // 如果是下午打开页面，显示下午好，显示下午图片
        // 如果是晚上打开页面，显示晚上好，显示晚上图片

        //1.获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');

        //获取当前小时数
        var date = new Date();
        var h = date.getHours();

        //判断小时数改变图片和文字
        if (h < 12) {
            img.src = 'images/s.gif';
            div.innerHTML = '亲，上午好';
        } else if (h < 18) {
            img.src = 'images/x.gif';
            div.innerHTML = '亲，下午好';
        } else {
            img.src = 'images/w.gif';
            div.innerHTML = '亲，晚上好';
        }
    </script>

image.png