DOM知识点总会-------梅花

最新推荐文章于 2021-10-26 19:29:02 发布
置顶 最新推荐文章于 2021-10-26 19:29:02 发布
阅读量146 收藏
点赞数
分类专栏： JavaScript 文章标签： dom javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49301210/article/details/108453616
版权
本文详细介绍了DOM的基本概念，包括文档节点、元素节点、属性节点和文本节点。还讨论了事件处理，如事件绑定、事件委派和事件对象，以及读取样式和元素属性的方法。此外，文章涵盖了拖拽功能和键盘事件的实现。
摘要由CSDN通过智能技术生成

文章目录

一、DOM介绍

DOM是文档对象模型，是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格

D ducument 文档，整个html页面就是一个文档
O object
M model 使用模型来表示节点之间的关系 这样方便获取对象

在这里插入图片描述
我们的DOM文档大致就是这样通过界面来显示的

二、节点

1、定义：节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。
在这里插入图片描述
虽然都是节点，但是实际上他们的具体类型是不同的。
1、文档节点（document） ：整个HTML
获取文档节点： document.getElementById()

2、元素节点（Element）：HTML文档中的HTML标签
document对象作为window对象的属性存在的，我们不用获取可以直接使用。

3、属性节点（Attr）：元素的属性
获取属性节点：元素节点.getAttributeNode(“属性名”);

4、文本节点（Text）：HTML标签中的文本内容
获取文本节点：元素节点.firstChild;

三、事件

就是用户和浏览器之间的行为交互，比如：点击按钮 鼠标移动 关闭窗口…，我们可以在事件对应的属性中设置一些JS代码，事件一旦触发，代码将会执行
这种写法称为结构和行为耦合，不方便维护，不推荐使用

<body>
   <button id="btn">我是一个按钮</button>
</body>
<script>
   //获取按钮对象
   var btn = document.getElementById('btn');
   
   //绑定一个单击事件
   //像这种单击事件绑定函数，称为单击响应函数
   btn.onclick = function(){
   
      alert('你还点~~~~');
   }
   btn.innerHTML = 'button';
</script>

四、文档的加载

   <script>
      /*
       * 浏览器在加载一个页面时，是按照自向而下顺序加载的
       * 读取到一行就会运行一行，如果将script标签写到页面的上边，在代码执行的时候，页
最低0.47元/天 解锁文章
AAAAA人人爱
关注
专栏目录
android自定义AlertDialog
希望我快乐
10-17 1160
开始接触java与android，实现了第一个功能：自定义AlertDialog。先上代码： public void jsmethod_showAlert(final UZModuleContext moduleContext){ final AlertDialog biuAlert = new AlertDialog.Builder(context()).create(); final ...
完美的alert美化
windy1001的专栏
09-13 2万+
默认的alert总是在好看的样式下显得格格不入，所以在网上搜寻良久，终于找到了一个完美的美化方案。体验请点我 一、引入js和css文件 二、js调用替代alert 一、引入js和css文件 1、直接在head引入 &lt;link rel="stylesheet" type="text/css" href="https://www.huangwx.cn/css/sweetaler...
弹出框美化 alert样式美化
热门推荐
袁小溅的博客
01-18 3万+
弹出框美化 alert样式美化
DOM知识点总结
m0_47224321的博客
10-26 1719
一、DOM初识 1、DOM—文档对象模型 操作页面元素的 2、DOM又被称为文档树模型 （1）文档：把一个html页面文件可以看成一个文档，由于万物皆对象，所以可以把这个文档看成一个对象。 （2）文档中的所有的标签都可以看成是一个对象 （3）页面中的每个标签都是一个元素（element）,每个元素都可以看成是一个对象。 （4）标签中可以嵌套标签，标签中有标签，元素中有元素 （5）一个html页面都有一个根标签—》html---->根元素，里面有很多个标签（元素）—》很多个对象 ========
JavaEE源代码 dom4j-1.6.1
07-09
JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源...
dom-to-image.js
07-27
一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完整），后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错
dom4j-2.1.3.jar
04-29
dom4j是一个十分优秀的JavaXML API，具有性能优异、功能强大和极其易使用的特点，它的性能超过sun公司官方的dom技术，同时它也是一个开放源代码的软件。 dom4j-2.1.3 XML Document Object Model based on Java ...
html练习之DOM知识---银行系统
06-15
html练习之DOM知识---银行系统 html练习之DOM知识---银行系统 html练习之DOM知识---银行系统 html练习之DOM知识---银行系统 html练习之DOM知识---银行系统 html练习之DOM知识---银行系统 html练习之DOM知识---银行...
dom4j-1.6.1.jar及其2.0.2、2.1.1三个版本的jar包
07-03
DOM4J是一个强大的Java库，专门用于处理XML文档。它提供了灵活且高效的API，使得XML的解析、创建、修改和查询变得简单。DOM4J的名字来源于Document Object Model（DOM）和Java的组合，但它并不完全遵循W3C的DOM规范...
JavaScript中输出正直角三角形，倒直角三角形，等腰三角形，长方形
08-18 7566
1、js打印正直角三角形 for（var i = 0; i < 5; i++）{ for(var j = 0;j <= i; j++){ doucument.write('*'); } doucument.write('<br>'); } 结果如图所示： 2、打印倒直角三角形 for(var i = 0; i < 5; i++) { for(var j = 0; j < 5-i; j++){ document.w
JavaScript中经典水仙花案例
08-19 837
水仙花数 水仙花数是指一个3位数，它的每个位上的数字的3 次幂之和等于它本身。（例如：1^3 + 5^3 + 3^3 = 153）,打印所有的水仙花数 var num; for(var num = 100; num <= 999; num++){ var a = parseInt(num / 100); var b = parseInt(num / 10 %10); var c = num % 10; if(a * a * a + b * b * b + c * c *
js初学者如何写全选？------梅花
08-27 418
首先，我们先来分析一下 1、全选，就是把所有多选框都选起来，也就是把所有选项都选择起来 我们首先把form表单写好 <form action=""method="post"> 你的爱好是？ <input type="checkbox" id="checkedAllBox"/>全选/全不选 <br /><br /> <input type="checkbox" name="items" id="items" value="足球"..
javascript中的console
08-17 331
为什么要使用console javascript执行的是客户端，而且浏览器为显示页面，如果把测试结果展示到页面会影响显示 而服务器不是页面，显示到页面的像Apache，Nginx，是显示在黑框里，比如说，声明一个变量，执行的时候34，需要不断打印，跟踪，不能一直在页面显示，不合适，需要在控制端输出 像后端语言，比如说php，直接给客户拿数据，做数据响应，从客户端发送请求，所以说不需要在控制台输出 在JavaScript中调试任何内容的最简单方法之一是使用console.log。但是其实还有许多其他方法可以
js中函数的参数-----初学者必看
08-20 319
1、定义一个参数，判断一个函数是不是偶数是的话返回true，不是的话返回false function isOu(num){ return num % 2 == 0; } console.log(isOu(3)); 2、创建一个函数，可以在控制台输出个人信息 function mianJi(r){ return 3.14*r*r; } mianJi(1); 3、创建一个函数，可以在控制台输出个人信息 function xinxi(name,age,sex,address){ con
JSON------梅花
10-12 226
JSON 就是一个特殊的字符串，这个字符可以被任意语言所识别 JSON javascript Object Notation JS对象表示法 JS对象转JSON的时候 属性名必须要加上双引号 JSON分类： 数组[] 对象{} JSON中允许的值 1、数值 2、字符串 3、布尔值 4、数组 5、对象 6、null js提供了一个工具类 叫JSON 可以将一个JSON转换为JS对象 并且还可以将一个JS对象转化为JSON eval 函数 可以用来执行一段字符串形式的JS代码 如果使用eval执.
js实现键盘操作对div的移动或改变
09-06 223
这样我们先来分析，要实现键盘操作实现div的移动大概的原理吧： *—要实现div的移动，首先最关键的一点：获取div对象 *—获取键盘的操作 *—依据键盘的不同操作，给出不同响应 这就是我想起的大概须要注意的地方，还是先来看代码： 先是html部分 <div style="width: 50px;height: 50px;background-color: cyan;position: absolute;" id="showZone"> 然后记录下javascript的实际操作 window.
js------数组创建，重要！！！
08-23 221
创建一个数组 1、使用字面量来创建数组 可以在创建的时候就指定数组中的元素 var arr = [1,2,3,4,5,6]; 2、使用构造函数创建数组时 也可以同时添加元素 元素之间用逗号隔开 var arr2 = new Array(10,20,30); 3、创建一个数组 数组中只有一个元素10 arr3 = [10]; 4、创建一个长度为10的数组 var arr4 = new Array(10); 5、数组里的元素可以是任意的数据类型 var arr5 = ["hellow",
续js键盘操作对div的变换-----梅花
09-08 170
话不多说，先来代码 <style type = text/css> #box{ width:100px; height:100px; background-color:red; position:absolute; } <body> <div id="box"></div> </body> <script type = text/javascript> var box = document.getElementById('b
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值