Javascript DOM 对象

关注

原创最新推荐文章于 2026-09-07 11:50:18 发布 167 阅读 AI 写同款· GEO 优化 ›

一分钟教会你搭建steam新游幻兽帕鲁服务器总结: 游戏对服务器搭建要求相对较高、且对服务器网络协议有要求不能封堵UDP、多开、游戏运行久、同时在线人数多了这些会很吃内存我自己用的64G内存多开4区测试玩家同时在线50多人的情况下内存已经跑满了、对于想用服务器搭建联机的小伙伴建议根据开区数量以及玩家人数去选择配置、当然也可以直接找我阿杰购买、我可以提供技术搭建服务。注：如果用的是本地电脑局域网搭建直接输入127.0.0.1:8211就行如果用的是服务器搭建输入自己服务器IP+端口或解析的域名+端口进入游戏。阅读详情

什么是DOM对象：

HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。

HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。

通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。

js如果想要操作标签，需要通过DOM对象（凡是对标签的操作都是经过document），DOM是文档对象模型。

document 提供了一些方法可以获取标签

1. 通过 id 属性值来获取一个标签；

document . getElementById("id名") ；

<body>
    <div id="one">
        <span></span>
        <span></span>
        <span id="two"></span>
        <p class="p1"></p>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var o1 = document.getElementById("two");
        console.log(o1);  //<span id="two"></span>
    </script>
</body>

2. 通过标签名称来获取标签，获取的是数组形式的集合，不管是有多少个标签都是在集合中

document . getElementsTagName("标签名称")

<body>
    <div id="one">
        <span></span>
        <span></span>
        <span id="two"></span>
        <p class="p1"></p>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var o1 = document.getElementsByTagName("span");
        var o2 = document.getElementsByTagName("li");
        console.log(o1,o2);  // HTMLCollection(3) [span, span, span#two, two: span#two]      
                                HTMLCollection(4) [li, li, li, li]
    </script>

3. 通过 class 类名来获取标签，获取的是数组形式的集合，不管有多少个标签都在数组集合中

document . getElementsByClassName("class类名");

   <div id="one">
        <span></span>
        <span></span>
        <span id="two"></span>
        <p class="p1">我是p标签</p>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li class="p1">我是i标签</li>
        </ul>
    </div>
    <script>
        var o3 = document.getElementsByClassName("p1");
        for( var i = 0; i< o3.length; i++){   // 因为是数组集合  所有要进行循环遍历
            o3[i].style.color = "red"   // 设置字体颜色
        }
        
        console.log(o3)  // HTMLCollection [p.p1]
    </script>

★★★★4. 通过选择器获取标签，获取单个标签，若有多个则获取第一个符合条件的标签

document . querySelector("标签名")

    <div id="one">
        <span></span>
        <span></span>
        <span id="two"></span>
        <p class="p1">我是p标签</p>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li class="p1">我是i标签</li>
        </ul>
    </div>
    <script>
        var qs = document.querySelector("li")
        console.log(qs);  //<li></li>  若有多个，获取第一个符合条件的标签
    </script>

★★★★5. 通过选择器获取标签，获取的是多个标签，是一个数组的集合形式

document . querySelectorAll("标签名")

    <div id="one">
        <span></span>
        <span></span>
        <span id="two"></span>
        <p class="p1">我是p标签</p>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li class="p1">我是i标签</li>
        </ul>
    </div>
    <script>
        var qs1 = document.querySelectorAll("li")
        console.log(qs1);  //NodeList(4) [li, li, li, li.p1] // 可以通过索引值，获取该标签，遍历数组
        console.log(qs1[2]);  // <li></li> 获取索引值为2的li标签
    </script>

收录于