【JavaScript - Web API】DOM（获取元素 / 事件基础 / 操作元素 / 节点操作）

咕啾啾

已于 2022-05-19 15:49:36 修改

阅读量444

点赞数 1

分类专栏：前端文章标签：前端 javascript html

于 2022-05-18 16:04:05 首次发布

本文链接：https://blog.csdn.net/qq_30148319/article/details/124760929

版权

学习视频及笔记参考来源：

JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili

一、DOM 简介

1、什么是 DOM ？

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

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

2、DOM 树

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

二、获取元素

获取元素的几种方式：（1）根据 ID 获取。（2）根据标签名获取。（3）通过 HTML5 新增的方法获取。（4）特殊元素获取。

1、根据 ID 获取 — getElementById()

使用 getElementById() 方法可以获取带有 ID 的元素对象。
括号里面必须是字符串的形式！
使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

document.getElementById('id');

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 1. 通过元素的 id 来获取元素，返回的是一个对象
        var id = document.getElementById('time');
        console.log(id);  // <div id="time">2019-9-9</div>
        console.log(typeof id);  // object
        console.dir(time); // div#time
    </script>
</body>

2、根据标签名获取 — getElementsByTagName()

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
因为得到的是一个对象的集合，返回的是伪数组，所以我们想要操作里面的元素就需要遍历。
得到元素对象是动态的。

 document.getElementsByTagName('标签名');

<body>
    <li>11</li>
    <li>11</li>
    <li>11</li>
    <li>11</li>
    <li>11</li>
    <li>11</li>
    <script>
        // 2. 通过元素标签获取元素，返回的是伪数组
        var li = document.getElementsByTagName('li'); 
        console.log(li);  // HTMLCollection(6) [li, li, li, li, li, li]
    </script>
</body>

3、通过 HTML5 新增的方法获取

3.1 根据类名获取 — getElementsByClassName()

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

<body>
    <div class="times">2020-9-9</div>
    <script>
        var times = document.getElementsByClassName('times');
        console.log(times);  // 返回的是对象的集合，伪数组：HTMLCollection [div.times]
    </script>
</body>

3.2 根据指定选择器获取 — querySelector()

querySelector() 和 querySelectorAll() 里面的选择器需要加符号。
如果是 id ：document.querySelector('#time')；
如果是 class：document.querySelector('.time')；
如果是标签名：document.querySelector('.time')；

4、获取特殊元素（body / html）

4.1 获取 body 元素

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

4.2 获取 html 元素

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

三、事件基础

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件三要素：

1、事件源（要点击谁，触发谁）。

2、事件类型（什么样的事件，怎么触发）。

3、事件处理程序（具体实现啥，要做啥）。

执行事件的步骤：

1、获取事件源。

2、注册事件（绑定事件）。

3、添加事件的处理程序（采取函数赋值的形式）。
// 1. 获取事件源
v

最低0.47元/天解锁文章

咕啾啾

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript - Web API】DOM（获取元素 / 事件基础 / 操作元素 / 节点操作）

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

扫一扫

专栏目录