【API修改元素】-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45871539/article/details/144666447

API

尽量用const，不做改变
复杂数据在堆里面
简单数据类型在栈里面
地址不变就可以使用const，追加就可以
对象变化不能使用const

API:使用js操作html和浏览器，分为dom（文档对象）和bom（浏览器对象,例如alert）
DOM:在html里面叫标签，在dom里面叫对象
以CSS选择器来获取dom对象

<!DOCTYPE html>
<html lang="en">
<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>

    </style>
</head>
<body>
    <div class='box' data-id="10">123</div>
    <div class='box'>123</div>
    <p id="nav">导航栏</p>
    <ul class='nav'>
        <li>测试1</li>
        <li>测试2</li>
        <li>测试3</li>
    </ul>
    <input type="type" value="电脑" name="" id="">
    <script>
    //获取元素
        // 选择匹配的第一个元素,如果有两个她只会选择第一个
            // document.querySelector('Css选择器')
                const box=document.querySelector('div')
                const box=document.querySelector('.box')
                // 获取第一个id
                const nav=document.querySelector('#nav')
                // 获取第一个笑li
                const li=document.querySelector('ul li:first-child')
            // 选择多个标签
                const lis=document('.nav li')//得到的是一个伪数组，通过循坏来遍历
                for(let i=0;i<lis.lenth;i++){
                    console.log(lis[i]);
                    lis[i].style.color='red'
                }
            // 修改属性
                nav.style.color='red'
        //其他方法
            //根据id获取
            document.getElementById('nav')
            //根据标签获取一类元素
            docunment.getElementsByTagName('div')
            // 根据类名获取元素
            docunment.getElementsByClassName('box')
    //修改标签
        // 对象.innerText属性
        // 对象.innerHTML属性
            // 对象.innerText属性
                // 1.获取元素
                    const box =document.querySelector('.box')
                // 2.修改内容
                    console.log(box.innerText='<strong>我是一个盒子')//纯文本，不解析标签
            // 对象.innerHTML属性
                // 1.获取元素
                    const box =document.querySelector('.box')
                // 2.修改内容
                    console.log(box.innerHTML='<strong>我是一个盒子')//加粗，解析标签
    // 修改元素样式属性：herf、title、scr等
        // 对象.属性=值
            img.scr=`./images/${random}.jpg`
        //通过style进行修改，存在<style></style>
        // 对象.style.样式属性=‘值’
            nav.style.color='red'
            // 多组单词采用 小驼峰命名法
            nav.style.backgroundColor='red'//nav.style.background-color='red'这样会把-当成减号看待不行
        // 通过类名进行修改
        // 元素.classname='类名',新值换旧值
            // div{
            //     width: 100px;
            //     height: 200px;
            //     background-color: #fff;
            // }
            // .box{
            //     width: 1000px;
            //     width: 300px;
            //     background-color: #123;
            //     margin: 100 auto;
            // }
            div.ClassName='box'
        // 通过classlist进行修改，解决classname覆盖以前的类名，通过classlist方式追加和删除类名
        // 元素.class.add（‘类名’）-追加一个类
        // 元素.class.remove（‘类名’）-删除一个类
        // 元素.class.toggle（‘类名’）-切换一个类；有就删掉，没有就加上
            div.ClassList.add='box'
    // 操作表单属性
        // 获取：dom对象.属性名eg: 表单.value='用户名'
        // 设置：dom对象.属性名=新值  表单.type='password'
            // <input type="type" value="电脑">
            const uname =document.querySelector('input')
            // console.log(uname.innerHTML)得不到表单内容
            uname.type='password'
        //勾选布尔值dieabled\checked\
            const ipt =document.querySelector(input)
            console.log(ipt.checked)
            ipt.checked=true
        //自定义属性
            // 在h5中推出的专门的data自定义属性
            // 在标签一律以data-开头
            // 在dom对象上一律以dataset对象方式获取
            // eg:    <div class='box' data-id="10">123</div>
            //        const box=document.querySelector('.box')
            //        console.log(box.dataset.id)
        //定时器-间歇函数
            //开启定时器:变量名(或者是叫id)=setInterval(函数,间隔时间单位为ms不用加单位),间隔多少时间调用一次这个函数,定时器返回的是一个id数字,每一个id都是独一无二的
            //关闭定时器:clearInterval(变量名)
                let n=setInterval(fn,1000)
                clearInterval(n)
    </script>
</body>
</html>