javascript中的操作元素

操作元素

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

改变元素内容

element.innerText

从起始位置到种植位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

示例：

​ 效果描述：

​ 点击按钮后，div中显示当先时间。

    <button>onclick</button>
    <div>time</div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function()
        {
   
            div.innerText = getDate();
        }
        function getDate(){
   
            var date = new Date();
            var year = date.getFullYear();
            var mouth = date.getMonth()+ 1;
            var dates = date.getDate();
            var x = ['日','一','二','三','四','五','六'];
            var day = date.getDay();
            return year + '年' + mouth + '月' + dates + '日' + '星期' + x[day];
        }
    </script>

ouput:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3aWUEGGP-1655625424005)(C:\Users\25528\Desktop\笔记\img\Document - Google Chrome 2022_5_2 17_14_54.png)]

innerText 和 innerHTML的区别

innerText 不识别html的标签

示例：

    <div></div>
    <script>
        var div = document.querySelector('div');
        div.innerText = '<strong>加粗</strong>'
    </script>

output:

<strong>加粗</strong>

​ 可以看到html中的加粗标签在innerText中不会被识别出来。

---

相同的栗子我们在innerHTML中再次使用

    <div></div>
    <script>
        var div = document.querySelector('div');
        div.innerHTML = '<strong>加粗</strong>121'
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kUKxV7G3-1655625424008)(C:\Users\25528\AppData\Roaming\Typora\typora-user-images\image-20220503155749454.png)]

​ 可以看到innerHTML是识别HTML中的标签

可读写上的差异

​ innerText会将html中的标签、空格、换行在读写时自动去除。

   <p>
        123
        <span>456</span>
    </p>
    <script>
        var p = document.querySelector('p');
        console.log(p.innerText);
    </script>

ouput

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ZdL8iJE-1655625424009)(C:\Users\25528\AppData\Roaming\Typora\typora-user-images\image-20220503160336945.png)]

---

<p>
        123
        <span>456</span>
    </p>
    <script>
        var p = document.querySelector('p');
        console.log(p.innerHTML);
    </script>

output

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MikHZTWn-1655625424010)(C:\Users\25528\AppData\Roaming\Typora\typora-user-images\image-20220503160453228.png)]

根据时间修改图片内容

效果描述

​ 根据一天中的时间不同，打开时显示的图片内容也不同。

---

思路描述：

1. 首先在html中创建一个img和一个div。分别显示图片和问候语
2. 在js中分别获取img和div的元素内容
3. 利用date方法获取实时变化的时间
4. 在利用分支结构实现不同的时间出现不同的图片

---

代码实现：

---

html：

    <img src="./img/wan.jpg" alt="">
    <div>晚上好</div>

---

css:

    <style>
        *{
   
            margin: 0;
            padding: 0;
            background-color: #ccc;
        }

        img{
   
            display: block;
            margin: 0 auto;

            width: 500px;
            height: 500px;
        }

        div{
   
            text-align: center;

            position: relative;
            left: 50%;
            transform: translate(-50%);
            width: 500px;
            height: 100px;
            line-height: 100px;
            font-size: 20px;
            margin-top: 20px;
            border: 3px solid skyblue;
        }
    </style>

---

js:

    <script>
        var date = new Date();
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        var hours = date.getHours()
        if(hours >= 6 && hours <= 12)
        {
   
            img.src = './img/zao.jpg';
            div.innerHTML = '早上好'
        }
        else if(hours >12 && hours <= 18)
        {
   
            img.src = './img/wu.jpg';
            div.innerHTML = '中午好'
        }
        else{
   
            img.src = './img/wan.jpg';
            div.innerHTML = '晚上好'
        }
    </script>

修改元素属性

​ 效果描述：

​ 点击页面中的按钮实现对图片的更换

    <button id="1" class="first">1</button>
    <button id="2" class="second">2</button>
    <img src="./img/4f097ce72f0648bfc5f9879cda23052.jpg" alt="">
    <script>
        var first = document.getElementById('1');
        var second = document.getElementById('2');
        var img = document.querySelector('img');
        second.onclick = function()
        {
   
            img.src = './img/5b0a3606059a84c9ed2357a0df53008.jpg'
        }
        first.onclick = function()
        {
   
            img.src = './img/4f097ce72f0648bfc5f9879cda23052.jpg'
        }
    </script>

output:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4UCHIW3a-1655625424011)(C:\Users\25528\AppData\Roaming\Typora\typora-user-images\image-20220503162246712.png)]

​ 点击按钮1和2就会出现相应的图片。

表单元素属性操作

​ 可以利用DOM操作表单的一下属性

type value checked selected disabled(是否被使用)

​ 我们那value和disabled举一个简单的栗子：

---

效果描述：

​ 点击按钮后，input中的文字内容由1改为2，并且按钮不在可以在点击。

---

代码实现：

html:

    <button>按钮</button>
    <input type="text" value="1">

javascript:

    <script>
        var btn = document.querySelector('button');
        var input = document