master

分支 (1)

管理

管理

master

js_study
/
获取dom对象.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>
    <div id="text">文字</div>
    <p>这是一段文字</p>
    <input type="text" name="username">
    <div id="odiv">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <div id="ndiv">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
    <script>
        /**
         * 通过元素定位获取
         *  id: getElementById
         *  classname: getElementsByClassName
         *  name: getElementsByName -> 结果为数组, 因为name可重复使用
         *  tagname: getElementsByTagName
         *  tagname ns: getElementsByTagNameNS
        */
        var id_text = document.getElementById("text");
        console.log(id_text); // [object HTMLDivElement]

        var tag_text = document.getElementsByTagName("p")
        console.log(tag_text); // [object HTMLCollection]

        var name_text = document.getElementsByName("username")
        console.log(name_text); // NodeList [input]
        console.log(name_text.length); // 1

        /**
         * h5提供新的获取元素方式
        */
        var ps = document.querySelectorAll("#odiv p");
        console.log(ps.length); // 3

        var op = document.querySelector("#odiv p")
        op.innerHTML = "我很帅"
        console.log(op); // 只获取第一个元素
    </script>
</body>

</html>