Web API——DOM（1）

最新推荐文章于 2023-11-13 10:11:05 发布

Lotus_fragrance

最新推荐文章于 2023-11-13 10:11:05 发布

阅读量114

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Lotus_fragrance/article/details/124948594

版权

#博学谷IT学习技术支持#

1、DOM 简介

文档对象模型（Document Object Model，简称 DOM ），是 W3C 组织推荐的处理可扩展标记语言

（HTML 或者XML）的标准编程接口。

1.1DOM树

1.文档：一个页面就是一个文档，DOM 中使用 document 表示

2.元素：页面中的所有标签都是元素，DOM 中使用 element 表示

3.节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

4.DOM 把以上内容都看做是对象

2、获取元素

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

2.1根据 ID 获取

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

代码演示;

<body>
    <div id="name">小明</div>
    <script>
        // 使用 getElementById() 方法可以获取带有 ID 的元素对象。
        var na = document.getElementById('name');
        console.log(na);  //获取的是一个元素对象
        console.dir(na);  //获取这个元素对象
    </script>
</body>

2.2根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

代码演示：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        // 使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
        var lis = document.getElementsByTagName('li');
        console.log(lis);   //这里打印的是所有li对象的集和，在伪数组中存储。
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);     //遍历伪数组，把每个元素对象打印出来。
        }
    </script>
</body>

还可以获取某个元素(父元素)内部所有指定标签名的子元素.

父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。

代码演示：

    <div id="ps">
        <p>第一个段落</p>
        <p>第二个段落</p>
        <p>第三个段落</p>
    </div>
    <script>
        //获取父级元素
        var ps = document.getElementById('ps');
        //获取子级元素对象集和
        var p = ps.getElementsByTagName('p');
        //遍历子元素对象
        for (var i = 0; i < p.length; i++) {
            console.log(p[i]);
        }
    </script>

2.3通过 HTML5 新增的方法获取

1.根据类名返回元素对象集合

document.getElementsByClassName(‘ 类名’)

2. 根据指定选择器返回第一个元素对象

document.querySelector(' 选择器 ');

3.根据指定选择器返回

document.querySelectorAll(' 选择器 ');

4.querySelector 和 querySelectorAll里面的选择器需要加符号,如:document.querySelector('#nav');

代码演示;

<body>
    <div class="box">
        <p>第一个段落</p>
        <p>第二个段落</p>
        <p>第三个段落</p>
    </div>
    <script>
        // 1.根据类名返回元素对象集合
        var box = document.getElementsByClassName('box');
        console.log(box);
        // 2.根据指定选择器返回第一个元素对象
        var p = document.querySelector('p');
        console.log(p);
        // 3.根据指定选择器返回,返回的是一个对象集和，用伪数组存储
        var ps = document.querySelectorAll('p');
        console.log(ps);
    </script>
</body>

最低0.47元/天解锁文章

Lotus_fragrance

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web API——DOM（1）

1、DOM 简介文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。 1.1DOM树1.文档：一个页面就是一个文档，DOM 中使用 document 表示2.元素：页面中的所有标签都是元素，DOM 中使用 element 表示3.节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示 4.DOM 把以上内容都看做是对象2、获取元
复制链接

扫一扫