39jsbom,document浏览器文档对象

3. document: 浏览器文档对象
    1) 根据标签id获取标签对象: let tag = document.getElementById("idName");
    2) 根据标签名获取标签数组: let tags = document.getElementsByTagName("标签名");
    3) 根据标签的class获取标签数组: let tags = document.getElementsByClassName("class名");
    4) 根据标签使用的name属性值获取标签数组: let tags = document.getElementsByName("name属性值");


<body>
    <div id="webName">百度</div>
    <hr>
    <div>
        <input type="text" name="season" value="春">
        <input type="text" name="season" value="夏">
        <input type="text" name="season" value="秋">
        <input type="text" name="season" value="冬">
    </div>
    <hr>
    <div>
        <input type="text" class="month" value="January">
        <input type="text" class="month" value="February">
        <input type="text" class="month" value="March">
        <input type="text" class="month" value="April">
        <input type="text" class="month" value="May">
    </div>
    <hr>
    <div>
        <div class="month">June</div>
        <div class="month">July</div>
        <div class="month">August</div>
        <div class="month">September</div>
    </div>
    <hr>
    <div>
        <input type="button" value="修改webName" onclick="modifyWebName()">
        <input type="button" value="显示input标签的内容" onclick="showInput()">
        <input type="button" value="显示class:month的内容" onclick="showMonth()">
        <input type="button" value="显示name:season的内容" onclick="showSeason()">
    </div>
    <hr>
    <div id="show"></div>
</body>
<script>
    function showSeason() {

        //获取season数组
        let tags_season = document.getElementsByName("season");

        let arr = [];

        for (let i = 0; i < tags_season.length; i++) {
            arr.push(tags_season[i].value);
        }

        document.getElementById("show").innerHTML = arr.join("<br>");
    }

    function showMonth() {

        //获取month数组
        let tags_month = document.getElementsByClassName("month");

        let arr = [];

        for (let i = 0; i < tags_month.length; i++) {
            arr.push(tags_month[i].value || tags_month[i].innerHTML);
        }

        document.getElementById("show").innerHTML = arr.join("<br>");
    }
    
    function showInput() {

        //获取input标签数组
        let tags_input = document.getElementsByTagName("input");

        let arr = [];

        for (let i = 0; i < tags_input.length; i++) {
            arr.push(tags_input[i].value);
        }

        document.getElementById("show").innerHTML = arr.join("<br>");
    }
    
    function modifyWebName() {

        //获取webName标签
        let tag_webName = document.getElementById("webName");

        //获取标签的内容
        let content = tag_webName.innerHTML;

        switch (content) {
            case "百度":
                tag_webName.innerHTML = "淘宝";
                tag_webName.style.color = "red";
                break;
            case "淘宝":
                tag_webName.innerHTML = "京东";
                tag_webName.style.color = "blue";
                break;
            case "京东":
                tag_webName.innerHTML = "腾讯";
                tag_webName.style.color = "green";
                break;
            case "腾讯":
                tag_webName.innerHTML = "百度";
                tag_webName.style.color = "";
                break;
        }

    }
</script>

posted on 2022-04-11 17:08 小小程序猿level1 阅读(32) 评论(0) 收藏举报