传统获取方式

传统方式元素获取方式

 <body class="mybody">
    <input type="button" value="点击" id="btn">
    <div id="dv1" name="mydiv" class="cls">
        <p>111</p>
        <p>222</p>
    </div>
    <div id="dv2" name="mydiv" class="cls">
        <p>333</p>
        <p>444</p>
    </div>
    <div id="dv3">
        <p>555</p>
        <p>666</p>
    </div>
    <script>
        //1-根据id获取元素
        let brn = document.getElementById("btn")
        console.log(btn);
        console.dir(btn);
        btn.value = "确定";
        //2-根据标签名获取元素
        let newDivs = document.getElementsByTagName("div");
        for (let newDiv of newDivs) {
            newDiv.style.background = "red";
        }
        //3-根据name获取元素
        let ediv = document.getElementsByName("mydiv")
        for (let i = 0; i < ediv.length; i++) {
            ediv[i].style.background = "pink"
        }
        //4-根据类名获取元素
        document.getElementsByClassName("mybody")[0].style.background = "green"
    </script>

根据CSS获取元素

HTML代码元素

 <style>
    .mybody {
      background-color: aliceblue;
    }

    .cls {
      font-size: small;
    }
  </style>
</head>

<body class="mybody">
  <input type="button" value="点击" id="btn">
  <div id="dv1" name="mydiv" class="cls">
    <p>111</p>
    <p>222</p>
  </div>
  <div id="dv2" name="mydiv" class="cls">
    <p>333</p>
    <p>444</p>
  </div>
  <div id="dv3">
    <p>555</p>
    <p>666</p>
  </div>
  <div id="dv4">
    <a>链接1</a>
    <a>链接2</a>
    <p>
      <a>链接3</a>
    </p>
  </div>
  <div id="dv5">
    <ul>
      <li>张无忌</li>
      <li>张三丰</li>
      <li>牛魔王</li>
      <li>郭靖</li>
    </ul>
  </div>

id选择器

 let btn = document.querySelector("#btn")
    btn.value = "确定"

标签选择器

for (let ele of document.querySelectorAll("div")) {
      ele.style.background = "red"
}

类选择器

     for (let ele of document.querySelectorAll(".cls")) {
      ele.style.fontSize = "x-large"
    }

后代选择器

for (let ele of document.getElementById("dv3").getElementsByTagName("p")) {
      ele.style.background = "yellow";
    }
    for (let ele of document.querySelectorAll("#dv3 p")) {
      ele.style.background = "blue"
    }

子代选择器

     for (let ele of document.querySelectorAll("#dv4>a")) {
      ele.style.color = "green"
    }

结构选择器

     document.querySelector("#dv5 ul li:first-child").innerHTML = "hi"
    document.querySelectorAll("#dv5 ul li:first-child")[0].innerHTML = "hello"
    document.querySelector("#dv5 li:nth-child(3)").innerHTML = "ch"

事件

常用事件

点击事件

<input type="button" value="控制台打印数组数据" id="btn">
  <script>
    let arr = ["jack", "tom"];
    document.querySelector("#btn").onclick = function () {
      console.log(this);
      for (let i = 0; i < arr.length; i++) {
        console.log(i + " " + arr[i]);
      }
    }
  </script>

鼠标事件

     <ul>
        <li>小花</li>
        <li>小白</li>
        <li>小黑</li>
    </ul>
    <script>
        for (let eleli of document.querySelectorAll("li")) {
            eleli.onmouseover = function () {
                console.log("被触发了");
                eleli.style.background = "red";

            }
            eleli.onmouseout = function () {
                eleli.style.background = ""
            }
        }

焦点事件

     <input type="text" value="请输入搜索内容" id="txtSearch" />
    <script>
        let txtSearch = document.querySelector("#txtSearch");
        txtSearch.onfocus = function () {
            if (this.value == "请输入搜索内容") {
                this.value = ""
                this.style.color = "black"
            }
        }
        txtSearch.oblur = function () {
            this.value = "请输入搜索内容"     // 清空文本
            this.style.color = "gray"
        }

多事件注册

<input type="button" value="绑定事件" id="btnAddEvent">
  <input type="button" value="解绑第一个事件" id="btnRemoveEvent">
  <script>
    function f1() {
      console.log("第一个事件");
    }
    function f2() {
      console.log("第二个事件");
    }
    let btnAddEvent = document.querySelector("#btnAddEvent");
    btnAddEvent.addEventListener("click", f1)
    btnAddEvent.addEventListener("click", f2)
    btnAddEvent.addEventListener("click", function () {
      console.log("第三个事件");
    })
    document.querySelector("#btnRemoveEvent").onclick = function () {
      btnAddEvent.removeEventListener("click", f1)    // 解绑事件
    }
  </script>

事件参数e

  <input type="button" value="事件参数e" id="btnEvent" />
    <script>
        //为同一个元素绑定多个不同的事件,指向相同的事件处理函数
        let btnEvent = document.querySelector("#btnEvent");
        btnEvent.onclick = f1;
        btnEvent.onmouseover = f1;
        btnEvent.onmouseout = f1;
        function f1(e) {
            console.log(e.type);
            switch (e.type) {
                case "click":
                    alert("点击")
                    break;
                case "mouseover":
                    btnEvent.style.background = "red"
                    break;
            }
        }
    </script>

事件冒泡

     <style>
        #dv1 {
            width: 300px;
            height: 200px;
            background-color: red;
        }

        #dv2 {
            width: 250px;
            height: 150px;
            background-color: green;
        }

        #dv3 {
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>
<body>
    <div id="dv1">
        <div id="dv2">
            <div id="dv3"></div>
        </div>
    </div>
    <script>
        document.querySelector("#dv1").onclick = function () {
            console.log(this.id);
        };
        document.querySelector("#dv2").onclick = function () {
            console.log(this.id);
        };
        document.querySelector("#dv3").onclick = function (/* e */) {
            // e.stopPropagation();
            window.event.cancelBubble = true;
            console.log(this.id);
        };
    </script>