let obj = document.querySelector('選擇器');

let elem = document.querySelectorAll('選擇器');

<button onclick="alert('hello')">點一下試試</button>

<script !src="">
    let button = document.querySelector("button");
    button.onclick = function (){
        alert("hello");
    }
</script>
<button onclick="alert('hello')">點一下試試</button>

//1.選中標(biāo)簽
let var_name = document.querySelector();
//2.獲取內(nèi)容
let content = var_name.innnerHTML;
//3.修改內(nèi)容
var_name.innerHTML = '修改值';

<div> hello world</div>
<button>點一下試試</button>-->
<script>
    let but = document.querySelector('but');
    but.onclick = function () {
        let div = document.querySelector('div');
        console.log(div.innerHTML);
    }
</script>

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<button class="but">點一下試試</button>
<script>
    let but = document.querySelector('.but');
    but.onclick = function () {
        let div = document.querySelector('div');
        console.log(div.innerHTML);
    }
</script>

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<button class="but">點一下試試</button>
<script>
    let but = document.querySelector('.but');
    but.onclick = function () {
        let div = document.querySelector('div');
        div.innerHTML = '<h1>這是一個一級標(biāo)題</h1>>';
        console.log(div.innerHTML)
    }
</script>

<div id='count'>0</div>
<button id='countAdd'>計數(shù)器:點擊+1</button>
<script !src="">
    let counterAdd = document.querySelector('#countAdd');
    counterAdd.onclick = function () {
        let num = document.querySelector('#count');
        numAdd = parseInt(num.innerHTML) + 1
        num.innerHTML = numAdd;
    };
</script>

<style>
    img {
        height: 500px;
    }
</style>
<img src="./man.jpg" alt="">
<script !src>
    let img = document.querySelector("img");
		console.dir(img);
    img.onclick = function() {
        if (img.src.indexOf('wo') !== -1) {
            img.src = './man.jpg';
        } else {
            img.src = './woman.jpg';
        }
    }
</script>

<input type="text" value="0" id='count'>
<button id='countAdd'>計數(shù)器: 點擊+1</button>
<script !src="">
    let counterAdd = document.querySelector('#countAdd');
    counterAdd.onclick = function () {
        let num = document.querySelector('#count');
        numAdd = parseInt(num.value) + 1
        num.value = numAdd;
    };
</script>

<input type="text" id="pw">
<button>隱藏密碼</button>
<script !src="">
    let pw = document.querySelector('#pw');
    let button = document.querySelector('button');
    button.onclick = function() {
        if (pw.type == 'text') {
            pw.type = 'password';
            button.innerHTML = '顯示密碼';
        } else {
            pw.type = 'text';
            button.innerHTML = '隱藏密碼';
        }
    }
</script>

<input type="checkbox" id="all">我全都要 <br>
    <input type="checkbox" class="girl">貂蟬 <br>
    <input type="checkbox" class="girl">小喬 <br>
    <input type="checkbox" class="girl">安琪拉 <br>
    <input type="checkbox" class="girl">妲己 <br>
    <script>
        //checked屬性為checked/true表示選中狀態(tài),為空字符串/false表示未選中
        //獲取到元素
        let all = document.querySelector('#all');
        let girls = document.querySelectorAll('.girl');
        //給all注冊點擊事件,選中/取消所有選項
        all.onclick = function () {
            for (let i = 0; i < girls.length; i++) {
                //使girl元素狀態(tài)與all相同
                girls[i].checked = all.checked;
            }
        }
        //給所有g(shù)irl元素注冊點擊事件
        for (let i = 0; i < girls.length; i++) {
            girls[i].onclick = function () {
                //檢測當(dāng)前是不是所有的girl元素都被選中了,確定all的狀態(tài)
                all.checked = checkGirls(girls);
            }
        }
        //實現(xiàn)checkGirls,檢測當(dāng)前是不是所有的girl元素都被選中了
        function checkGirls(girls) {
            for (let i = 0; i < girls.length; i++) {
                if (!girls[i].checked) {
                    //只要一個 girl 沒被選中,就認(rèn)為結(jié)果是 false(找到了反例)
                    return false;
                }
            }
            // 所有 girl 中都沒找到反例, 結(jié)果就是全選中
            return true;
        }
    </script>

<div style="font-size:20px;">
    這是一段文本,點擊之后字體放大
</div>
<script !src="">
    let div = document.querySelector("div");
    div.onclick = function() {
        //1.獲取文字大小屬性
        let size = parseInt(div.style.fontSize);
        console.log("修改前" + size);
        //2.修改文字大小
        size += 5;
        //3.寫回到屬性
        div.style.fontSize = size + "px";
        console.log("修改后" + size);
    }
</script>

<div class="container light">
    這是一大段話. <br>
    這是一大段話. <br>
    這是一大段話. <br>
    這是一大段話. <br>
</div>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    html, body {
        width: 100%;
        height: 100%;
    }
    .container {
        width: 100%;
        height: 100%;

    }
    .light {
        background-color: #f3f3f3;
        color: #333;
    }
    .dark {
        background-color: #333;
        color: #f3f3f3;
    }
</style>
<script !src="">
    let div = document.querySelector('div');
    div.onclick = function () {
        console.log(div.className);
        if (div.className.indexOf('light') != -1) {
            div.className = 'container dark';
        } else {
            div.className = 'container light';
        }
    }
</script>

let element = document.createElement('元素標(biāo)簽名');

父元素.appendChild(創(chuàng)建的子元素);

新插入節(jié)點的父元素.insertBefore(新插入的元素, 指定節(jié)點(將要插在這個節(jié)點之前));
<div class="container">
    <div>11</div>
    <div>22</div>
    <div>33</div>
    <div>44</div>
</div>
<script>
    var newDiv = document.createElement('div');
    newDiv.innerHTML = '我是新的節(jié)點';
    var container = document.querySelector('.container');
    console.log(container.children);
    //children可以返回父元素所有的直系子節(jié)點的集合
    container.insertBefore(newDiv, container.children[0]);
</script>

父元素.removeChild(需要刪除的子元素);

<button id="flash">重開一局</button>
<div>請輸入要猜的數(shù)字</div>
<input type="text">
<button id="submit">提交</button>
<!--使用這個div來顯示猜測結(jié)果-->
<div class="result"></div>

<script>
  //1.生成一個1-100隨機(jī)的整數(shù)
  let toGuess = parseInt(100 * Math.random()) + 1;
  console.log(toGuess);//用于測試,方便查看猜測結(jié)果
  //2.進(jìn)行猜數(shù)字操作,比較用戶輸入的數(shù)和生成的隨機(jī)數(shù)
  let input = document.querySelector('input');
  let resultDiv = document.querySelector('.result');
  let submit = document.querySelector('#submit');
  submit.onclick = function() {
    //取出輸入框中的內(nèi)容
    if (input.value == '') {
      //輸入框沒有值,用戶啥都沒輸入,直接返回
      return;
    }
    let inputNum = parseInt(input.value);
    //比較大小關(guān)系
    if (inputNum < toGuess) {
      //小了
      resultDiv.innerHTML = '猜小了';
    } else if (inputNum > toGuess) {
      //大了
      resultDiv.innerHTML = '猜大了';
    } else {
      //猜對了
      resultDiv.innerHTML = '猜對了';
    }
  }
  //3.刷新頁面
  let flash = document.querySelector('#flash');
  flash.onclick = function() {
    location.reload();
  }
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表白墻</title>
    <style>
        * {
            /* 消除瀏覽器的默認(rèn)樣式 */
            margin: 0;
            padding: 0;
            /* 保證盒子不被撐大 */
            box-sizing: border-box;
        }

        .container {
            width: 600px;
            margin: 20px auto;
        }

        h1 {
            text-align: center;
        }

        p {
            text-align: center;
            color: #666;
            margin: 20px 0;
        }

        .row {
            /* 開啟彈性布局 */
            display: flex;
            height: 40px;
            /* 水平方向居中 */
            justify-content: center;
            /* 垂直方向居中 */
            align-items: center;
        }

        .row span {
            width: 80px;
        }

        .row input {
            width: 200px;
            height: 30px;
        }

        .row button {
            width: 280px;
            height: 30px;
            color: white;
            background-color: orange;
            /* 去掉邊框 */
            border: none;
            border-radius: 5px;
        }

        /* 點擊的時候有個反饋 */
        .row button:active {
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>表白墻</h1>
        <p>輸入內(nèi)容后點擊提交, 信息會顯示到下方表格中</p>
        <div class="row">
            <span>是誰: </span>
            <input type="text">
        </div>
        <div class="row">
            <span>對誰: </span>
            <input type="text">
        </div>
        <div class="row">
            <span>說: </span>
            <input type="text">
        </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>
        <div class="row">
            <button id="revert">撤銷</button>
        </div>
        <!-- <div class="row">
            xxx 對 xx 說 xxxx
        </div> -->
    </div>

    <script>
        // 實現(xiàn)提交操作. 點擊提交按鈕, 就能夠把用戶輸入的內(nèi)容提交到頁面上顯示.
        // 點擊的時候, 獲取到三個輸入框中的文本內(nèi)容
        // 創(chuàng)建一個新的 div.row 把內(nèi)容構(gòu)造到這個 div 中即可.
        let containerDiv = document.querySelector('.container');
        let inputs = document.querySelectorAll('input');
        let button = document.querySelector('#submit');
        button.onclick = function() {
            // 1. 獲取到三個輸入框的內(nèi)容
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if (from == '' || to == '' || msg == '') {
                return;
            }
            // 2. 構(gòu)造新 div
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row message';
            rowDiv.innerHTML = from + ' 對 ' + to + ' 說: ' + msg;
            containerDiv.appendChild(rowDiv);
            // 3. 清空之前的輸入框內(nèi)容
            for (let input of inputs) {
                input.value = '';
            }
        }
        let revertButton = document.querySelector('#revert');
        revertButton.onclick = function() {
            // 刪除最后一條消息.
            // 選中所有的 row, 找出最后一個 row, 然后進(jìn)行刪除
            let rows = document.querySelectorAll('.message');
            if (rows == null || rows.length == 0) {
                return;
            }
            containerDiv.removeChild(rows[rows.length - 1]);
        }
    </script>
</body>
</html>