DOM简介以及简单应用

最新推荐文章于 2022-03-08 18:13:03 发布

黑马金牌编程

最新推荐文章于 2022-03-08 18:13:03 发布

阅读量1k

点赞数

分类专栏：前端web开发文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/gyqailxj/article/details/121602106

版权

前端web开发专栏收录该内容

48 篇文章 6 订阅

订阅专栏

1.DOM简介

1.1什么是DOM

文档对象模型( Document Object Model ,简称DOM) , 是W3C组织推荐的处理可扩展标记语言( HTML或者XML
)的标准编程接口。
W3C已经定义了-系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。

1.2DOM树

在这里插入图片描述

文档:一个页面就是-个文档, DOM中使用document表示
元素:页面中的所有标签都是元素, DOM中使用element表示
节点:网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM中使用node示
DOM把以上内容都看做是对象

2.获取元素

2.2、01-getElementByld获取元素

<body>
    <div id="time">2019-9-9</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>

2.3根据标签名获取

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

<body>
    <ul>
        <li>知否知否，影视等你好久1</li>
        <li>知否知否，影视等你好久2</li>
        <li>知否知否，影视等你好久3</li>
        <li>知否知否，影视等你好久4</li>
        <li>知否知否，影视等你好久5</li>

    </ul>
    <script>
        //返回的是获取过来元素对象的集合以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        //遍历li里的元素
        for(var i=0; i<lis.length;i++)
        {
            console.log(lis[i]);
        }
    </script>
</body>

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

element.getElementsByTagName('标签名');

注意：父元素必须是单个对象（必须指明是哪一个元素对象）,获取的时候不包括父元素自己

2.4通过HTML5新增的方法获取

在这里插入图片描述

2.5获取特殊元素（body,html）

获取body元素
在这里插入图片描述

获取html元素
在这里插入图片描述

黑马金牌编程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM简介以及简单应用

1.DOM简介1.1什么是DOM文档对象模型( Document Object Model ,简称DOM) , 是W3C组织推荐的处理可扩展标记语言( HTML或者XML)的标准编程接口。W3C已经定义了-系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。1.2DOM树文档:一个页面就是-个文档, DOM中使用document表示元素:页面中的所有标签都是元素, DOM中使用element表示节点:网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM中使
复制链接

扫一扫