DOM中操作元素的四种方式

Fe2Fe3

于 2022-12-12 11:34:08 发布

阅读量618

点赞数 1

分类专栏：前端文章标签：前端 html javascript

本文链接：https://blog.csdn.net/Fe2Fe3/article/details/128283914

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一：变量名.style.属性名当修改属性较少时推荐

二：变量名.className 当修改属性较多时推荐通过修改元素的类名来达到效果

首先，先回忆一下触发事件三要素:

事件源（触发事件的对象）
事件类型（怎样才能触发事件）
事件过程（基本是通过function构造一个函数来解决）

1-修改元素内容

两种方法：

innerHTML
innerText

两种方法都可以实现修改元素内容的效果，但目前的话innerHTML课程老师是比较推荐使用的

简单演示：通过点击使其内容变化

<body>
    <div>开始</div>
    <script>
        var a=document.querySelector('div')
        a.onclick=function(){
            a.innerHTML=('结束')
        }
    </script>
</body>

2-修改元素属性

直接获取需要修改的元素然后重新赋值就可以

<body>
    <div class="box">
    <button id="lh">图片1</button>
    <button id="xg">图片2</button>
    <button id="nl">图片3</button>
         <div class="son">
    <img src="./好康的/1-x.jpg" alt="" title="老婆">
        </div>
     </div>
    <script>
        var lh=document.getElementById('lh');
        var xg=document.getElementById('xg');
        var nl=document.getElementById('nl');
        var tu=document.querySelector('img');
        nl.onclick=function(){
            tu.src='./好康的/2-x.png';
        }
        lh.onclick=function(){
            tu.src='./好康的/1-x.jpg';
        }
        xg.onclick=function(){
            tu.src='./好康的/5.jpg';
        }
    </script>
</body>

3-修改表单属性

这里的话日常记住type、value、disable=true/false(默认false，true使按钮只能使用一次)

<body>
    <form action="">
    <button>提交</button>
    <input type="text"  placeholder="请输入文字" value="">
    
    </form>
    <script>
        var a=document.querySelector('button');
        var b=document.querySelector('input');
        a.onclick=function(){
            a.disabled=true;
            b.value='您已提交';
            b.disabled=true;
            b.type='reset'
        }
    </script>
</body>

4-修改元素样式属性

两种方式：

一：变量名.style.属性名当修改属性较少时推荐

<style>
        div{
            width: 50px;
            height: 50px;
            background-color: red;
            text-align: center;
            padding-top: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>点我</div>
    <script>
        var a=document.querySelector('div');
        a.onclick=function(){
            a.innerHTML='我还要'
            if(b==0){
                a.style.backgroundColor='orange';
            }
        }
    </script>
</body>

二：变量名.className 当修改属性较多时推荐通过修改元素的类名来达到效果

    <style>
        .first{
            width: 50px;
            height: 50px;
            background-color: red;
            text-align: center;
            padding-top: 10px;
            box-sizing: border-box;
        }
        .second{
            width: 50px;
            height: 50px;
            background-color: blue;
            text-align: center;
            padding-top: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="first"></div>
    <script>
       var a=document.querySelector('.first')
       a.onclick=function(){
        a.className=('second')
       }
    </script>
</body>