05-操作元素

最新推荐文章于 2022-02-06 21:53:06 发布

我的欢

最新推荐文章于 2022-02-06 21:53:06 发布

阅读量223

点赞数

分类专栏：前端文章标签：操作元素

本文链接：https://blog.csdn.net/qq_41356253/article/details/103038465

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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

1、改变元素内容

element.innterText

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

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>

    <p>另一个时间</p>
    <script>
        //当时我们点击了按钮，div里面的文字会发生变化
        //1.获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        //2.注册事件
        btn.onclick = function () {
            div.innerText = getDate();

        }
        function getDate() {
            var date = new Date();
            var Year = date.getFullYear();//当前日期年份
            var Month = date.getMonth() + 1;//当前日期月份 getMonth()返回0~11月
            var Day = date.getDate();//当前日期 
            var w = date.getDay();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            var week = arr[w];
            return '今天是' + Year + '年' + Month + '月' + Day + '日' + '  ' + week;
        }

        //元素也可以不用添加事件
        var p = document.querySelector('p');
        p.innerText = getDate();
 
    </script>
</body>

element.innterHTML

<body>
    <div></div>
    <p>
        我是蚊子
        <span>你是傻子</span>
    </p>
    <script>
        //innerText  和  innerHTML的区别
        //1.innerText  不识别HTML标签  非标准  去除空格和换行
        var div = document.querySelector('div');
        //div.innerText = '<strong>今天是：</strong> 2019';   //<strong>今天是：</strong> 2019
        //2.innerHTML  识别HTML标签 W3C标准    保留空格和换行
        div.innerHTML = '<strong>今天是：</strong> 2019';//今天是： 2019   加粗显示

        //这两个属性是可读写的   可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);  //我是蚊子 你是傻子
        console.log(p.innerHTML);
                                    //
                                    //我是蚊子
                                    //<span>你是傻子</span>
    </script>
</body>

2、常用元素的属性操作

innerText、innerHTML改变元素内容
src、href
id 、alt、title

<body>
    <button id="girl">可爱的小姐姐</button>
    <button id="sex">性感的小姐姐</button><br>
    <img src="../images/v1.jpg" alt="" title="可爱的小姐姐">

    <script>
        //修改元素属性 src title
        //1.获取元素
        var girl = document.getElementById('girl');
        var sex = document.getElementById('sex');
        var img = document.querySelector('img');
        //注册事件
        girl.onclick = function () {
            img.src = '../images/v1.jpg';
            img.title = '可爱的小姐姐';
        }
        sex.onclick = function () {
            img.src = '../images/v2.jpg';
            img.title = '性感的小姐姐';
        }
    </script>
</body>

3、案例：分时显示不同图片，显示不同问候语

根据不同时间，页面显示不同图片，同时显示不同问候语

如果上午时间打开页面，显示上午好，显示上午图片

如果下午时间打开页面，显示下午好，显示下午图片

如果晚上时间打开页面，显示晚上好，显示晚上图片

分析：

根据系统不同时间来判断，所以需要用到日期内置对象

利用多分支语句来设置不同的图片

需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性

需要一个div元素，显示不同问候语，修改元素内容即可

<body>
    <div>上午好</div>
    <img src="../images/v1.jpg">;
    <script>
        //1.获取元素
        var div = document.querySelector('div');
        var img = document.querySelector('img');
        //1.得到当前时间小时数
        var date = new Date();
        var hour = date.getHours();
        //3.判断小时数改变图片和文字信息
        if (hour < 12) {
            img.src = '../images/v1.jpg';
            div.innerHTML = '上午好！好好写代码哦';
        } else if (hour < 18) {
            img.src = '../images/v2.jpg';
            div.innerHTML = '下午好！好好写代码哦'
        } else {
            img.src = '../images/v3.jpg';
            div.innerHTML = '晚上好！好好写代码哦'
        }
    </script>
</body>

4、表单元素的属性操作

利用DOM可以操作如下表单元素的属性：

type、value、checked、selected、disabled

<body>
    <input type="text" value="请输入内容！">
    <button>点一下我啦</button>
    <script>
        //1.获取元素
        var input = document.querySelector('input');
        var btn = document.querySelector('button');
        //2.注册事件 处理程序
        btn.onclick = function () {
            //input.innerHTML  是修改普通盒子如div里面的内容的
            //而表单里面的值 文字内容要通过value 来修改
            input.value = '不要再点啦';
            //如果想要某个表单被禁用  不能再点击 使用disabled 
            //btn.disabled = true;
            this.disabled = true;
            //this 执行的是事件函数的调用者  btn
        }
    </script>
</body>

5、仿京东显示隐藏密码

可参考以下链接

https://blog.csdn.net/qq_41356253/article/details/103039477

6、样式属性操作

通过JS修改元素的大小、颜色、位置等样式

element.style  //行内样式操作
element.className  //类名样式操作

注意：

1、JS里面的样式采取驼峰命名法，比如 fontSize、backgroundColor

2、JS修改style样式操作，产生的是行内样式，css权重比较高

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div> </div>
    <script>
        //1.获取元素
        var div = document.querySelector('div');
        //2.注册事件 处理程序
        div.onclick = function () {
            //div.style
            //div.style 里面的属性采用驼峰命名法
            this.style.backgroundColor = 'purple';
            this.style.width = '400px';
        }
    </script>
</body>