wuheng
/
vip21-javaweb


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="box">
    <span class="text">text1</span>
    <span class="text">text2</span>
    <span class="text">text3</span>
    <span class="text">text4</span>
    <span class="text">text5</span>
    <span class="text">text6</span>
</div>

<script>

    /**
     * JS 可以通过 标签名字查找ELE元素 返回一个数组
     */
    // var elementsByName = document.getElementsByTagName("span");
    // console.log( elementsByName )
    // console.log( elementsByName[ elementsByName.length -1 ]  )
    /**
     * JS 可以通过 CLASS名字查找ELE元素 返回一个数组
     */
    // var elementsByName = document.getElementsByClassName("text")
    // console.log( elementsByName )
    // console.log( elementsByName[ elementsByName.length -1 ]  )
    /**
     * JS 可以通过 ID 查找ELE元素 返回元素或者空
     */
    // var elementById = document.getElementById("box");
    // console.log( elementById )
    /**
     * JS 可以通过 querySelector 返回元素或者列表
     */
    // console.log(
    //     document.querySelectorAll("span"),
    //     document.querySelector("span"),
    //     document.querySelector("#box"),
    //     document.querySelector(".text"),
    // )

    var nodeList = document.querySelectorAll("span")
    for (let i = 0; i < nodeList.length; i++) {
        var htmlDivElement = document.createElement("div")
        htmlDivElement.innerText = "查找到 span 元素 第" + ( i + 1 ) + "个"
        document.querySelector("#box").appendChild(htmlDivElement)
    }


</script>


</body>
</html>