跟着pink老师学前端之JavaScript-DOM

最新推荐文章于 2022-10-03 18:41:33 发布
最新推荐文章于 2022-10-03 18:41:33 发布
阅读量1k 收藏 18
点赞数 1
分类专栏： 前端基础学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46548238/article/details/118252330
版权

文章目录

1. WebAPIs

APl ( Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。

1.1 什么是DOM

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

1.2 DOM树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9aa2wLUv-1624700324888)(C:\Users\Pessimistic\Desktop\前端学习\学习笔记\DOM树.png)]

2. 获取元素

2.1 根据id获取

  1. 因为我们文档页面从上往下加载，所以先得有标签，所以我们script写在标签的下面。
  2. 参数id是大小写敏感的字符串。
  3. 返回的是一个元素对象。
<body>
    <div id="time">2021-6-23</div>
    <script>
        var timer = document.getElementById('time');
        console.log(timer);
        // 4. console.dir打印我们返回的元素对象，更好的查看里面的属性和方法。
        console.dir(timer);
    </script>
</body>

2.2 根据标签名获取

  1. 返回的是获取过来元素对象的集合，以伪数组的形式存储。
  2. 可以采取遍历的方式打印里面的元素。
  3. 如果页面中只有一个li，返回的还是伪数组的形式。
  4. 如果页面中没有li，返回的还是伪数组的形式，只不过是一个空的伪数组。
<body>
    <ul>
        <li>rikirikiriki1</li>
        <li>rikirikiriki2</li>
        <li>rikirikiriki3</li>
        <li>rikirikiriki4</li>
        <li>rikirikiriki5</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        for (var i = 0; i < lis.length; i++) {
    
            console.log(lis[i]);
        }
    </script>
</body>

  1. 还可以获取某个元素内部所有指定标签名的子元素，但是必须是指定的单个对象，获取的时候不包括父元素自己。

    <ol>
    <li>rikirikiriki1</li>
    <li>rikirikiriki2</li>
    <li>rikirikiriki3</li>
    <li>rikirikiriki4</li>
    <li>rikirikiriki5</li>
</ol>
<script>
    var ol = document.getElementsByTagName('ol');
    console.log(ol[0].getElementsByTagName('li'));
    // console.log(ol.getElementsByTagName('li'));是错误的写法，必须指定是哪一个ol。
</script>

3. 事件基础

3.1 事件三要素

事件由三部分组成：事件源、事件类型和事件处理程序。
(1)事件源：事件被触发的对象
(2)事件类型：如何触发，例如鼠标点击(onclick)
(3)事件处理程序：通过一个函数赋值的方式完成

<button id="btn">riki</button>
<script>
    // 点击按钮弹出对话框
    var btn = document.getElementById('btn');
    btn.onclick = function () {
    
        alert('daniel');
    }
</script>

3.2 执行事件的步骤

  1. 获取事件源

  2. 绑定事件，注册事件

  3. 添加事件处理程序

4. 操作元素

4.1 改变元素内容

innerText从起始位置到终止位置的内容，但他不识别html标签，同时空格和换行也会去掉。

element.innerText

innerHTML从起始位置到终止位置的全部内容，识别html标签，同时保留空格和换行。

element.innerHTML

这两个属性是可读写的，可以获取元素里面的内容。

4.2 修改元素属性

1. 点击不同按钮切换图片案例

<button id="zyy">周羽悦</button>
<button id="syt">沙一汀</button>
<img src="images/xzyy.jpg" alt="" title="zyy">
<script>
    // 1. 获取元素
    var zyy = document.getElementById('zyy');
    var syt = document.getElementById('syt');
    var img = document.querySelector('img');
    // 2. 注册事件
    zyy.onclick = function () {
        img.src = 'images/xzyy.jpg';
        img.title = 'zyy';
    }
    syt.onclick = function () {
        img.src = 'images/syt.jpg';
        img.title = 'syt';
    }

2. 分时问候案例

<img src="images/s.gif" alt="">
<div>上午好</div>
<script>
    var img = document.querySelector('img');
    var div = document.querySelector('div');
    // 2. 得到当前小时数
    var date = new Date();
    var h = date.getHours();
    // 3. 判断小时数改变图片和文字信息
    if (h < 12) {
    
        img.src = 'images/s.gif';
        div.innerHTML = '亲，上午好，好好写代码';
    } else if (h < 18) {
    
        img.src = 'images/x.gif';
        div.innerHTML = '亲，下午好，好好写代码';
    } else {
    
        img.src = 'images/w.gif';
        div.innerHTML = '亲，晚上好，好好写代码';
    }

</script>

3. 密码隐藏显示案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
    
            position: relative;
            width: 400px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .box input {
    
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }

        .box img {
    
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        var img = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        var flag = 0; //密码框的时候是0
        eye.onclick = function () {
    
            if (flag == 0) {
    
                pwd.type = 'text';
                img.src = 'images/open.png';
                flag = 1;
            } else {
    
                pwd.type = 'password';
                img.src = 'images/close.png';
                flag = 0;
            }
        }
    </script>
</body>

</html>

4. 样式属性操作

(1) 行内样式操作
element.style.backgroundColor(驼峰命名法)

使用element.style 获得修改元素样式事和样式比较少或者功能简单的时候使用。js修改style样式产生的是行内样式，权重比内嵌样式高。

关闭二维码案例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
    
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            display: block;
        }

        .box img {
    
            width: 60px;
            margin-top: 5px;
        }

        .close-btn {
    
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        淘宝二维码
        <img src="images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        btn.onclick = function () {
    
            box.style.display = 'none';
        }
    </script>
</body>

</html>
循环精灵图背景案例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
    
            margin: 0;
            padding: 0;
        }

        li {
    
            list-style: none;
        }

        .box {
    
            width: 250px;
            margin: 100px auto;
        }

        .box li {
    
            float: left;
            width: 24px;
            height
最低0.47元/天 解锁文章
外面有点冷的时候
关注
  • 1
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
pink老师js自学笔记03-DOM
weixin_50679884的博客
10-27 347
一、getElementByID() 根据id获取 参数必须是字符串 返回的是一个元素对象 var timer = document.getElementById('time') console.log(timer); console.log(typeof timer); //object // console.dir() 打印我们返回的元素对象，更好的查看里面的属性和方法 console.dir(timer); 二、getElementsByTagName()
黑马前端pink 教学DOM 笔记
weixin_63658047的博客
01-04 709
DOM知识大全（一篇学完DOM）
DOM重点核心——pink老师笔记
Liny77的博客
01-10 1158
DOM 文档对象模型 （Document Object Model) 是W3C组织推荐的处理可扩展标记语言 （HTML或者XML）的标准编程接口。 通过这些DOM接口，可以改变网页的内容，结构和样式。 1、对于JS，为了能够使JS操作HTML，JS就有了一套自己的DOM编程接口。 2、对于HTML，dom使得html形成一棵dom树，包括文档，元素，节点。 文档：一个页面就是一个文档，DOM中使用Document表示 元素：页面中的所有标签都是元素，DOM中使用element表示 节点：网页中的所有内容都
js 学习进阶（Dom部分 pink老师教学笔记）
shenruiaaa的博客
03-02 2307
DOM DOM是处理HTML或者XML的标准接口 在前面的js中，<script></script>标签是现在head里的，但是这里的DOM，得先有标签，所以<script></script>写在<body>里 获取元素 通过ID获取 document.getElementById() document.getElementById(‘time’) 返回的是一个元素对象 通过标签名获取 document.getElementsByTagNam.
+pink老师的JS教程笔记+
Aa11040818的博客
03-14 6475
初识JS 目标 能够说出JS是什么 能够知道JS的发展历史 能够说出浏览器执行JS的原理 能够说出JS由哪三部分组成 能够写出JS三个输入输出的语句 运行在客户端的脚本语言（不需要编译，由js引擎逐行解释并执行，基于node.js进行服务器编程。 布兰登艾奇 在1995年用十天完成js设计，网景公司。 ECMAScript /dom /bom 输入输出语句 方法 说明 归...
pink老师Javascript基础PPT.zip
02-06
JavaScript，作为全球最广泛使用的开发语言之一，是前端开发的核心技术。它基于ECMAScript规范，主要用于网页和网络应用的动态化与交互性。pink老师的Javascript基础PPT课程旨在为学员构建坚实的JavaScript基础，...
jQuery基础自学笔记（pink老师jQuery全内容）
04-12
jQuery 是一款非常流行的 JavaScript 库，由 John Resig 在2006年创建，它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。jQuery 的设计理念是“Write Less, Do More”，即用更少的代码...
前端JavaScript隔行换色
最新发布
10-23
前端小白入门案例使用Hbuilder国产开发工具引用jQuery库实现表格隔行换色基本功能。简化DOM操作 代码的功能如下： 1.通过选择器获取表格的表头对象（thead tr），并设置其背景颜色为navajowhite。 2.通过选择器获取...
初阶Javascript的知识点学习总结
09-20
JavaScript主要用于前端开发，主要负责网页的动态交互，如事件处理、网页特效以及与用户的实时交互。 JavaScript的引入方式主要有三种：行内代码、内部代码和外部代码。行内代码通常用于HTML元素的属性，如`onclick...
pink-planner
03-18
7. **前端框架/库**：考虑到"pink-planner"是JavaScript项目，它可能使用了React、Vue或Angular等前端框架，这些框架提供了组件化开发和状态管理工具，简化UI的构建。 8. **状态管理**：对于有复杂交互的应用，如...
前端入门视频笔记 JavaScript（七/八/九）DOM P194-215、234、10121895
wsyyyyyyy的博客
10-06 376
JS分为 ECMAScript、DOM文档对象模型、BOM浏览器对象模型三部分 API（Application Program Interface，应用程序接口） 是一些预定义的函数，让开发人员无需访问源码，无需了解内部工作机制的细节，就可以完成一些功能的工具。 Web API 就是指DOM和BOM，是浏览器提供的一套实现浏览器功能和页面元素的API； 它是 JS 的 应用，用JS基础语法实现网页交互效果。 DOM（文档对象模型） DOM（Document Object Mod...
跟着pink老师学前端之jQuery
weixin_46548238的博客
07-11 804
1. jQurey概述 jQuery是一个快速简洁的JavaScript库，它封装了JavaScript常用的功能代码。学习jQuery本质就是学习调用这些方法。 2. jQuery的基本使用 1. jQuery入口函数 jquery的入口函数，相当于原生js中的DOMContentLoaded。等着页面DOM加载完毕再去执行js代码。 第一种： $(document).ready(function(){ $('div').hide(); }) 第二种： $(function () { $
ECMAScript入门
sunshine-zwq的博客
09-29 295
文章目录基本介绍ES5严格模式JSON对象Object扩展Array扩展Function扩展ES6（常用）let关键字const关键字解构赋值模板字符串简化的对象写法箭头函数三点运算符形参默认值Promise对象SymbolIterator遍历器Generator函数async函数class面向对象ModuleES6（其他）字符串扩展数值扩展数组扩展Object扩展深度克隆Set和Mapfor of循环ES7 基本介绍 1. 它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范 2.
b站pink老师JavaScript的jQuery 案例代码——新浪下拉菜单
weixin_72322475的博客
10-03 1702
b站pink老师JavaScript的jQuery 案例代码——新浪下拉菜单+两个在原代码基础上的简洁优化版本
四、pink老师的学习笔记——元素的显示与隐藏
zep
05-06 474
1. 元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！ 1.1 display 显示（重点） display 设置或检索对象是否及如何显示。 display: none 隐藏对象 display：block 除了转换为块级元素之外，同时还有显示元素的意思。 特点： 隐藏之后，不再保留位...
html+css+JavaScript实现导航栏
cutlery1137的博客
11-28 1908
无下拉菜单的导航栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
黑马pink老师的HTML基础总结
weixin_42575796的博客
08-22 3196
文章目录HTML基础总结1.格式标签2.图像3.链接4.特殊字符5.表格6.列表6.1.无序列表6.2.有序列表6.3.自定义列表7.表单 HTML基础总结 学习于黑马程序员pink老师的教程 Web标准的构成主要包括结构( Structure)、表现 ( Presentation )和行为( Behavior )三个方面。 构成 作用 结构 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML. 表现 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS 行为
最全pink老师JavaScript笔记-JQuery 入门 基础部分（同步PPT）
qq_45432867的博客
08-17 1953
JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。常见的JavaScript 库这些库都是对原生 JavaScript 的封装，内部都
js特效-下拉菜单
qq_41670147的博客
11-25 389
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
javascript pink老师2023
08-24
引用中提到，JavaScript 程序需要被嵌入到 HTML 中才能运行，通常通过 script 标签将 JavaScript 代码引入到HTML文件中。可以使用内部方式，将 JavaScript 代码直接包裹在 script 标签中，也可以使用外部方式，将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入。 关于“javascript pink老师2023”，根据提供的引用内容，无法得知具体指的是什么。如果你有关于这个问题的更多信息或者具体的上下文，请提供更多细节，我将尽力为你解答。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [黑马pink老师 2023JavaScript 第一天笔记](https://blog.csdn.net/Wu_Yingsi/article/details/130295951)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [黑马pink老师 2023JavaScript 第三天笔记](https://blog.csdn.net/Wu_Yingsi/article/details/130479490)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值