开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

相关DOM元素的Javascript命名约定？

在前端开发中，为了提高代码的可读性和可维护性，通常会遵循一些命名约定来命名相关DOM元素的Javascript变量。以下是一些常见的命名约定：

使用有意义的名称：变量名应该能够清晰地描述DOM元素的用途或功能，避免使用无意义的单词或缩写。例如，如果一个按钮用于提交表单，可以将其命名为"submitButton"。
使用驼峰命名法：变量名应该使用驼峰命名法，即首字母小写，后续单词首字母大写。例如，一个包含用户姓名的输入框可以命名为"userNameInput"。
使用前缀或后缀：为了更好地区分不同类型的DOM元素，可以在变量名中添加前缀或后缀。例如，一个包含用户头像的图片可以命名为"avatarImage"。
避免使用特殊字符和保留字：变量名应该避免使用特殊字符和Javascript的保留字，以免引起语法错误。例如，不要使用"!"、"$"等特殊字符作为变量名。
一致性：在整个项目中保持一致的命名约定，以便于团队成员之间的沟通和协作。

这些命名约定可以提高代码的可读性和可维护性，使开发过程更加高效。在腾讯云的产品中，与前端开发相关的产品包括云服务器、云函数、云存储等，可以根据具体需求选择适合的产品进行开发。

腾讯云产品链接：

云服务器：https://cloud.tencent.com/product/cvm
云函数：https://cloud.tencent.com/product/scf
云存储：https://cloud.tencent.com/product/cos

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JavaScript HTML DOM 元素 (节点)

---- 创建新的 HTML 元素 (节点) - appendChild() 要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。...创建新的 HTML 元素 (节点) - insertBefore() 以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。...要移除一个元素，你需要知道该元素的父元素。...DOM 需要清楚您需要删除的元素，以及它的父元素。...(child); ---- 替换 HTML 元素 - replaceChild() 我们可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。

2.2K1 0

JavaScript DOM元素尺寸和位置

总结：以上的三种CSS获取元素大小的方法，只能获取元素的CSS大小，却无法获取元素本身实际的大小。比如加上了内边距、滚动条、边框之类的。...二．获取元素实际大小 1.clientWidth和clientHeight 这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。...如果是内联元素(inline)或者没有设置大小的元素就尤为麻烦，所以，建议使用的时候注意。...如果四条边宽度不同的话，可以直接通过计算后的样式获取，或者采用以上三组获取元素大小的减法求得。 2.offsetLeft和offsetTop 这组属性可以获取当前元素相对于父元素的位置。...如果说，在很多层次里，外层已经定位，我们怎么获取里层的元素距离body或html元素之间的距离呢？也就是获取任意一个元素距离页面上的位置。那么我们可以编写函数，通过不停的向上回溯获取累加来实现。

2.8K7 0

【Web APIs】DOM 文档对象模型 ① ( DOM 相关概念 - DOM 文档、DOM 树、DOM 节点 | 根据元素 ID 获取 DOM 元素 - getElementById 函数 )

相关概念 1、DOM 简介 DOM , 全称 " Document Object Model " , 文档对象模型 , 是一个可处理扩展标记语言 HTML 和 XML 的接口 , 借助该接口 ,...可以动态的访问和修改文档的内容、结构和样式 ; DOM 接口是 W3C 组织推荐的标准编程接口 , 主要处理 HTML XML 两种类型的文档 ; 2、DOM 相关概念 - DOM 文档...DOM 节点都代表文档中的一个部分 , 如 : 元素、属性或文本 , 并且这些节点以特定的关系相互连接 , 形成一个完整的树状图 ; 二、获取 DOM 元素 1、获取 DOM 元素的常用方法获取...DOM 元素的方法 : 根据元素 ID 获取 DOM 元素 , getElementById 函数 ; 根据标签名称获取 DOM 元素 , getElementsByTagName 函数 ; 根据...div 元素 , 在 JavaScript 脚本中 , 可以通过 var element = document.getElementById("text"); 代码获取上述 DOM 元素 ; <!

1781 0

Vue组件的Prop命名约定

1.内容感知命名重要的是最大限度地利用变量名传达信息，以减少混淆并使组件的浏览更加容易。对于数组，选择使用复数名词作为变量名，例如 items 。这个选择立即表明该变量代表一组相关元素的集合。...can 表示行为变化或条件性的视觉变化。考虑使用 canToggle 或 canExpand 这样的属性名称来清晰地表达组件的能力。 has 表示UI元素的存在。...使用前缀如 hasCancelButton 或 hasHeader 来表示特定的UI元素是否存在或可见。 2. 描述性命名 Props 应该描述组件本身，侧重于它的功能而不是为什么要这样做。...如果原生的焦点/点击事件不相关，请使用自定义名称，例如 onSelect ，而不是 onFocus 或 onClick 。...按照这些准则，我们可以为Vue应用程序建立一致且有意义的 prop 命名约定。周到的 prop 名称有助于提高代码的可读性和可维护性，使你和团队更容易有效地合作。

3263 0

JavaScript 教程「9」：DOM 元素获取、属性修改

我们都知道 HTML 页面中包含了许多标签，而 DOM 对象就是浏览器根据这些标签所生成的 JavaScript 对象。...也就是说，通过修改 JavaScript 中的对象属性，我们就能够改变对象对应 HTML 中的标签属性。 DOM 对象获取匹配的首个元素上一小节实例中我们其实已经获取过相关 DOM 对象了，也就是以下这一句： let btn = document.querySelector('button'); 这其实是通过...除开上述两种获取 DOM 对象之外，还提供了一些用于获取 DOM 元素的方法。...元素内容既然已经学会了如何获取 DOM 元素，接下来就是看看如何修改元素中的内容。

2.6K4 1

JavaScript学习笔记011-DOM页面元素的运用

Author：Mr.柳上原付出不亚于任何的努力愿我们所有的努力，都不会被生活辜负不忘初心，方得始终给大家分享一个工作中遇到的事情：分公司人事部的电脑坏了老总叫我们网络营销部去给分公司送电脑...box"> const box = document.getELementById("box"); // 元素尺寸获取...; // box的顶部到定位父级顶部的距离 box.offsetLeft; // box的左边到定位父级左边的距离 box.clientWidth; // box的样式宽度+左右padding box.clientHeight...低版本IE浏览器：window.event */ } /* 鼠标相关： clientX clientX // 鼠标点击的位置相对于当前文档可视区窗口左上角的坐标 pageX pageY // 鼠标点击的位置相对于文档顶部左上角的坐标...document.onkeydown = function (e){ // 键盘输入事件 e = e || window.event; // 兼容写法 console.log(e.key); } /* 键盘相关

4951 0

JavaScript 学习-27.查找HTML DOM节点(元素)

前言如何查找和访问 HTML 页面中的节点元素？也就是我们经常说的定位元素的一些方法。...查询 HTML 节点(元素)一些方法查找 html 页面上的元素，可以用以下方法方法节点类型 getElementById() 通过 id 查找 HTML 元素 getElementsByClassName...) 对象选择器查找 HTML 对象以上方法中只有getElementById()和querySelector()查找到的是单个元素，其它都是查找到的元素集合（相当于一个数组） getElementById...HTMLCollection对象，可以看成是一个数组，会返回一个或多个元素，如果找不到会返回空的[]。...，如果查找不到返回null 当页面上有多个元素属性一样的时候，此时会返回第一个元素 DOM 节点 Hello

1.4K2 0

JavaScript DOM之元素查找与CSS样式设置

本文目录 DOM简介元素查找CSS样式设置参考 DOM简介元素查找 // 页面加载完成之后,调用的函数 window.onload = function(){ // 根据ID查找元素，...getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。...getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 CSS样式设置的时候,如果原来的属性是由多个单词组成的,此时要使用驼峰命名对应的样式来设置*/ div2.style.back groundColor = "blue"

1.8K2 0

一文搞懂 JavaScript 中 DOM 相关的距离

一、问题由来刚开始学 DOM 操作中对于元素距离元素的距离问题总是迷迷糊糊的，虽然有万能的 getCurrentStyle 方式来取得所需要的属性，但是有时看别人的代码的时候，总会遇到很多简写的方式...元素非fixed定位，其父元素中有设置定位的，则其中离当前元素最近的父元素为offsetParent。的offsetParent为null，相对视口定位。...（简单来说就是元素相对父元素左边的距离） offsetTop：元素上外边框距离父元素上内边框的距离（简单来说就是元素相对父元素上边的距离）下面有张图对上面的内容进行了总结，并给出了不同浏览器下的兼容性...：三、鼠标事件相关的坐标距离鼠标事件中有很多描述鼠标事件发生时的坐标信息的，给大家介个图看看：这么多的坐标位置到底有什么区别呢？...screenX = 鼠标点击位置距离电脑屏幕左边的距离。同样，上面都是 X 系列的位置比较，Y的方向上也是一样的。看完这些，你对 DOM 元素的距离相关的属性都了解了吗？

1.4K3 1

DOM 元素的循环遍历

博客地址：https://ainyi.com/89 获取 DOM 元素的几种方式 get 方式： getElementById getElementsByTagName getElementsByClassName...= document.querySelectorAll('.title') 一般循环 get 方式 get 方式获取的 dom 元素，仅可使用==for-in、for-of、for==循环 for(let...('popo') 获取 name 属性为 'popo' 的 dom 元素（若多个元素有相同的 name 属性，返回第一个） for-of、for 循环可获取每个 dom 元素： for(let val...（每个dom元素） query 方式 query 方式获取的 dom 元素，可使用==forEach、for-in、for-of、for==循环 forEach、for-of、for 循环的结果无差别...，少了 ƒ namedItem() { native code }，多了 Object 的几个方法这说明，query 方式获取的 dom 元素集合，可执行 Object 对应的方法，但没有 namedItem

6.5K6 0

Javascript的DOM操作

5.删除节点 parentNode.removeChild(node) 删除某个节点的子节点 node是要删除的节点注意：IE会忽略节点间生成的空白文本节点(比如，换行符号)，而Mozilla...在删除指定节点的时候不会出错，可是假设要删除最后一个子结点或者是第一个子结点的时候，就会出现故障。这时候，就须要用一个函数来推断首个子结点的节点类型。...元素节点的节点类型是 1，因此假设首个子节点不是一个元素节点，它就会移至下一个节点，然后继续检查此节点是否为元素节点。整个过程会一直持续到首个元素子节点被找到为止。...假设节点为已知节点的第一个子节点就能够使用这种方法。...parentObj.childNodes 获得节点的全部子节点，然后通过循环和索引找到目标节点 9.获取相邻的节点 neborNode.previousSibling :获取已知节点的相邻的上一个节点

6731 0

JavaScript 学习-34.HTML DOM 创建插入删除替换元素

前言 HTML DOM 可以创建一个新元素，并插入到指定元素的位置 createElement 创建元素 document.createElement() 可以创建一个元素 document.createTextNode...DocumentFragment 节点代表一个文档的片段，本身就是一个完整的 DOM 树形结构。它没有父节点，parentNode 返回 null ，但是可以插入任意数量的子节点。...它不属于当前文档，操作 DocumentFragment 节点，要比直接操作 DOM 树快得多。它一般用于构建一个 DOM 结构，然后再插入当前文档。...before 在指定元素前面添加元素 remove 删除指定元素 replaceWith 替换指定元素 appendChild 可向节点的子节点列表的末尾添加新的子节点 insertBefore 方法可在已有的子节点前插入一个新的子节点...removeChild 移除父元素下的子节点 replaceChild 替换父元素下的子节点 2022年第 11 期《python接口web自动化+测试开发》课程，6月5号开学!

2.7K3 0

vue 获取 DOM 元素的方法

1 .原生js获取 DOM 节点 document.querySelector(选择器) document.getElementById(id选择器) document.getElementsByClassName...(class选择器) .... 2. vue2中获取当前组件的实例对象因为每个 vue 的组件实例上，都包含一个 refs 对象，里面存储着对应的 DOM 元素或组件的引用。...所以在默认情况下，组件的 refs 指向一个空对象。可以先在组件上加上 ref="名字" ，然后通过 this.$refs.名字获取相应元素并进行操作。...$refs.but.click(); }, }, } 3.vue3中获取当前组件的实例对象 1.创建 ref 变量，给组件或元素绑定 ref 属性值为该变量 2....元素',container.value) })

5.4K3 0

JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等

1.操作元素 JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的） 2....常用元素的属性操作 1. innerText、 innerhTML 改变元素内容 2. src、href 3. id、alt、title 获取属性的值元素对象.属性名设置属性的值元素对象....元素对象.属性名设置属性的值元素对象.属性名 = 值表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。...元素对象.style.样式属性 = 值; 注意: 1.JS里面的样式采取驼峰命名法比如fontSize、backgroundColor 2.JS修改style样式操作,产生的是行内样式，CSS权重比较高...我们可以通过修改元素的className更改元素的样式适合于样式较多或者功能复杂的情况 // 3.

2.9K4 1

关于动态创建DOM元素的问题

在我们实际的项目之中，相信有很多的朋友直接使用了以下的格式创建DOM元素 javascript"> document.getElementById("...也就是说"永远不要在页面加载时改变页面的Dom模型". (2) 使用修改HTML内容添加元素, 不符合Dom标准....在实际工作中也碰到过使用这种方法修改内容后, 某些浏览器中并不能立刻显示添加的元素, 因为不同浏览器的显示引擎是不同的....但是如果我们使用Dom的CreateElement创建对象, 在所有的浏览器中几乎都可以. 但是在jQuery中如果传入的而是一个完整的HTML字符串, 内部也是使用innerHTML....关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子: 第一种正确方式： //使用Dom标准创建元素 var select = document.createElement("select

2.2K2 0

【Web APIs】DOM 文档对象模型 ② ( 根据标签名获取 DOM 元素 - getElementsByTagName 函数 | 获取指定标签下的 DOM 元素 )

本博客相关参考文档 : WebAPIs 参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/API getElementById 函数参考文档 : https...对象 ; 该对象中的 DOM 元素顺序是按照 DOM 树的 DOM 元素发现顺序进行排列的 ; HTMLCollection 对象是一个 " 伪数组 " , 有数组长度 , 也可以使用索引下标访问...函数 , 可以获取到封装了多个 Element DOM 元素的 HTMLCollection 对象 ; HTMLCollection 对象是时刻动态改变的 , 如果 HTML 文档结构发生了改变...DOM 元素 console.log(elements[i]); // 改变 DOM 元素 elements[i].innerHTML...对应的 Element 元素 , 如果指向获取某一个指定标签下的 DOM 元素 , 则需要如下步骤 : 首先 , 通过调用 document.getElementById 函数 , 获取指定标签对应的

971 0

JavaScript 技术篇-js获取document的几种方式，js获取dom元素的常用方法。

第一类：通过属性获取。

通过 document.getElementById("fash") 获取到p页签。

6.8K1 0

JavaScript DOM 节点的拷贝、删除

拷贝一个节点相当于将一个节点作为对象存放在内存中，这个对象可以被其他的诸如 appendChild 等操作来使用。...而节点删除则只能通过一个 removeChild 来实现，所以要删除某个元素，首先要获取这个元素的父节点。

2932 0

JavaScript 中的 DOM 和 BOM

JavaScript 与 ECMAScript 关系 JavaScript = ECMAScript + DOM + BOM 1.ECMAScript 为 JavaScript 提供核心语言功能，是由欧洲计算机制造商协会...从根本上将 BOM 只处理浏览器窗口和框架，但是人们习惯把针对浏览器的 JavaScript 扩展也算作 BOM 的一部分，例如：浏览器弹出新窗口的功能；移动、缩放和关闭浏览器窗口的功能；navigator...DOM2 在原有的 DOM 基础上又扩充了鼠标和用户界面事件、范围、遍历（迭代 DOM 文档的方法）等细分模块，并且通过对象接口增加了对 CSS 的支持。...DOM2 级引入的模块有： - DOM 视图（DOM Views）：定义了追踪不同文档的视图接口。 - DOM 事件（DOM Events）：定义了事件和事件处理的接口。...- DOM 样式（DOM Style）：定义了基于 CSS 为元素样式的接口。 - DOM 遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口。

4732 0

Javascript中的DOM节点类型

document.body指向元素 document.head document.charset document.URL; document.title; document.domain...document.links; document.forms; document.createElement(‘div’) document.activeElement: 指向获得焦点的元素...complete Element类型 var elem = document.getElementById(‘elem_id’); elem.nodeType = 1 elem.nodeName 为元素的标签名...elem.attributes.setNamedItem(new_attr) elem.getElementsByTagName() elem.dataset // data- 前缀自定义的属性及属性值...elem.innerHTML // 元素的内容（所有子节点HTML） elem.scrollIntoView() //将元素滚动至可见视图中 elem.style.width elem.style

661 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭