【JavaScript】事件概述与操作DOM元素

最新推荐文章于 2024-07-26 20:46:33 发布

2301_82244279

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量343

点赞数 5

分类专栏：资料搜公宗号文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/2301_82244279/article/details/140193713

版权

资料搜公宗号专栏收录该内容

11 篇文章 0 订阅

订阅专栏

    }

</style>

<p>自动显示当前的时间</p>

<div>请显示当前的时间</div>

<button>按钮</button>

<script>

    var div = document.querySelector('div');

    var btn = document.querySelector('button');

    var p = document.querySelector('p');

    p.innerText = getDate();

    btn.onclick = function () {

        div.innerText = getDate();

    }

    function getDate () {

        var date = new Date();

        var year = date.getFullYear();

        var month = date.getMonth() + 1; //记得月份要加1

        var dates = date.getDate();

        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

        var day = date.getDay();

        return '今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day];

    }

</script>




![](https://img-blog.csdnimg.cn/a86b88fa9923453c9734f90b7c09a542.gif)



2、**element.innerHTML**（起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行）

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<div></div>

<script>

    var div = document.querySelector('div');

    div.innerHTML = '我是：<strong>div</strong>标签'

</script>




![](https://img-blog.csdnimg.cn/f9b85072cf7d4fa4bcd01dab1b5a694a.png)



3、**innerText 和 innerHTML** 的区别



> innerText不识别html标签 非标准 去除空格和换行

> 

> innerHTML识别html标签 W3C标准  （**日常开发中，我们通常还是使用innerHTML较多**）



两个属性都是可读写的，可以获取元素里面的内容。

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<div>

    我是div标签

    <span>你会看到我的span标签吗</span>

</div>

<script>

    var div = document.querySelector('div');

    console.log(div.innerText);

    console.log(div.innerHTML);

</script>




![](https://img-blog.csdnimg.cn/5f8ff97b493949e196efbd0200c1b2ba.png)



🍈修改元素属性

--------



修改图片案例

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<img src="./img.jpg" alt=""><br/>

<button id="li">萝莉</button>

<button id="yj">御姐</button>



<script>

    //1.获取元素

    var li = document.getElementById('li');

    var yj = document.getElementById('yj');

    var img = document.querySelector('img');

    //2.注册事件 处理程序

    yj.onclick = function (){

        img.src = './img1.jpg';

        img.title = '御姐思密达'

    }

    li.onclick = function (){

        img.src = './img.jpg';

        img.title = '萝莉思密达';

    }

</script>




![](https://img-blog.csdnimg.cn/b4f2aac1368a443ea8c25203cf3e8163.gif)



修改内容案例

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<div></div>

<script>

    //1.获取元素

    var div = document.querySelector('div');

    //2.注册事件 处理程序

    var date = new Date();

    var h = date.getHours();

    if(h<12){

        div.innerHTML = '早上好啊'

    }else if(h<18){

        div.innerHTML = '下午好啊'

    }else{

        div.innerHTML = '晚上好啊'

    }

</script>




🍉修改表单属性

--------

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<button>按钮</button>

<input type="text" value="原本的内容">

<script>

    // 1.获取元素

    var btn = document.querySelector('button');

    var input = document.querySelector('input');

    // 2.注册事件 处理程序

    btn.onclick = function (){

        // innerHTML 修改的是普通盒子，比如 div 里面的内容

        // 表单里面的值 文字内容是通过 value 来修改的

        input.value = '修改后的内容';

        // 如果想要某个表单被禁用不能在点击的话，需要借助 disabled 这个属性

        // btn.disabled = true;

        this.disabled = true; // this指向的是事件函数的调用者 btn

    }



</script>




![](https://img-blog.csdnimg.cn/f6598f147e544885899134c673746153.gif)



🍊样式属性操作

--------



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



1.**element.style**                行内样式操作(适合修改样式少)

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

    div{

        width: 100px;

        height: 100px;

        background-color: #f00;

    }

</style>

<div></div>

<script>

    // 1.获取元素

    var div = document.querySelector('div');

    // 2.注册事件 处理程序

    flag = 0;

    div.onclick = function(){

        if(flag == 0){

            div.style.backgroundColor = '#0f0';

            flag = 1;

        }else{

            div.style.backgroundColor = '#f00'

            flag = 0;

        }

    }

</script>




![](https://img-blog.csdnimg.cn/2f6362983efa41d29bfe3d751e92ff5f.gif)



2.**element.className**      类名样式操作(适合修改样式多)

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

    div{

        width: 100px;

        height: 100px;

        background-color: #f00;

    }

    .content{

        font-weight: bold;

        color: #fff;

        font-size: 14px;

        width: 200px;

        height: 230px;

    }

</style>

<div class="first">文本内容</div>

<script>

    // 1.获取元素

    var div = document.querySelector('div');

    // 2.注册事件 处理程序

    div.onclick = function(){

        // 通过修改元素的className更改元素的样式(类名会覆盖在div类上面)，适用于样式较多功能较杂的情况。

        div.className = 'content'

        // 如果想保留覆盖前的class类名，我们可以选择多类名选择器

        div.className = 'first content'

    }

</script>




![](https://img-blog.csdnimg.cn/e0341dbb9c6f402fb4b75643dcc91b48.gif)



🍋总结

----



> **操作元素：**

> 

> ①**操作元素内容**

> 

> ❶innerText        ❷innerHTML

> 

> ②**操作常见元素属性**

> 

> ❶src        ❷href        ❸title        ❹alt 等

> 

> ③**操作表单元素属性**

> 

> ❶type        ❷value        ❸disabled 等

> 

> ④**操作元素样式属性**

> 

> ❶element.style        ❷className



> 🍃JavaScript的学习还是要以多练习为主，想要练习JavaScript的朋友，推荐可以去牛客网看一看，链接：[牛客网]( ) 里面的IT题库内容很丰富，属于国内做的很好的了，最重要的是里面的资源是免费的，是课程+刷题+面经+求职+讨论区分享，一站式求职学习网站，感兴趣的可以去看看。



![](https://img-blog.csdnimg.cn/fafa13262f094d25a001efc1a8a2ef07.png)




**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/8087f8c06b129975b3b7be228aa41f0d.png)

**JavaScript**

![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)



**性能**

![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)

**linux**

![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)

**前端资料汇总**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)