JavaScriptDom模型（上）第一部分WebAPI简介初识WebAPI WebAPI是浏览器提供的一套操作浏览器功能和页面元素的接口。JavaScript语言由3部分组成，分别是ECMAScript、BOM和DOM，其中ECMAScript是JavaScript语言的核心，而WebAPI包括BOM和DOM两部分。 JavaScript的组成部分 2。WebAPI与API的关系 API：应用程序编程接口，是一些预先定义的函数，这些函数是由某个软件开放给开发人员使用的，帮助开发者实现某种功能，开发人员无须访问源码、无须理解其内部工作机制细节，只需知道如何使用即可。例如，调起手机的摄像头拍摄画面。 WebAPI：主要针对浏览器的API，在JavaScript语言中被封装成了对象，通过调用对象的属性和方法就可以使用WebAPI。例如，console对象、document对象、window对象。 示例： document。title设置新标题；设置页面标题 console。log（document。title）；获取页面标题 document。write（网页内容）；将字符串写入页面第二部分DOM简介 1。什么是DOM DOM：文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C定义了一系列的DOM接口，利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。在实际开发中，诸如改变盒子的大小、标签栏的切换、购物车功能等带有交互效果的页面，都离不开DOM。 2。DOM树 DOM中将HTML文档视为树结构，被称之为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。 接下来针对DOM中各节点的专有名词解释如下：文档（document）：可以把一个页面当成一个文档元素（element）：页面中的所有标签都是元素节点（node）：网页中的所有内容，在文档树中都是节点（如：元素节点、属性节点、文本节点、注释节点等），在DOM中会把所有的节点都看作是对象，这些对象拥有自己的属性和方法第三部分获取元素 1。根据id获取元素 document。getElementById（id）方法，是由document对象提供的用于查找元素的方法，该方法返回的是拥有指定id的元素，如果没有找到指定id的元素则返回null，如果存在多个指定id的元素则返回undefined。 2。根据标签获取元素 根据标签名获取元素的两种方式：可以通过document对象获取元素和通过element对象获取元素。 由于相同标签名的元素可能有多个，上述方法返回的不是单个元素对象，而是一个集合。这个集合是一个类数组对象，或称为伪数组，它可以像数组一样用索引来访问元素，但不能使用push（）等方法，使用Array。isArray（）也可以证明它不是一个数组。 getElementsByTagName（）方法获取到的集合是动态集合，也就是说，当页面增加了标签，这个集合中也会自动增加元素。 3。根据name获取元素 document。getElementsByName（）方法，是通过name属性来获取元素，一般用于获取表单元素。name属性的值不要求必须是唯一的，多个元素也可以有同样的名字，如表单中的单选框和复选框。 4。HTML5新增的获取方式 HTML5中为document对象新增了querySelector（）、querySelectorAll（）和getElementsByClassName（）方法。注意：这三种方式在使用时需要考虑到浏览器的兼容性问题。 5。根据类名获取 document。getElementsByClassName（）方法，用于通过类名来获得某些元素集合。 6。querySelector（）和querySelectorAll（）对象的属性 querySelector（）方法用于返回指定选择器的第一个元素对象。 querySelectorAll（）方法返回指定选择器的所有元素对象集合。 7。document对象的属性 document对象提供了一些属性，可用于获取文档中的元素。例如，获取所有表单标签、图片标签等，document对象的常用属性如下表： 第四部分事件基础 1。事件概述 事件是指可以被JavaScript侦测到的行为，是一种触发响应的机制。这些行为指的就是页面的加载、鼠标单击页面、鼠标指针滑过某个区域等具体的动作，它对实现网页的交互效果起着重要的作用。 2。事件三要素 事件三要素是指事件源、事件类型和事件处理程序这3部分。名词解释如下：事件源：触发事件的元素（谁触发了事件）事件类型：如click单击事件（触发了什么事件）事件处理程序：事件触发后要执行的代码（函数形式），也称事件处理函数（触发事件以后要做什么）第五部分操作元素 1。操作元素内容 在前面的内容中已经讲解了获取元素的几种方式，接下来将利用DOM提供的属性实现对元素内容的操作。常用的属性如下表所示： innerHTML在使用时会保持编写的格式以及标签样式 innerText去掉所有格式以及标签的纯文本内容 textContent属性在去掉标签后会保留文本格式 2。操作元素属性 在DOM中，HTML属性操作是指使用JavaScript来操作一个元素的HTML属性。一个元素包含很多的属性，例如，对于一个img图片元素来说，可以操作它的src、title属性等，或者对于input元素来说，可以操作它的disabled、checked、selected属性等。 步骤：编写HTML结构代码获取元素注册事件处理程序操作元素样式 操作元素样式的两种方式：一种是操作style属性，另一种是操作className属性 1。操作style属性 元素对象的样式，可以直接通过元素对象。style。样式属性名的方式操作。样式属性名对应CSS样式名，但需要去掉CSS样式名里的半字线，并将半字线后面的英文的首字母大写。 常见的style属性操作的样式名如下表： 2。操作className属性 在开发中，如果样式修改较多，可以采取操作类名的方式更改元素样式，语法为元素对象。className。访问className属性的值表示获取元素的类名，为className属性赋值表示更改元素类名。如果元素有多个类名，在className中以空格分隔。第六部分例题 一、练习查找元素的四种方法。页面中有若干列表项，如下图所示。香蕉有id值。香蕉、葡萄、柚子设置red样式类。设置四个按钮，分别设计代码，调用四种方法，体验效果。 按钮1：根据id查找，弹出消息框：香蕉 按钮2：根据标签名li查找，弹出消息框显示li个数 按钮3：根据class名red查找，弹出消息显示使用red的个数 按钮4：根据name名btn查找，弹出消息框显示btn个数 二、熟悉三种查找页面元素的方法，实现三个按钮的功能。 三、改变页面元素的属性，实现换头像功能。 四、给元素添加样式类 五、给元素添加多个样式类 第七部分对照表 使用js操作css属性的写法是有一定的规律的： 1、对于没有中划线的css属性一般直接使用style。属性名即可。 如：obj。style。margin，obj。style。width，obj。style。left，obj。style。position等。 2、对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。 如：obj。style。marginTop，obj。style。borderLeftWidth，obj。style。zIndex，obj。style。fontFamily等。 3、这个规律我想大多数的前端开发者也都熟知。但在css中有一个特殊的属性其js使用方法比较特殊。 这个特殊的属性就是：float。我们不能直接使用obj。style。float来使用，这样操作是无效的。 其正确的使用方法是为：IE：obj。style。styleFloat，其他浏览器：obj。style。cssFloat。 CSS和JavaScript标签style属性对照表： 盒子标签和属性对照 CSS语法（不区分大小写） JavaScript语法（区分大小写） border border borderbottom borderBottom borderbottomcolor borderBottomColor borderbottomstyle borderBottomStyle borderbottomwidth borderBottomWidth bordercolor borderColor borderleft borderLeft borderleftcolor borderLeftColor borderleftstyle borderLeftStyle borderleftwidth borderLeftWidth borderright borderRight borderrightcolor borderRightColor borderrightstyle borderRightStyle borderrightwidth borderRightWidth borderstyle borderStyle bordertop borderTop bordertopcolor borderTopColor bordertopstyle borderTopStyle bordertopwidth borderTopWidth borderwidth borderWidth clear clear float floatStyle height height width width margin margin marginbottom marginBottom marginleft marginLeft marginright marginRight margintop marginTop padding padding paddingbottom paddingBottom paddingleft paddingLeft paddingright paddingRight paddingtop paddingTop 颜色和背景标签和属性对照 CSS语法（不区分大小写） JavaScript语法（区分大小写） background background backgroundattachment backgroundAttachment backgroundcolor backgroundColor backgroundimage backgroundImage backgroundposition backgroundPosition backgroundrepeat backgroundRepeat color color 样式标签和属性对照 CSS语法（不区分大小写） JavaScript语法（区分大小写） display display liststyletype listStyleType liststyleimage listStyleImage liststyleposition listStylePosition liststyle listStyle whitespace whiteSpace 文字样式标签和属性对照 CSS语法（不区分大小写） JavaScript语法（区分大小写） font font fontfamily fontFamily fontsize fontSize fontstyle fontStyle fontvariant fontVariant fontweight fontWeight 文本标签和属性对照 CSS语法（不区分大小写） JavaScript语法（区分大小写） letterspacing letterSpacing linebreak lineBreak lineheight lineHeight textalign textAlign textdecoration textDecoration textindent textIndent textjustify textJustify texttransform textTransform verticalalign verticalAlign
影响了7成人晚睡的原因，找到了近7成晚睡都与手机有关！据研究显示，手机发出的蓝光会压抑人体褪黑素的释放。褪黑素被减少，反过来又造成睡眠障碍。睡不着又继续玩手机，重复循环。褪黑素本身是人体内正常存……1997年美国孕妇生下七胞胎，获赠511平大别墅，如今怎样了1997年，一位名叫波比麦考伊的美国孕妇孕育了七个胚胎，且七个孩子全部存活。此事件堪称史无前例，轰动全球。医生为了孕妇的安全着想，建议选择性保留胎儿。然而，出于母爱的力量……邢台香河冰雪嘉年华绽放冬日激情冰车项目带来美好亲子时光。日前，河北廊坊香河刘宋镇杨家寨冰雪嘉年华活动正式开启，让广大游客充分感受到冰雪运动的魅力，享受冬日激情。刘宋镇杨家寨在增加游客体验度方面下……绝地反超！第五人格夏季赛榜首大战DOU5获胜，成功拿下第一2022第五人格职业联赛IVL夏季赛已经到了最后1个比赛日。目前，参与季后赛的6支队伍已经全部决出，而最后1个比赛日要决定的，就是常规赛榜首的归属，也就是DOU5和Wolves……红星深度近距离揭秘谷爱凌为何能成为女子自由式滑雪第一人2月18日上午，谷爱凌在张家口赛区云顶滑雪公园获得了北京冬奥会自由式滑雪女子U型场地技巧冠军。至此，她的首次冬奥会之旅最终成绩定格在2金1银，一次完美的演出。在2月8日获得自由……孩子被诊断双相后，妈妈分享如何从绝望到看到孩子走向康复之路？本文字数约：6234字阅读时间约：8分钟本文章节：01、一直优秀的孩子，大学后竟沉迷游戏、频频挂科02、我和丈夫在家庭教育上到底犯了什么错？03、……煽动队员罢赛，中冠辽宁领先官员禁赛24个月罚款总额62。1万直播吧8月26日讯中国足协官方消息，中冠辽宁领先俱乐部多名官员因煽动队员离开球场中断比赛遭到处罚。在中冠第二轮辽宁领先与长春申华的比赛进行到第35分钟，辽宁领先官员孙家森……34岁河南小哥辞了公务员，一个人到重庆跑滴滴，我却莫名有点羡Hello，大家好，老陈又来跟大家分享司机故事了。最近老陈为了给大家收罗重庆滴滴司机的故事，还特意加入了一个球队，周末休息的时候，一些司机会约到打球，我也跟到去打了两次，认识了……意大利旅游业经济收入2022年将比去年增长约35欧联网4月15日电，据欧联通讯社报道，根据旅游研究机构意大利意见和市场研究小组（Demoskopika）最新研究报告指出，预计今年将有超过9200万游客在意大利度假。这意味着与……3消息！曝辽宁报价强力外援，广东二队49分狂胜，CBA大牌球辽宁报价强力外援辽宁队阵中目前有两个外援，小外援福格以及新签的大外援莫兰德，虽然已经具备了双外援的标配，但是靠这两位外援在季后赛中想走得更远还并不能令人满意。并且我们可以……朝鲜观察，朝鲜女人喜欢穿的几种服装？谈到穿着打扮，现在的人们的穿衣打扮偏休闲，人们的穿着打扮也更加的个性。到朝鲜旅行时，我发现朝鲜人的穿衣打扮也非常讲究。他们的穿衣风格比较单调，但非常得体。走在平壤街头，你能发现……补剂治疗A娃，到底有用吗？对于A娃的治疗，其中有一种叫做补剂治疗。这里的补剂并不是我上一篇写的处方药，而是保健药。补剂治疗是通过改善饮食和营养作为减轻慢性疾病相关症状的一种手段。我在娃确诊ADHD……