DOM入门笔记

最新推荐文章于 2023-12-28 14:40:45 发布

邻家的疯丫头

最新推荐文章于 2023-12-28 14:40:45 发布

阅读量372

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_45495031/article/details/105341141

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

DOM入门笔记

前言：简单归纳一下DOM的一些入门的基础操作，希望能帮到你，今天的内容总结为“两区分，一事件”，下面来具体介绍一下。
1.区分API、WEB API和DOM

API
应用程序编程接口，程序员自己提供的一种工具，以便能轻松地实现自己想要完成的功能
WEB API
浏览器提供的一套操作浏览器功能（BOM）和页面元素的API（DOM），主要用于做浏览器的交互效果
DOM
文档对象模型，处理可扩展语言的标准编程接口，通过DOM接口可以改变网页的内容、结构和样式
2、区分文档、元素和节点
文档（document）
一个页面就是一个文档
元素(element)
页面中所有的标签都是元素，可以通过操作元素改变元素内容：
innerText:可以识别html标签，去除空格和换行，不标准。格式：element.innerText
innerHTML:可以识别html标签，保留空格和换行，标准w3c。格式：element.innerHTML
两标签均可读可写
节点(node)
网页中的所有内容都是节点（包括标签、属性、文本、注释等）
3、事件（谁干什么怎么样）
3.1事件三要素：事件源、事件类型、事件处理程序
事件源：触发事件的根源，简述为谁
事件类型：触发的动作，简述为干什么
事件处理程序：发生的结果，简述为怎么样
3.2事件的执行步骤
获取事件源（找出根源）
获取事件源常用的方法：
getElementsTagname:返回所有给定标签名的元素
getElementClassName:返回给定类名的所有值
getElementById:通过id获得所需事件源
querySelector:返回指定选择器或者选择器匹配的第一个元素
querySelectorAll:返回指定选择器或者匹配选择器的所有元素
具体用法可以参考https://developer.mozilla.org/zh-CN/docs/Web/API
注册事件（绑定动作）
格式：事件源.动作

d.onclick

添加事件处理程序（事件发生后的结果）
在功能函数function中添加事件处理程序

注意：在日常写代码时，一般把注册事件和添加事件处理程序合并成一步写
格式：事件源.动作=function(){
}
代码简写如下：

btn.onclick = function () {
}

下面举个简单的例子，相信大家很快就明白了。
题目要求：要求点击123，控制台弹出“我被选中了！”
具体代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>123</div>
    <script>
        // 1、获取事件源
        var d = document.querySelector('div');
        // 2、注册事件源（绑定事件源）
        // d.oncilck
        // 3、添加事件处理程序
        d.onclick = function () {
            console.log('我被选中了！');
        }
    </script>
</body>
</html>

今天的内容介绍完了，你学会了吗？

邻家的疯丫头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM入门笔记

DOM入门笔记前言：简单归纳一下DOM的一些基础操作，希望能帮到你，把今天的内容总结为“两区分，一事件”，下面来具体介绍一下。1.区分API、WEB API和DOMAPI应用程序编程接口，程序员自己提供的一种工具，以便能轻松地实现自己想要完成的功能WEB API浏览器提供的一套操作浏览器功能（BOM）和页面元素的API（DOM），主要用于做浏览器的交互效果DOM文档对象...
复制链接

扫一扫