代码放入HTML中

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

1. DOM修改文档内容

<button>操作内容</button>
   <div>
       <p>这是初始文本</p>
   </div>
   
   <script>
  		//获取元素
       let ele = document.querySelector('p');
       let btn = document.querySelector('button')
       //获取文本内容，并打印
       console.log(ele.innerText)
       //给按钮绑定点击事件，文档流中每个元素都可以看成是一个变量，对这些变量，可以操作
       btn.onclick = function(){
           //点击按钮时，更改文本内容
           ele.innerText = '这是修改后的文本内容'
       }
   </script>

2. 操作属性

<button>操作属性</button>
   <div id="box">div标签</div>
   <input type="password">
   
   <script>
       let box = document.querySelector('div');
       let inp = document.querySelector('input');
       let btn = document.querySelector('button');
       
       //获取文本内容，并打印
       console.log(box.id);	//打印为box
       //给按钮绑定点击事件，文档流中每个元素都可以看成是一个变量，对这些变量，可以操作
       btn.onclick = function(){
           
           //点击按钮时，
           box.id = 'haha';
           inp.type = 'radio'
       } 
   </script>

3. 操作样式

  <button>操作样式</button>
  <div style="width:100px; height:100px; background-color:pink">div标签</div>
  
  <script>
      let box = document.querySelector('div');
      let btn = document.querySelector('button');
      
      //获取文本内容，并打印
      console.log(box.style.backgroundColor);		//打印为pink
      
//点击按钮时，
      btn.onclick = function(){
          box.style.width = '200px';
          box.style.height = '300px';
          box.style.backgroundColor = 'skyblue';
      }
  </script>

4. 点击按钮滑动到顶部通栏

<style>
    body{
        margin: 0px;
        height: 2000px;
    }
    .header{
        width: 100%;
        height: 30px;
        text-align:center;
        vertical-align: middle;
        background-color: pink;
        transition: top 0.5s linear;
    }
    button{
        width: 50px;
        height: 30px;
        background-color: pink;
        font-size: 16px;
        color: #000;
        text-align:center;
        vertical-align: middle;
        position: fixed;
        right: 20px;
        bottom: 100px;
        display: none;
    }
    
    
</style>
    <div class="header">顶部通栏</div>
    <button>顶部</button>
    
    
    <script>
        let box = document.querySelector('div');
        let btn = document.querySelector('button');
        
        //滚动滚动条时，超过一定高度，显示按钮
        window.onscroll = function(){
            let height = document.documentElement.scrollTop || document.body.scrollTop;
            if(height>40){
                btn.style.display = 'block';
            }else{
                btn.style.display = 'none';
            }
        }

        //点击按钮时，
        btn.onclick = function(){
            window.scrollTo({
            left: 0,
               top: 0,
               behavior: 'smooth'  //方式为平滑滚动
            })

        }
    </script>

5. for in遍历对象

<script>
    let users = {id: 1, name: '前端小灰狼', age: 28 };
    for (let key in users) {
        console.log(key);
        console.log(users[key]);
    }
</script>

6. 全选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <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>全选按钮</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 100px;
            padding:20px;
            border: 1px solid pink;
            margin: 30px auto;
            border-radius: 5px;
        } 
        hr{
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="box">
        全选 : <input type="checkbox"/><br/>
        <hr/>
        <input type="checkbox"/> 选项一 <br/>
        <input type="checkbox"/> 选项二 <br/>
        <input type="checkbox"/> 选项三 <br/>
        <input type="checkbox"/> 选项四 <br/>
    </div>
    <script>
        //1. 获取元素
        let allBtn = document.querySelector('input');
        let items = document.querySelectorAll('input:nth-child(n+2)');
        //2. 给全选按钮添加事件
        allBtn.onclick = function(){
            //2-1. 拿到自己的选中状态
            console.log(allBtn.checked);
            
            //2-2. 把自己的选中状态复制给每一个按钮
            for(let i=0;i<items.length;i++){
                items[i].checked = allBtn.checked;
            }
        }
        //添加个数组存放，每个选中的值，添加变量，存放全部按钮都被选中的值
        let arr = [];
        let jieguo;
        for(let j=0;j<items.length;j++){

            //给每个按钮添加点击事件
            items[j].onclick = function(){

                //每个值，都被按顺序记录在数组中
                arr[j]= items[j].checked;

                //每次点击，就判断所有按钮的值，是否被选中，并把全选的结果存放在一个变量中
                for(let i=0;i<items.length;i++){
                    if(arr[i]===true){
                        jieguo = true;
                    }else{
                        jieguo = false;
                        break;
                    }
                }
                //每次点击，就判断是否全选，如果全选，则让全选按钮也被选中
                if(jieguo===true){
                    allBtn.checked = true;
                }else{
                    allBtn.checked = false;
                }
            }
            console.log(arr[j]);
        }   
    </script>
</body>
</html>

7. 全选按钮方案二

<!DOCTYPE html>
<html lang="en">
<head>
    <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>全选方案二</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 100px;
            padding:20px;
            border: 1px solid pink;
            margin: 30px auto;
            border-radius: 5px;
        } 
        hr{
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="box">
        全选 : <input type="checkbox"/><br/>
        <hr/>
        <input type="checkbox"/> 选项一 <br/>
        <input type="checkbox"/> 选项二 <br/>
        <input type="checkbox"/> 选项三 <br/>
        <input type="checkbox"/> 选项四 <br/>
    </div>
    <script>
        //1. 获取元素
        let allBtn = document.querySelector('input');
        let items = document.querySelectorAll('input:nth-child(n+2)');
        //2. 给全选按钮添加事件
        allBtn.onclick = function(){
            //2-1. 拿到自己的选中状态
            console.log(allBtn.checked);
            
            //2-2. 把自己的选中状态复制给每一个按钮
            for(let i=0;i<items.length;i++){
                items[i].checked = allBtn.checked;
            }
        }
        //3. 循环拿到每一个选项按钮，拿到是否全部选中的结果
        for(let i = 0; i<items.length; i++){
            //3-1. 给每一个按钮添加点击事件
            items[i].onclick = function(){
                //3-2. 定义假设变量，假设所有按钮都是被选中的，就可以在下面的if语句中少写个else{}
                let flag = true;

                //3-3. 通过循环来验证我们的假设
                for(let j = 0; j<items.length; j++){
                    if(items[j].checked === false){
                        //只要有一个未被选中，就记录总的为未被选中，并退出循环
                        flag = false;
                        break;
                    }
                    console.log(items[j].checked);
                }
                console.log(flag);
                allBtn.checked = flag;
            }
        }
    </script>
</body>
</html>

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

8. 选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <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>选项卡</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        ul, ol, li {
            list-style: none;
        }

        .box {
            width: 600px;
            height: 400px;
            border: 3px solid pink;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
        }

        .box > ul {
            height: 60px;
            display: flex;
        }

        .box > ul > li {
            flex: 1;
            color: #fff;
            background-color: skyblue;
            font-size: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            /* cursor : 网页浏览时用户鼠标指针的样式或图形形状。
            属性值：
            default：默认光标（通常是一个箭头）
            auto：默认，浏览器设置的光标
            crosshair：光标为十字线
            pointer：光标为一只手
            move：光标为某对象可移动
            text：光标指示文本
            wait：光标指示程序正在忙（通常是一只表或者一个沙漏） */
        }

        .box > ul > li.bgColor {
            background-color: orange;
        }

        .box ol {
            /* 场景1:使具有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容 */
            /* flex: 1 实际上是三个属性的缩写：flex-grow: 1; flex-shrink: 1 flex-basis: auto; */
            flex: 1;
            position: relative;
        }

        .box > ol > li {
            width: 100%;
            height: 100%;
            background-color: purple;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 100px;

            position: absolute;
            left: 0px;
            right: 0px;

            display: none;
        }

        .box > ol > li.dspFlex {
            display: flex;
        }

        #red {
            background-color: rgb(211, 93, 93);
        }

        #green {
            background-color: green;
        }

        #blue {
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="bgColor">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li id="red" class="dspFlex">1</li>
            <li id="green">2</li>
            <li id="blue">3</li>
        </ol>
    </div>
    <script>
        //1.获取元素
        let btns = document.querySelectorAll('ul > li');
        let tabs = document.querySelectorAll('ol > li');

        //2.利用循环给每个按钮添加点击事件
        btns.forEach(function(item,index){
            
            item.onclick = function(){

                //2-1. 给btns和tabs里面的内容取消active类名
                btns.forEach(function(t,i){
                    t.className = '';
                    tabs[i].className = '';
                })

                //2-2. 给当前按钮和索引对应内容添加active类名
                item.className = 'bgColor';
                tabs[index].className = 'dspFlex';
            }
        })

    </script>
</body>
</html>

9. 点击按钮动态渲染页面

<!DOCTYPE html>
<html lang="en">
<head>
    <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>动态渲染页面</title>
    <style>
        div{
            position: relative;
            left: 10%;
            top: 50%;
            margin: 50px auto;
        }
        table{
            border-collapse: collapse;
            border: 2px solid yellowgreen;
            border-radius: 20px;

        }
        th,td{
            height: 20px;
            width: 100px;
            border: 1px solid burlywood;
            font-size: 16px;
            text-align: center;
            padding: 10px 40px;
            color: white;
            background-color: skyblue;
        }
        button{
            position: relative;
            left: 10px;
            font-size: 16px;
            color: white;
            background-color: skyblue;
            border: 2px solid orangered;
            cursor: pointer;
            border-radius: 5px;

        }
    </style>
</head>
<body>
    <div>
    <table>
        <thead>
            <tr><th>ID</th><th>姓名</th><th>年龄</th></tr>
        </thead>
        <tbody>
            
        </tbody>
        <tfoot>
            <tr><td colspan="3"><button>生成数据</button></td></tr>
        </tfoot>
    </table>
    </div>

    <script>
        //提前准备好数据
        let users = [
            {id: 1, name: '前端小灰狼', age: 28 },
            {id: 2, name: '前端小灰', age: 27 },
            {id: 3, name: '前端小', age: 26 },
            {id: 4, name: '前端', age: 25 },
            {id: 5, name: '前', age: 24 },
        ]
        let bnt = document.querySelector('button');
        let tbody = document.querySelector('tbody');
        //1. 添加点击事件
        // bnt.onclick = function(){

        //     ////2. 通过循环制造元素
        //     for(let i=0; i<users.length; i++){

        //         console.log(users[i]);

        //         var tdText = users[i];
        //         var tr = document.createElement('tr');
        //         for(let j=0; j<3; j++){
        //             var td = document.createElement('td');
        //             td.innerHTML = tdText[j];
        //             tr.appendChild(td);
        //         }
        //         tbody.appendChild(tr);
        //     }   
        // }

        //可以替换注释掉的内容，点击按钮动态添加内容！
        bnt.onclick = function(){
            users.forEach(function(item){
                let tr = document.createElement('tr');

                for(let i in item){
                    let td = document.createElement('td');
                    td.innerText = item[i];
                    
                    tr.appendChild(td);
                }
                tbody.appendChild(tr);
            })
        }

    </script>
</body>
</html>