web前端—前端三剑客之JS(18)：DOM

最新推荐文章于 2024-09-14 17:04:32 发布
最新推荐文章于 2024-09-14 17:04:32 发布
阅读量167 收藏
点赞数
文章标签： css js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JBY2020/article/details/118676741
版权

见：https://blog.csdn.net/JBY2020/article/details/109864650

        https://blog.csdn.net/JBY2020/article/details/110148757

文档链接：https://pan.baidu.com/s/1SWN_X7Irg3k29dnKFoYalA 
提取码：jbb0

目录

DOM

DOM节点的属性和方法

操作DOM节点对象

HTML DOM

HTMLElement 对象

 CSS样式

Event事件对象

事件处理的4种方式

事件流

Event对象

事件类型

DOM

DOM（Document Object Model）文档对象模型，可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构（是表示和处理一个HTML或XML文档的常用方法）。DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。

DOM节点的属性和方法

以下假设nodeObj是某个节点对象：

节点的属性

  • nodeObj.nodeName ：nodeObj 的名称
  • nodeObj.nodeValue： nodeObj 的值
  • nodeObj.nodeType：nodeObj 的节点类型
  • nodeObj.parentNode： nodeObj 的父节点
  • nodeObj.childNodes： nodeObj 的子节点
  • nodeObj.attributes ：nodeObj 的属性节点

节点的方法

  • nodeObj.getElementsByTagName(name) - 获取节点的后代中带有指定标签名称的所有元素
  • nodeObj.appendChild(node) - 向 nodeObj 插入子节点
  • nodeObj.removeChild(node) - 从 nodeObj 删除子节点

nodeName属性

  • 元素节点的nodeName是标签名称
  • 属性节点的nodeName是属性名称
  • 文本节点的nodeName永远是#text
  • 文档节点的nodeName永远是#document

nodeValue属性

  • 对于文本节点，nodeValue属性包含文本。
  • 对于属性节点，nodeValue属性包含属性值。
  • nodeValue属性对于文档节点和元素节点是不可用的。

操作DOM节点对象

访问DOM节点可以通过以下种方法：

  • 通过使用 getElementsByTagName() 方法
  • 通过利用节点的关系在节点树中导航
  • 通过使用 getElementsByName() 方法
  • 通过使用 getElementById() 方法

HTML DOM

HTML DOM事实上是标准DOM的一种实现，在标准DOM中，认为一切HTML元素都是节点对象，即可以理解为：

  • HTML对象是Node对象的后代对象。
  • 每一个HTML元素都有一个DOM对象原型，比如：<div>，其DOM对象原型是HTMLDivElement；<p>，其DOM对象原型是HTMLParagraphElement。
  • 所有HTML对象的公共原型是HTMLElement，而HTMLElement的原型是Element， Element的原型是Node。

HTML DOM中的主要内容包括HTMLElement、Style对象、Event对象、表单对象等。

HTMLElement 对象

在DOM标准中，每个HTML元素都是继承自HTMLElement。即每个HTML元素对象都继承了HTMLElement的属性和方法。 HTMLElement常用属性：

 获取HTML元素的尺寸

IE新开页面屏幕计算默认值：
FF与IE都支持(计算有差异)网页可见区域宽【document.body.clientWidth】：1239
FF与IE都支持(计算有差异)网页可见区域高【document.body.clientHeight】：0
FF与IE都支持(计算有差异)网页可见区域宽【document.body.offsetWidth】：1239
FF与IE都支持(计算有差异)网页可见区域高【document.body.offsetHeight】：0
FF与IE都支持(计算有差异)网页正文全文宽【document.body.scrollWidth】：1239
FF与IE都支持(计算有差异)网页正文全文高【document.body.scrollHeight】：0
FF与IE都支持(计算相同)网页被卷去的高【document.body.scrollTop】：0
FF与IE都支持(计算相同)网页被卷去的宽【document.body.scrollLeft】：0
只支持IE:网页正文部分上【window.screenTop】：144
只支持IE：网页正文部分左【window.screenLeft】：0
FF与IE都支持(计算相同)：屏幕分辨率的高【window.screen.height】：1024
FF与IE都支持(计算相同)：屏幕分辨率的宽【window.screen.width】：1280
FF与IE都支持(计算相同)：屏幕可用工作区高度【window.screen.availHeight】：990
FF与IE都支持(计算相同)：屏幕可用工作区宽度【window.screen.availWidth】：1280
FF与IE都支持(计算有差异)：窗体左【document.body.offsetLeft】与右【document.body.offsetTop】：10和15
FF与IE都支持(计算有差异)：窗体高【document.body.offsetWidth】与宽【document.body.offsetHeight】：1239和0
垂直方向滚动的值【document.documentElement.scrollTop】:0
只支持FF浏览器整个宽高，不包括工具条【window.innerHeight】：undefined
FF与IE都支持(计算有差异)网页内容可视区域的高度【document.documentElement.clientHeight】:820
FF与IE都支持(计算相同)：获取位于对象最顶端和窗口中可见内容的最顶端之间的距离【document.documentElement.scrollTop】:0

FF新开页面屏幕计算默认值：
以下是新开页面屏幕计算默认值：
FF与IE都支持(计算有差异)网页可见区域宽【document.body.clientWidth】：1264
FF与IE都支持(计算有差异)网页可见区域高【document.body.clientHeight】：0
FF与IE都支持(计算有差异)网页可见区域宽【document.body.offsetWidth】：1264
FF与IE都支持(计算有差异)网页可见区域高【document.body.offsetHeight】：0
FF与IE都支持(计算有差异)网页正文全文宽【document.body.scrollWidth】：1264
FF与IE都支持(计算有差异)网页正文全文高【document.body.scrollHeight】：0
FF与IE都支持(计算相同)网页被卷去的高【document.body.scrollTop】：0
FF与IE都支持(计算相同)网页被卷去的宽【document.body.scrollLeft】：0
只支持IE:网页正文部分上【window.screenTop】：undefined
只支持IE：网页正文部分左【window.screenLeft】：undefined
FF与IE都支持(计算相同)：屏幕分辨率的高【window.screen.height】：1024
FF与IE都支持(计算相同)：屏幕分辨率的宽【window.screen.width】：1280
FF与IE都支持(计算相同)：屏幕可用工作区高度【window.screen.availHeight】：990
FF与IE都支持(计算相同)：屏幕可用工作区宽度【window.screen.availWidth】：1280
FF与IE都支持(计算有差异)：窗体左【document.body.offsetLeft】与右【document.body.offsetTop】：0和0
FF与IE都支持(计算有差异)：窗体高【document.body.offsetWidth】与宽【document.body.offsetHeight】：1264和0
垂直方向滚动的值【document.documentElement.scrollTop】:0
只支持FF浏览器整个宽高，不包括工具条【window.innerHeight】：829
FF与IE都支持(计算有差异)网页内容可视区域的高度【document.documentElement.clientHeight】:858
FF与IE都支持(计算相同)：获取位于对象最顶端和窗口中可见内容的最顶端之间的距离【document.documentElement.scrollTop】:0

以上数据表明:在FF与IE下,在计算屏幕宽度时,FF比IE多 25个像素.

对IE浏览器各属性的计算范围：

 CSS样式

在Javascript中，我们可以通过HTML DOM中的Style对象操作HTML对象的“内联样式表”：

  • Style对象只能获取或设置HTML对象的style属性中的CSS属性。
  • 对于没有中划线的css属性一般直接使用style.属性名即可。如：obj.style.margin
  • 对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。如：obj.style.marginTop
  • 浮动比较特殊，要使用obj.style. cssFloat
  • 对于多值符合属性，不能直接访问属性值，要通过最终属性名

通过window.getComputedStyle(obj,null)获取Style对象：

  • 如果已知对象的Id，这种方式可以获取该对象所有的CSS属性。
  • 这种方式IE不支持，IE中需要用obj.currentStyle。
  • 对于多值复合属性，这种方式获取不到属性值，要通过最终属性名。
  • 在Firefox中，颜色获取到的值形式如rgb(255,0,0)，而IE中则如#ff0000。

通过CSS的变化来制作特效是最常见的，JS操作CSS除了Style对象外，我们还可以通过以下两种方式：

  • 对象的className。
  • 给link一个Id，通过Id来操作外部样式表。网页换皮肤的原理也是来源于此。

Event事件对象

事件处理的4种方式

手工触发

用法：在HTML代码中用事件属性执行代码或函数

优点：使用直接、简单，哪个HTML标签要触发什么事件，则就在该HTML标签上加事件属性。

缺点：不能做到JS与HTML完全分离。

匿名函数

用法：在JS中获取要触发事件的HTML对象，给HTML对象的事件属性绑定一个匿名函数，作为事件的响应。

优点：可以做到JS与HTML完全分离

缺点：一个匿名函数只能绑定给一HTML对象的事件属性，事件响应函数不能重用

显示声明

用法：在JS中，通过function关键字显示声明函数，然后获取要触发事件的HTML对象，给HTML对象的事件属性绑定一个显示函数的函数名，作为事件的响应。

优点：可以做到JS与HTML完全分离，并且显示声明的函数可以重复使用

缺点：显示声明的函数与HTML对象的事件属性从代码上看，没有直观的联系。

事件监听函数

用法：通过HTML DOM 对象的addEventListener()方法，为该对象注册事件响应函数。

语法：target.addEventListener(type, listener, useCapture);

  • target：文档节点、document、window 或 XMLHttpRequest。
  • type：字符串，事件名称，不含"on"，比如"click"、"mouseover"、"keydown"等。
  • listener：实现了 EventListener 接口或者是 JavaScript 中的函数。
  • useCapture：是否使用捕捉，看了后面的“事件流”就明白了，一般用 false。

优点：

  • 可以对同一物件的同一事件绑定多个事件处理程序。
  • 可以通过事件流三个阶段更好地控制何时触发事件处理程序。
  • 工作于 DOM 元素，而不仅是 HTML 元素。

缺点：

  • addEventListener()方法存在兼容性问题，在IE中要使用attachEvent()方法，其语法为：target. attachEvent(type, listener);

事件流

当一个事件发生时，分为三个阶段：

  • 捕获阶段：从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。（IE 中无此阶段。）
  • 目标阶段：触发在目标对象本身注册的事件处理程序，也称正常事件派发阶段。
  • 冒泡阶段：从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCapture 为 false，则调用该事件处理程序。

事件流的发送顺序规律：

  • true 的触发顺序总是在 false 之前；
  • 如果多个均为 true，则外层的触发先于内层；
  • 如果多个均为 false，则内层的触发先于外层。

停止事件流传播：

  • 当一个操作发生后，我们往往只需要一个响应就足够了，这个时候，我们需要停止事件流的传播。
  • event.stopPropagation()用于停止事件流传播。（IE中使用event.cancelBubble =  true ）其中event指事件对象。

Event对象

Event 对象代表事件的状态，Event对象在Firefox和IE中不同：

  • 在标准事件模型中，Event 对象传递给事件句柄函数；但是在 IE 事件模型中，它被存储在 Window 对象的 event 属性中。
  • 在标准事件模型中，Event 的各种子接口定义了额外的属性，它们提供了和特定事件类型相关的细节。在 IE 事件模型中，只有一种类型的 Event 对象，它用于所有类型的事件。

Event对象的常用属性：可以分成四大类：

  • 通用属性：type , relatedTarget
  • 键盘、鼠标键值属性：keyCode,charCode,which,button
  • 功能键属性：ctrlKey,metaKey, shiftKey,altKey
  • 鼠标坐标属性：clientX,clientY,offsetX,offsetY, screenX, screenY,x,y

事件类型

Javascript事件大致可以分成五大类：

页面事件

 鼠标事件

键盘事件

表单事件

 编辑事件

 

HTML DOM的表单相关对象包括以下对象：

  • Form
  • Input Button
  • Input Checkbox
  • Input File
  • Input Hidden
  • Input Password
  • Input Radio
  • Input Reset
  • Input Submit
  • Input Text
  • Option
  • Select
觅远
关注
JavaScript的DOM和原型链的了解
Sahara-冷颜的博客
07-28 486
DOM通常分为三类:DOM Core(核心),HTML-DOM和CSS-DOM. DOM是以树状结构组织的HTML文档,那么,它是怎样规定的呢? (1).整个文档是一个文档节点. (2).每个HTML标签是一个元素节点. (3).包含在HTML元素中的文本是文本节点. (4).每个HTML属性和是一个属性节点. (5).注释属于注释节点. 那么各个节点之间的关系是怎样的呢? 在节点树中,顶部节点被...
前端三剑客（html+css+js）加vue部分基础运用2
06-11
在IT行业中，前端开发是构建Web应用程序的重要组成部分，而“前端三剑客”指的是HTML、CSS和JavaScript，这三种技术是构建任何现代网页的基础。Vue.js是近年来非常流行的一个前端框架，它使得JavaScript的开发更加...
DOM笔记（十二）：又谈原型对象
淡忘~浅思
12-26 1681
因为之前谢过一篇关于原型对象的笔记：浅谈JavaScript中的原型模式。现在我又重新看到这个话题，对原型有了进一步的理解，所以，又要谈谈原型对象。 一、理解原型对象 创建的每一个函数都有一个prototype属性，它指向这个函数的原型对象。利用原型模式创建的方法和属性是被所有实例所共享的。 function Person(){} Person.prototype.name="dwqs"; Person.prototype.age=20; Person.prototype.sayName=functi
文档对象模型DOM
一心向学
03-21 290
由于vue react 框架的应用广泛，封装好了DOM操作，但是还是要熟悉的 1，DOM的本质： DOM可以理解为浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型 当网页被加载时，浏览器会创建页面的文档对象模型 javascript能改变页面中的所有HTML元素 javascrip能改变页面中的所有HTML属性 javascrip能改变页面中的所有CSS样式 javascrip能对页面中的所有事件做出反应 DOM是哪种数据结构 树（DOM树）DOM树形结构 2， js获取DO
DOM 原型
Birdlun的博客
07-08 395
原型使用的目的 共性对象的属性和方法 列：使用原型 <script type="text/javascript"> /*原型:共享对象的属性与方法 function Student(){} Student.prototype.name='祖儿'; Student.prototype.age=23; Student.prototype.eat=f...
2.web前端开发（四）0303 javaScript进阶-DOM
guozhuanchen的博客
03-03 118
一、简介 二、增删改查节点 （一）访问元素节点 （二）创建元素节点 （三）传入元素节点 （四）删除元素节点 （五）复制元素节点 （六）替换元素节点 （七）节点关系 三、属性操作 （一）js操作html的元素属性 （二）js操作css的元素属性 ...
web前端-前端三剑客之JavaScript
苏凉.py的博客
05-28 899
🐚作者简介：苏凉（专注于网络爬虫，数据分析） 🐳博客主页：苏凉.py的博客 🌐系列专栏：web前端基础教程 👑名言警句：海阔凭鱼跃，天高任鸟飞。 📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！ 👉关注✨点赞👍收藏📂 文章目录JavaScript简介起源简史时间表实现JavaScript的特点JavaScript的输出提示框输出alert页面输出document.write控制台输出console.logJavaScript的书写位置写在标签属性中（不推荐）写在script标签中 Java..
web前端—前端三剑客之JS(16)：移动端事件
北冥有鱼的博客
07-10 483
触摸式设备也拥有鼠标事件 目录 移动端的主要事件 移动端事件的触发对象 移动端事件对象的位置属性 移动端事件的触发顺序 其他事件对象 阻止浏览器默认行为 移动端的主要事件 touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。 touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault() 可以阻止滚动。 touchend：当手指从屏幕上移开时触发。 touchcancel：当系统停止跟踪触摸时触发。...
web前端—前端三剑客之JS(1)：JS简单使用
北冥有鱼的博客
05-30 284
参见：https://blog.csdn.net/JBY2020/article/details/109789710 JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言 JavaScript特点： 向HTML页面中添加交互行为 脚本语言，语法和Java类似 解释性语言，边执行边解释 JavaScript组成： ECMAScript——基础语法、流程控制语句、变量、运算符、函数、对象 DOM ——获取文档信息（HMTL、事件对象） BOM ——控制浏览器（打开、关...
web前端—前端三剑客之JS(15)：BOM之事件类型、鼠标事件、键盘事件
北冥有鱼的博客
07-07 483
鼠标键盘事件：https://blog.csdn.net/JBY2020/article/details/110148757 目录 三种事件类型 事件绑定 事件监听 事件委托 鼠标事件 焦点事件 点击及移动事件 滚轮事件 键盘事件 键码表 三种事件类型 事件绑定 Obj.on+事件名称=function(){} 特点： 事件绑定同一个对象只能给同一个事件绑定唯一一个事件处理函数.如果绑定第二个,第一个会被清除掉.因为本质上只是给对象的on事件属性上添加了一个函数 事.
web.zip，前端三剑客等等教程
08-11
VSCode下载与安装使用教程、HTML、列表、表格、媒体元素、基础、CSS 基础、CSS 美化网页元素、CSS浮动、CSS 网页动画、CSS 盒子模型、JavaScript 基础、JavaScript 函数、JavaScript BOM、JavaScript DOM、...
Web前端开发技术PPT.zip
06-19
在这一章，我们介绍了Web前端的基本概念，包括HTML、CSS和JavaScript三剑客的职责以及它们在构建网页中的角色。HTML负责页面结构，CSS负责样式呈现，而JavaScript则赋予页面动态功能。 2. **第二章：HTML基础** ...
CSS——弹性盒子布局（display: flex）
懒羊羊大王的博客
09-14 968
Flexbox或者是弹性布局，它的全称叫做弹性盒子布局，那么它到底该如何实现呢？从我们熟悉的 display 属性开始。给元素添加 display: flex，该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flex item）。那么我们该如何具体地操作使用呢？下面我们来进行细致深入的学习。
js的书写位置和css的书写位置的区别？为什么要这样写？
QQ1257871322的博客
09-10 423
这种分离方式有助于优化加载速度和页面渲染性能，使得 HTML、CSS 和 JavaScript 各司其职，各自处理不同的任务。JavaScript 用于添加页面的动态行为和交互。标签之前），以确保在执行脚本时页面的 DOM 元素已经加载完毕，从而避免脚本执行时无法找到需要操作的元素。CSS 主要用于控制页面的视觉样式和布局，通常在 HTML 文件的。部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。标签中，或者在外部样式表文件中（标签中，或者在外部脚本文件中（
基于less和scss 循环生成css
最新发布
k0933的博客
09-14 158
【代码】基于less 循环生成css。
css 个人喜欢的样式 速查笔记
waterHBO的博客
09-07 518
记录自己喜欢的， 觉得比较好看的 css.下次用的时候，直接复制，很方便。
CSS“多列布局”（补充）——WEB开发系列35
一条晒干的咸鱼的博客
09-10 633
多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。
CSS基本语法结构
nice66660的博客
09-10 1287
*某某[属性|=属性值] 选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 *//*某某[属性~=属性值] 选择到的是a标签且有class属性,且属性值有完整的itme词的变 *//*某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一模一样的，多一个空格都不行 *//*某某[属性^=属性值] a标签有class属性且属性值是li开头的 *//*某某[属性$=属性值] a标签有class属性且属性值结尾是t的变 */
Web前端发展：现状、挑战与未来之路
随着互联网技术的飞速发展，Web前端开发在当今IT行业中占据了至关重要的地位。"术业有专攻，不同技术有自己的圈子"，这句话准确地描绘了前端开发领域的独特性和专业细分。在过去的十年里，Web前端经历了显著的变化，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值