DOM介绍

王祎0825

于 2022-06-26 18:18:16 发布

阅读量578

点赞数

分类专栏：阶段三：JavaScript网页编程文章标签： javascript

本文链接：https://blog.csdn.net/qq_44757223/article/details/125054990

版权

阶段三：JavaScript网页编程专栏收录该内容

14 篇文章 1 订阅

订阅专栏

文章目录

一、DOM简介
- 1.什么是DOM
- 2.DOM树
二、获取元素

一、DOM简介

1.什么是DOM

文档对象模型（Document Object Model,简称DOM）,是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

2.DOM树

在这里插入图片描述

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看作是对象。

二、获取元素

1.如何获取页面元素

DOM在实际开发中主要用来操作元素。

如何获取页面中的元素呢？

获取页面中元素可以使用以下几种方式:

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

2.根据ID获取

使用getElementById（）方法可以获取带有ID的元素对象。

在这里插入图片描述
示例

<body>
    <div id="time">2022-5-30</div>
    <script>
        // 1.因为我们文档页面从上往下加载，所以先得有标签，所以script写到标签的下面
        // 2.get 获取 element 元素 by 通过 驼峰命名法
        // 3.参数 id是大小写敏感的字符串
        // 4.返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 5.console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

3.根据标签名获取

使用getElementsByTagName（）可以返回带有指定标签名的对象的集合。

document.getElementsByTagName('标签名');

在这里插入图片描述
注意：

因为得到的是一个对象的集合，所以我能想要操作里面的元素就需要遍历。
得到元素对象是动态的。

还可以获取某个元素（父元素）内部所有指定标签名的子元素。

element.getElementsByTagName('标签名');

注意：

父元素必须是单个对象（必须知名是哪一个元素对象）。获取的时候不包括父元素自己。

<ul>
        <li>高等数学1</li>
        <li>高等数学2</li>
        <li>高等数学3</li>
        <li>高等数学4</li>
        <li>高等数学5</li>
    </ul>
    <ol id="ol">
        <li>生僻字1</li>
        <li>生僻字2</li>
        <li>生僻字3</li>
        <li>生僻字4</li>
        <li>生僻字5</li>
    </ol>
    <script>
        // 1.返回的是 获取过来元素对象的集合，以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2.我们想要一次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3.如果页面中只有一个li，返回的还是伪数组的形式
        // 4.如果页面中没有这个元素返回的空的伪数组的形式
        // 5.element.getElementsByTagName('标签名');
        // var ol = document.getElementsByTagName('ol'); //ol
        // // console.log(ol.getElementsByTagName('li'));
        // console.log(ol[0].getElementsByTagName('li'));
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>

4.通过HTML5新增的方法获取

1.document.getElementsByClassName('类名');//根据类名返回元素对象集合

2.document.querySelector('选择器');//根据指定选择器返回第一个元素对象

3.document.querySelectorAll('选择器');//根据指定选择器返回

<div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1.getElementsByClassName根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2.querySelector返回指定选择器的第一个元素对象,切记：里面的选择器需要加符号，类选择器.box id选择器#nav 标签不加符号
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3.querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>

5.获取特殊元素（body，html）

（1）获取boby元素

document.body //返回body元素对象

（2）获取html元素

document.documentElement//返回html元素对象

<script>
        // 1.获取body元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        // 2.获取html元素
        // var htmlEle = document.html;
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>