DOM的简单入门

最新推荐文章于 2023-12-28 14:40:45 发布
最新推荐文章于 2023-12-28 14:40:45 发布
阅读量2.5k 收藏 1
点赞数 1
分类专栏： Java 文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60528766/article/details/122833515
版权

这一篇是关于DOM的简单入门,后续会发BOM和DOM的详细笔记

*通过document.getElementById获取id从而获取元素对象

<!DOCTYPE html>
<html lang>
<head>
    <meta charset="UTF-8">
</head>
<body>
<img id="light" src="img/off.gif">
<script>
    //通过document.getElementById获取id从而获取元素对象
    var light=  document.getElementById("light");
    alert("我要开灯啦!");//alert有阻塞效果
    light.src="img/on.gif";//转换照片
</script>
</body>
</html>

*通过DOM事件将照片进行替换 

事件的简单学习:
            * 方法一:(但是有增强了耦合性)
                   <img id="light" src="img/off.gif" οnclick="on();" >
            * 方法二:(通过id来绑定属性)
                    <img id="light1" src="img/off.gif" >


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>

      <img id="light" src="img/off.gif" onclick="on();" >
      <img id="light1" src="img/off.gif" >
<script>

    function on(){
        alert('我被点了');
    }
    function on1(){
        alert('我又被点了');
    }
    var light11=document.getElementById("light1");
    light11.onclick=on1;
</script>
</body>
</html>

*做一个点击开关灯泡的小案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>灯泡开关</title>
</head>

<body>
     <img id="light" src="img/off.gif">

<script>


    var light=document.getElementById("light");
    var flag=false;
    light.onclick= function click(){
       if(flag){
           light.src="img/off.gif";
           flag=false;
       }else {
           light.src="img/on.gif";
           flag=true;
       }


    }

</script>
</body>
</html>

 

1凌霄1
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax PHP简单入门教程代码
10-30
Ajax 由 HTML、Javascrīpt... 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。对于Ajax，最核心的一个对象是XMLHttpRequest，所有的Ajax操作都离不开对这个对象的操作。
DOM入门
D____ppx的博客
03-24 829
div就是元素节点（任意的标签都是元素节点） id就是属性节点 （任意的属性都是属性节点） 你好就是文本节点 （任意的文本都是文本节点） 1.DOM 全称document object model 文档对象模型 操作html html文档由html+css组成 DOM利用js操作html+css的 操作元素节点 element Element 元素节点对象 查 获取元素节点的方式 一. 通过选择器获取 1. id选...
javascript新手入门DOM
smilecb的博客
10-14 1539
DOM: 全称Document Object Model 文档对象类型 js通过DOM可以对HTML文档进行操作，只要了解DOM就可以随心所欲的操作web页面 文档：整个HTML网页文档 对象：将网页中的的每一个部分转换为对象 模型：用来表示对象之间的关系，这样可以方便获取对象 节点：构成网页最基本的组成部分，网页中每一个部分都可以看成一个节点 事件：浏览器和用户之间的交互行为 比如：点击按钮，鼠标移动 对象的获取 方式1：通过ID获取 获取时会返回第一个id //document.getElement
DOM入门-基本概念
weixin_30675967的博客
05-04 120
DOM ：DOM是Document Object Model文档对象模型的缩写。根据W3CDOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件 D：文档 – html 文档 或 xml 文档 O：对象 – document 对象的属性和方法 M：模型 DOM 是针对xml(html)的基于树的API。 DOM树:节点（node）的层次。 ...
DOM入门基础
ange997的博客
08-01 2875
天道酬勤，地道酬精，人道酬善，商道酬诚，业道酬精。 DOM身为 JavaScript 三大内容之一，虽然在真正的开发中用的不多，但是也是JS学习中不可或缺的一部分，DOM的学习相对来说比较简单，分享一下我之前的部分DOM笔记。能力有限，水平一般，不足之处，多多包涵。 DOM简介 DOM，全称Document Object Model，文档对象模型。 DOM是一组用来描述 js 代码怎样与 html 文档进行交互和访问的 web 标准，它定义了一系列对象、方法和属性，用于访问、操作和创建文档中的内容、结构、样
DOM 初学者指南
最新发布
2201_75715995的博客
12-28 989
DOM（Document Object Model——文档对象模型），可以简单理解为浏览器创建的节点树，每个节点有自己的属性和方法，可以通过 JavaScript 来操作这些属性、调用这些方法。操作 DOM 的能力是 JavaScript 最独特和有用的特性之一。下图是 DOM 树的视觉表示。document 对象是 DOM 的核心/基础，执行任何形式的 DOM 操作都要访问 document 对象。根元素html是 document 对象的子节点。下一行是body和head。
(JavaScript)Dom入门35个简单实例
08-28
这个压缩包里面有35个关于Dom的简单实例，对于刚入门的人来说是个很不错的选择，可以让你很快的入门，掌握基本的知识。
domql:DOM 渲染 Javascript 库
08-04
无需转译，简单的 ES6 代码 一次性导入和子树 您可以从作为样板开始，或者跳入实时编辑器。 主要特征： 错误报告 虚拟 DOM 树 创建 使用原型类创建 支持多级原型 状态 捆绑 与其他组件 与状态 更新 设置...
AJAX入门---DOM节点的属性和方法
08-04
简单的介绍一下，DOM常用API的属性和方法
Ajax+PHP简单基础入门实例教程
10-30
Ajax 由 HTML、JavaScript&... 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。对于Ajax，最核心的一个对象是XMLHttpRequest，所有的ajax操作都离不开对这个对象的操作。
Dom入门
02-21 692
Dom入门 DOM= Document Object Model，文档对象模型 DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言. •    D：文档 – html 文档 或 xml 文档 •    O：对象 – do
DOM的初步认识
weixin_33843409的博客
08-28 204
DOM DOM是什么 概述 DOM是个缩写，全称是Document Object Model。D表示Document，就是DOM将HTML页面解析为一个文档，同时提供了document对象。O表示Object，就是DOM将HTML页面中每一个元素解析为一个对象。M表示Model，就是DOM中表示各个对象之间的关系。 DOM的作用 用于解析...
dom初学者笔记
qq_43487181的博客
03-23 305
dom操作 js有7种节点： document：文档节点 documentType：文档声明节点，html声明部分 element：元素节点（body、div、p、a等等） text: 文本节点(空格、文字等) 属性: <a href=""></a>其中href为属性节点 注释节点: <!--描述--> 文档片段 节点和元素的区别：节点包含元素，比元素的范...
DOM 基础详解
m0_52861684的博客
09-26 2677
DOM 基础事件从零开始详细总结。
【前端JavaScript WebAPI】01 - 获取DOM元素 + 事件操作属性和样式
m0_50140502的博客
11-30 390
JS 的组成 JS的组成 Web API介绍 1.1 API的概念 API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。 API应用程序编程接口 1.2 Web API的概念 Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。 现阶段我们主要针对于浏览器讲解常
DOM入门（一）
qq_54054566的博客
03-28 3827
DOM树是什么  将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 作用：文档树直观的体现了标签与标签之间的关系  document 对象  是 DOM 里提供的一个对象  所以它提供的属性和方法都是用来访问和操作网页内容的  例：document.write()  网页所有内容都在document里面 二、获取DOM对象 1.1 选择匹配的第一个元素 1.2 选择匹配的多个元素 ...
HTML DOM入门基础篇
TingtingYang
07-03 275
HTML DOM入门基础篇一. HTML DOM简介二. 常用概念1. 节点概念2. HTML DOM 方法 一. HTML DOM简介 DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。 HTML DOM 定义了访问和操作 HTML 文档的标准方法。 DOM 以树结构表达 HTML 文档。 HTML DOM 是关于如何获取、修改...
DOM入门书籍-JavaScript DOM编程艺术
寒雪谷
08-19 633
刚刚读完了《JavaScript DOM编程艺术》一书，该书由人民邮电出版社出版，原作者Jeremy Keith（英），由杨涛、王建桥、杨晓云等人翻译，该书讲述了JavaScript DOM编程的入门知识，内容不是很多，短短300页，涵盖了常用的DOM方法和基本的DOM编程技巧和编程原则，始终秉承着预留退路（书中翻译的术语，感 觉很朴实，却又有点不够专业，反正意思倒是一目了然）的设计原则，反复重...
javascriptdom学习
07-20
你可以尝试创建一些简单的交互式网页，使用 JavaScript 和 DOM API 实现一些功能，如表单验证、动态内容更新等。 记住，在学习过程中不断练习和实践是非常重要的。还有许多在线资源和教程可供参考，你可以根据自己...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值