浅谈JS获取元素的N种方法及其动静态讨论

文章标题：浅谈JS获取元素的N种方法及其动静态讨论

概述

获取元素是前端开发中最常用的操作之一，也是JS语言的一项基本技能。本文将介绍JS获取元素的N种方法及其动、静态讨论。

静态获取元素

1. getElementById

使用document.getElementById(id)方法可以通过id直接获取元素。

<div id="myDiv"></div>
<script>
    var myDiv = document.getElementById("myDiv");
</script>

2. getElementsByClassName

使用document.getElementsByClassName(className)方法可以通过类名获取元素。

<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<script>
    var myClass = document.getElementsByClassName("myClass");
</script>

3. getElementsByTagName

使用document.getElementsByTagName(tagName)方法通过标签名获取元素。

<div></div>
<div></div>
<div></div>
<script>
    var divs = document.getElementsByTagName("div");
</script>

4. querySelector

使用document.querySelector(selector)方法可以通过CSS选择器获取第一个匹配的元素。

<div id="myDiv"></div>
<script>
    var myDiv = document.querySelector("#myDiv");
</script>

5. querySelectorAll

使用document.querySelectorAll(selector)方法可以通过CSS选择器获取所有匹配的元素。

<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<script>
    var myClass = document.querySelectorAll(".myClass");
</script>

动态获取元素

1. createElement

使用document.createElement(tagName)方法可以动态创建一个元素。

<script>
    var newDiv = document.createElement("div");
    // 设置元素内容
    newDiv.innerHTML = "Hello World";
    // 将元素添加到DOM树中
    document.body.appendChild(newDiv);
</script>

2. createTextNode

使用document.createTextNode(text)方法可以动态创建一个文本节点。

<script>
    var newText = document.createTextNode("Hello World");
    // 将文本节点添加到元素中
    document.getElementById("myDiv").appendChild(newText);
</script>

动态获取元素的N种方法

1. 遍历DOM树

使用parentNode、previousSibling、nextSibling等节点属性可以遍历DOM树获取元素。

<div>
    <div id="myDiv"></div>
</div>
<script>
    var parentDiv = document.getElementById("myDiv").parentNode;
    var previousDiv = document.getElementById("myDiv").previousSibling;
    var nextDiv = document.getElementById("myDiv").nextSibling;
</script>

2. 事件委托

使用事件委托可以动态获取由用户操作动态生成的元素。

<div id="myDiv">
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</div>
<script>
    var myDiv = document.getElementById("myDiv");
    myDiv.addEventListener("click", function(e) {
        if (e.target.tagName === "BUTTON") {
            console.log("你点击了按钮：" + e.target.innerHTML);
        }
    });
</script>

总结

本文介绍了JS获取元素的N种方法及其动静态讨论。静态获取元素方法包括getElementById、getElementsByClassName、getElementsByTagName、querySelector、querySelectorAll，动态获取元素方法包括createElement、createTextNode，同时还介绍了动态获取元素的N种方法，包括遍历DOM树和事件委托。