WebAPI

最新推荐文章于 2024-06-14 14:36:26 发布

思鱼不是死鱼

最新推荐文章于 2024-06-14 14:36:26 发布

阅读量336

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_64054032/article/details/129991988

版权

DOM API

获取元素

querySelector参数就是一个css选择器，可以使用亲密学过的任意一种选择器来选中元素

<body>
    <div class="one">hello</div>
    <script>   
    let div = document.querySelector('.one') ;
    </script>
</body>

<body>
    <div id="div-id">hello</div>
    <script>   
    let div = document.querySelector('#div-id') ;
    </script>
</body>

使用console.dir()可以把元素以对象的形式打印出来：

<body>
    <div class="one" id="div-id">hello</div>
    <script>   
    let div = document.querySelector('#div-id') ;
    console.log(div);
    console.dir(div);
    </script>
</body>

多个同一标签名的对象在选择的时候只会得到第一个元素

<body>
    <div>hello</div>
    <div>hello2</div>
    <div>hello3</div>
    
    <script>   
    let div = document.querySelector('div') ;
    console.log(div);
    console.dir(div);
    </script>
</body>

可以使用querySelectorAll来选择全部元素

<body>
    <div>hello</div>
    <div>hello1</div>
    <div>hello2</div>

    <script>   
    let divs = document.querySelectorAll('div') ;
    console.log(divs);
    </script>
</body>

事件

和用户操作密切相关的，例如用户在浏览器上左键点击鼠标，右键点击鼠标，鼠标移动，浏览器窗口大小调整，滚动窗口位置等。

<body>
    <div>hello</div>

    <script>   
        let div = document.querySelector('div');
        div.onclick = function() {
            //onclick就是针对cick这个点击事件提前准备好的事件处理程序
            console.log("按下鼠标");
        }
    </script>
</body>

在控制台就会显示按下鼠标这四个字右边会有按下鼠标的次数

更多事件示范：

    <script>   
        let div = document.querySelector('div');
        div.onclick = function() {
            //onclick就是针对cick这个点击事件提前准备好的事件处理程序
            console.log("按下鼠标");
        } 
        div.onmousemove = function(){
            console.log('鼠标移动');
        }
        div.onmouseenter = function(){
            console.log('鼠标进来了');
        }

        div.onmouseout = function(){
            console.log('鼠标出去了');
        }
    </script>

操作元素

元素就是html标签，操作元素就是在js中先获取到对应的html对象后再来操作其中的属性和内容（内容就是两个标签夹着的部分例如<div>hello<div>中的hello）

<body>
    <div>hello</div>

    <script>
        let div = document.querySelector('div');
        console.log(div.innerHTML);
    </script>
</body>

同样可以获取到div内部的内容

<body>
    <div>
        <h1>hello</h1>
    </div>

    <script>
        let div = document.querySelector('div');
        console.log(div.innerHTML);
    </script>
</body>

还可以修改元素里的内容（通过点击来给这个属性赋值）

<body>
    <div>
        <h1>hello</h1>
    </div>

    <script>
        let div = document.querySelector('div');
        console.log(div.innerHTML);

        //通过给这个属性赋值，来起到修改的作用
        div.onclick = function(){
            div.innerHTML = 'hello java';
        }
    </script>
</body>

在里面赋值不仅仅可以是文本，还可以是html片段

    <script>
        let div = document.querySelector('div');
        console.log(div.innerHTML);

        //通过给这个属性赋值，来起到修改的作用
        div.onclick = function(){
            //这里不仅仅可以赋值文本，还可以赋值html片段
            div.innerHTML = '<button>按钮</button>';
        }
    </script>

但是input是单标签所以当我们点击按钮的，时候获取不到input里面的信息

<body>
    <input type="text">
    <button>按我触发函数</button>

    <script>
        let input = document.querySelector('input');
        let button = document.querySelector('button');
        button.onclick = function(){
            console.log(input.innerHTML);
        }

    </script>
</body>

这个时候，我们就需要把innerHTML换成value

获取/修改元素属性

修改的是开始标签里面写的那些键值对

<body>
    <img src="rose.png" alt="" width="200px">

    <script>
        let img = document.querySelector('img');
        console.log(img.src);
        console.log(img.width);
        console.log(img.alt);

    </script>
</body>

打印出来的是图片的路径，宽度，以及没有设定所以为空的alt

同时，当我们使用点击修改图片功能的时候，对应的属性也会随之修改

    <script>
        let img = document.querySelector('img');
        console.log(img.src);
        console.log(img.width);
        console.log(img.alt);

        img.onclick = function(){
            img.src = 'miku.png'
        }
    </script>

隐藏和显示密码功能

<body>
    
    <input type="password">
    <button>显示密码</button>

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

        button.onclick = function() {
            if (input.type == 'password'){
            //一点击我们就可以显示密码
                input.type = 'text';
            //同时把文字内容更改    
                button.innerHTML = '隐藏密码';
            }
            else if (input.type == 'text'){
                //后面同理
                input.type = 'password';
                
                button.innerHTML = '显示密码';
            }
            else{
                //当不是密码类型的时候报错
                alert('type错误');
            }
        }
    </script>
</body>

计数器

<body>
    <input type="text" value="0">
    <button id="minus">-</button>
    <button id="add">+</button>

    <script>
        let input = document.querySelector('input');
        let addBtn = document.querySelector('#add');
        let minusBtn = document.querySelector('#minus');

        addBtn.onclick = function(){
            let oldValue = parseInt(input.value);
            //parseInt可以把字符串转化成数字
            //parseInt不仅仅是针对字符串操作，也能针对其他类型操作
            oldValue += 1;
            input.value = oldValue;
        }

        minusBtn.onclick = function(){
            let oldValue = parseInt(input.value);
            oldValue -= 1;
            input.value = oldValue;
        }
    </script>

</body>

自动勾选

<body>
    <h3>请选择你的需要</h3>
    <div>
        <input type="checkbox" class="fruit"> 苹果
    </div>
    <div>
        <input type="checkbox" class="fruit"> 香蕉
    </div>
    <div>
        <input type="checkbox" class="fruit"> 橘子
    </div>
    <div>
        <input type="checkbox" class="all"> 全都要
    </div>

    <script>
        let all = document.querySelector('.all');
        let fruit = document.querySelectorAll('.fruit')

        //针对all来处理，用户点击all就可以全选
        all.onclick = function(){
            console.log('all.checked: ' + all.checked);
            for(let i = 0 ; i < fruit.length; i++){
              
                fruit[i].checked = all.checked;
            }
        }
    </script>
</body>

变大的字体

<body>
    <h3 style="font-size: 20px;">请选择你的需要</h3>

    <script>
        let h3 = document.querySelector('h3');
        //每次点击可以使字体放大
        h3.onclick = function(){
            let oldSize = h3.style.fontSize;
            //h3.style本身就是一个对象，因此可以继续获取属性

            oldSize = parseInt(oldSize);

            //因为这里oldsize的值不是只有20 后面还带着px
            //parselnt是从左往右进行转换，过程中如果遇到了非字母的数字就会停止

            oldSize += 10;
            //设置样式的值的时候需要把单位带上
            h3.style.fontSize = oldSize + 'px' ;
            
        }
    </script>
</body>

开关灯

<body>
    <style>
        .light {
            color: black;
            background-color: white;
        }

        .dark {
            color: white;
            background-color: black;
        }

        div{
            height: 100%;
        }

        body {
            height: 100%;
        }

        html {
            height: 100%;
        }
    </style>

    <div class="light">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus perferendis dolores veritatis iusto omnis eos itaque totam architecto tempora natus, cum modi voluptatibus, nobis fugiat similique. Numquam repudiandae fugit impedit?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus perferendis dolores veritatis iusto omnis eos itaque totam architecto tempora natus, cum modi voluptatibus, nobis fugiat similique. Numquam repudiandae fugit impedit?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus perferendis dolores veritatis iusto omnis eos itaque totam architecto tempora natus, cum modi voluptatibus, nobis fugiat similique. Numquam repudiandae fugit impedit?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus perferendis dolores veritatis iusto omnis eos itaque totam architecto tempora natus, cum modi voluptatibus, nobis fugiat similique. Numquam repudiandae fugit impedit?
    
    </div>

    <script>
        let div = document.querySelector('div');
        div.onclick = function(){
            //通过classname属性来获取到html元素中的class属性
            //div.className = div class = "light"
            //因为class是一个关键字，不能作为属性名，变量名，函数名
            if(div.className == 'dark' ){
                div.className == 'light';
            }else if (div.className == 'light' ){
                div.className == 'dark';
            }else{
                alert('类名错误');
            }

        }

    </script>
</body>

新增节点

<body>
    <div class="'parent">
        <div>11</div>
        <div>22</div>
        <div>33</div>
    </div>

    <script>
        let div = document.querySelector('div');
        childDiv = document.createElement('div');
        //针对哪个需要增加元素
        childDiv.innerHTML = '44';
        //具体增加元素的内容
        div.appendChild(childDiv);
        //执行增加元素

    </script>


</body>

删除节点

<body>
    <div class="parent">
        <div>11</div>
        <div>22</div>
        <div class="toDelete">33</div>
    </div>

    <script>
        let div = document.querySelector('.parent');
        let toDelete = document.querySelector('.toDelete');
        div.removeChild(toDelete);



    </script>


</body>