WebApi

最新推荐文章于 2024-09-14 18:52:56 发布

隐曜绅士

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量52

点赞数

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

本文链接：https://blog.csdn.net/m0_62915189/article/details/130171863

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章详细介绍了如何使用JavaScript的document对象的querySelector方法选取DOM元素，以及如何修改元素的innerHTML属性来改变内容。此外，还涵盖了修改对象属性，如图片的src，input的value和type，以及通过添加和删除CSS类名来切换样式。同时，文章还展示了动态创建和删除元素的方法。

摘要由CSDN通过智能技术生成

document：是浏览器中的全局对象，任何一个页面都会有一个document，所有的dom api都是通过document来展开的

querySelector 选择器：

<body style="background:url(images/bg.jpg) no-repeat;">
    <div style="margin-top: 300px; margin-left: 700px;">
        <div class="box">abc</div>
        <div id="id">def</div>
        <h3>
            <span>
                <input type="text">
            </span>
        </h3>
        <script>
           let elem1=document.querySelector('.box');
           console.dir(elem1);
           let elem2=document.querySelector('#id');
           console.dir(elem2);
           let elem3=document.querySelector('h3>span>input');
           console.dir(elem3);
        </script>    
    </div>
</body>

当有多个.box，默认选中的是第一个，如果有多个向全选择出来就需要querySelectorAll来实现，querySelectorAll返回的是一个数组

事件：针对用户的操作进行的一些响应

修改对象内容

首先要获取得到该元素，使用innerHTML属性，就能拿到元素里面的内容，修改该属性就会让界面收到改变例如：

<body>
    <div style="margin-top: 300px; margin-left: 700px;">
        <div class="box">abc</div>
        <div id="id">def</div>
        <h3>
            <span>
                <input type="text">
            </span>
        </h3>
        <script>
           let elem1=document.querySelector('.box');
           console.dir(elem1);
           elem1.onclick=function(){
            console.log(elem1.innerHTML);
            elem1.innerHTML+='a';
           };
           let elem2=document.querySelector('#id');
           console.dir(elem2);
           let elem3=document.querySelector('h3>span>input');
           console.dir(elem3);
        </script>    
    </div>
</body>

修改对象属性

<body>
    <div style="margin-top: 300px; margin-left: 700px;">
        <img src="./头像.jpg" width="170px" height="170px" alt="">
        <script>
           let imgchage=document.querySelector("img");
           imgchage.onclick=function(){
            imgchage.src="./背景.jpg"
           }
        </script>    
    </div>
</body>

当点击头像后，就会将路径改成别的

修改表单属性

对input的value属性设置

<body>
    <div style="margin-top: 300px; margin-left: 700px;">
        <input type="text">
        <button>注册VIP</button>
        <script>
            let inputChage=document.querySelector('input');
            let buttonChage=document.querySelector('button');
            buttonChage.onclick=function()
            {
                // 必须使用value，使用innerHTML获取不到内容
                // parseInt()强制转换成int
                // value是一个字符串类型，直接相加减会变成字符串的拼接
                let val=parseInt(inputChage.value);
                val=val+1;
                inputChage.value=val;
            }
           
        </script>    
    </div>
</body>

此时输入0后，点击按钮，input框内的内容就会自动实现加1.

对input的type属性设置

<body>
     <div style="margin-top: 300px; margin-left: 700px;">
        <input type="text">
        <button>隐藏密码</button>
        <script>
            let inputChage=document.querySelector('input');
            let buttonChage=document.querySelector('button');
            buttonChage.onclick=function()
            {
                // 必须使用value，使用innerHTML获取不到内容
                // parseInt()强制转换成int
                // value是一个字符串类型，直接相加减会变成字符串的拼接
                if(inputChage.type == 'text')
                {
                    inputChage.type = 'password';
                    buttonChage.innerHTML="显示密码";
                }else{
                    inputChage.type = 'text';
                    buttonChage.innerHTML="隐藏密码"
                }
            }
           
        </script>
</body>

实现的是一个隐藏密码的功能

对style的设置

<body>
    <div style="margin-top: 300px; margin-left: 700px;">
        <p style="font-size: 20px;">This is a world</p>
        <script>
            //每次点击一下就会加上十个像素
            let p=document.querySelector("p");
            p.onclick=function()
            {
                let stylesize=parseInt(p.style.fontSize);
                stylesize+=10;
                //不要忘记px否则就会被浏览器忽略
                p.style.fontSize=stylesize+"px";
            }
        </script>    
    </div>
</body>

修改css的类名

<body>
    <style>
        .light{
            color: aqua;
            background-color: bisque;
        }
        .dark{
            color: #4e05f7;
            background-color: cadetblue;
        }
    </style>
    <div style="margin-top: 300px; margin-left: 700px;">
        <p class="ligth">这是日间模式</p>
        <script>
            //每次点击切换模式
            let p=document.querySelector("p");
            p.onclick=function()
            {
                if(p.className == 'light')
                {
                    p.className='dark';
                    p.innerHTML='这是夜间模式';
                }else{
                    p.className='light';
                    p.innerHTML='这是日间模式';
                }
            }
        </script>    
    </div>
</body>

创建元素

<body>
    <div style="margin-top: 300px; margin-left: 700px;">
        <p class="ligth">点击一下加入一个input框</p>
        <script>
            let p=document.querySelector("p");
            p.onclick=function()
            {
                // 创建需要的元素
                let inpu=document.createElement('input');
                // 为input加入属性
                inpu.value='hello';
                //加入到需要的地方
                p.appendChild(inpu);
            }
        </script>    
    </div>
</body>