简介

Document Object Model,简称DOM,是W3C组织推荐的处理可扩展标记语言的标准接口,通过DOM接口可以改变网页的内容、结构和样式

DOM树

文档:一个页面就是一个文档,使用document表示

元素:标签就是元素,使用element表示

节点:内容就是节点,包括标签、属性、文本、注释,使用node表示

获取元素

获取方式:

  • 根据ID获取
  • 根据标签名获取
  • 通过h5新增的方式获取
  • 特殊元素获取

根据ID获取

使用getElementById()方法可以获取带ID的元素
<body>
    <div id="div1">abcd</div>
    <script>
        var a = document.getElementById("div1");
        console.log(a);
    </script>
</body>

<!--js输出-->
>> <div id="div1">abcd</div>

<!--用console.dir()可以打印返回元素对象,更清楚的看到属性和方法-->

根据标签名获取

使用getElementsByTagName()方法可以返回带指定标签的对象的集合
<body>
    <div id="div1">abcd</div>
    <div id="div1">abcd</div>
    <div id="div1">abcd</div>
    <div id="div1">abcd</div>
    <script>
        var a = document.getElementsByTagName('div');
        console.log(a);
        //以伪数组的形式存储
    </script>
</body>

H5新增的方式获取

getElementsByClassName('类名') 根据类名返回元素对象合集

<body>
    <div class="box">abcd</div>
    <div class="box">abcd</div>
    <div class="box">abcd</div>
    <div class="box">abcd</div>
    <script>
        var a = document.getElementsByClassName('box')
        console.log(a);
    </script>
</body>

querySelector('选择器') 返回指定选择器的第一个元素

<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <script>
        // var a = document.getElementsByClassName('box')
        // console.log(a);
        var a = document.querySelector('.box')   //选择器需要加符号,类就需要加.  id就需要加#
        // querySelectorAll可以打印全部
        console.log(a);
    </script>
</body>

获取特殊标签

例如body和html就属于特殊标签

获取body

<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <script>
        var a = document.body;
        console.log(a);
    </script>
</body>

获取html

<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <script>
        var a = document.documentElement;
        console.log(a);
    </script>
</body>

Last modification:January 25, 2022
如果觉得我的文章对你有用,请随意赞赏