【前端学习笔记】html元素中的id属性可以直接用JS调用

最新推荐文章于 2023-04-13 20:17:06 发布
最新推荐文章于 2023-04-13 20:17:06 发布
阅读量676 收藏 1
点赞数 1
分类专栏： 前端学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyandyz001/article/details/106390589
版权

今天在学习的时候发现有一个写法 没见过

就是明明没有去用任何代码进行元素的选择却可以直接更改一个标签的内容

仔细一看，原来是直接使用的标签上的id属性

查了一下，发现原来是这样的：

如果dom元素的id名称不和js内置属性或全局变量重名的话，该名称自动成为window对象的属性，所以可以直接用来操作dom。

 

这样以后写代码的时候可以少写几行了，哈哈哈

烤肉飞熊
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
为什么给html标签定义了id，就可以在js中（浏览器环境）直接通过id引用这个dom元素？
一条宝鱼的专栏
08-09 674
问题 只要标签有id这个属性，不使用getElementById方法，也可以直接用id获取dom元素。 解惑 经过一波搜索及查资料，原因大概是：如果dom元素的id名称不和js内置属性或全局变量重名的话，该名称自动成为window对象的属性，所以可以直接用来操作dom。看网上的说法是，这个是IE首先支持，火狐谷歌后面才支持的。不过现在还未形成标准，为了保险，还是不用的好。不过看各大浏览器都支持，...
js中可以直接用id调用函数吗？
吉帅振博客
07-13 4909
在JavaScript中，标准的id选择器调用语法是：document.getElementById('myid').style.width = '100px';但是，今天发现，直接用id名字调用竟然也可以正确运行：myid.style.width = '100px';最后找度娘问了问，问题的答案是：这个最初是 IE 里面的，后来 firefox chrome 好像也支持，但是不建议使用。这个不是...
很少用的前端基础知识---id直接在js中使用
zhangpu_的博客
09-20 1597
很少用的前端基础知识。id直接在js中使用 今天做了个模拟题，一个特别简单的程序，但是想来想去却憋了半天。越是简单的问题，越想表现一下自己。唉，不过还是想着做好吧，既然做完了，那就总结一下吧。 题目是这样的，实现一个这样的效果，如下两图。 看着很简单哈，可是写真正实现起来总是踩坑。 废话也不多说了，当时就想把那些奇奇怪怪的知识都用上，直接上代码吧。我把知识点也写在了里面。 <!DOCTYPE html> <html lang="en"> <head> &lt
js获取html id内容吗,js中通过id读写内容和调用函数的问题
weixin_39980002的博客
06-10 381
我也不知道怎么用文字去描述我的这个问题，所以可能问题的题目不能很好的表达出我的疑问，这里先给点进来看看的各位程序猿哥哥道谢啦(⌒∇⌒)是这样的，我写了一个简单的单击Save按钮后写入localStorage，然后单击Load从localStorage中读取信息并写入一个div里面的小功能,先上代码:Titlefunction onLoad(){// var btn_save = do...
html获取name,javascript通过元素id和name直接取得元素的方法
weixin_42118011的博客
06-07 1180
本文实例讲述了javascript通过元素id和name直接取得元素的方法。分享给大家供大家参考。具体分析如下：我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化，貌似十分高深莫测，其实也不然。而且js本身自带了对于特殊元素的简便选取的方法，下面就为大家简单介绍下。在html中，一般最直接的辨别html元素使用的是name和id属性，两者有着细微的不同：id必须页面唯一，但nam...
我的前端学习笔记
01-06
这篇前端学习笔记主要涉及到HTML5和CSS3的相关知识，特别是Canvas元素的使用。Canvas是HTML5引入的一个重要特性，允许动态生成图像，非常适合用于创建图形、动画或者游戏等交互式内容。 首先，我们看到CSS部分定义...
前端主流框架vue学习笔记第一篇
12-10
Vue.js 是一款轻量级且功能强大的前端JavaScript框架，由尤雨溪开发，自2014年发布以来迅速成为前端开发领域的热门选择。Vue.js 吸取了其他框架如Knockout、Angular、React以及Avalon等的优点，提供了多种开发模式，...
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
叩丁狼前端开发笔记，html,css,js,node.js,vue,react
03-26
在IT行业中，前端开发是构建Web应用程序不可或缺的一部分，它涉及到用户与网站交互的界面设计和实现。...通过“叩丁狼前端开发笔记汇总”，开发者可以深入学习和掌握这些领域的知识，提升前端开发能力。
前端学习笔记，做一个简单的网站-请自定义一个注册事件的兼容函数，要求兼容三种注册事件方法，学习代码
最新发布
06-21
我们将主要关注三种常见的事件注册方法：`addEventListener`、`attachEvent` 和直接在元素上设置 `on*` 属性。 首先，`addEventListener` 是 W3C 标准推荐的事件处理方式，适用于所有支持 W3C DOM Level 2 的浏览器...
html id属性怎么引用,HTML中id属性的有效值是什么？
weixin_36270894的博客
06-04 628
HTML5：ID和类属性的允许值从HTML5开始，对ID值的唯一限制是：必须在文档中是唯一的不得包含任何空格字符必须包含至少一个字符类似的规则适用于类(当然，除了唯一性)。所以值可以是所有数字，只有一位数，只是标点字符，包括特殊字符，等等。只是没有空格。这与HTML4非常不同。在HTML 4中，ID值必须以字母开头，然后只能使用字母，数字，连字符，下划线，冒号和句点。在HTML5中，这些是有效的：...
html id属性怎么引用,HTML id 属性
weixin_32016633的博客
06-04 682
实例通过 JavaScript 利用 id 属性来处理一段文本： function displayResult(){document.getElementById("myHeader").innerHTML="Have a nice day!";}Hello World!Change text 运行一下 »本章节底部包含更多实例。浏览器支持 所有主流浏览器都支持 id 属性定义和用法id 属性规定...
Html元素的Id终不能包含点
aitcax的专栏
08-22 1827
Html的Id不能使用‘_’<div id="qw_e" />1 <div id="qw.e" />2 <div id="qw e" />3这三种id的写法，很明显第三种是不对的，因为id不能以空格分隔。 需要注意的是，第一种写法也是不行的。 使用jquery的选择器时 $("#qw_e") 1 $("#qw.e") 2 $("#qw e") 3只有第二种是可以拿到正确的div。
HTML不同页面调用ID,同一个页面用多个id有什么影响
weixin_42355256的博客
06-03 764
我们知道在样式表定义一个样式的时候，可以定义id也可以定义class，例如：ID方法：#test{color:#333333}，在页面中调用内容CLASS方法：.test{color:#333333}，在页面中调用内容id一个页面只可以使用一次，class可以多次引用。有网友问，id和class好象没什么区别，我在页面中用了多个id在IE中显示也正常，用多个id有什么影响吗？回答：第一影响就是不能...
前端学习8：HTML块、类、Id
RainstormGod的博客
04-13 900
id属性用于为 HTML 元素指定唯一的 idid 属性的值在 HTML 文档中必须是唯一的CSS 和 JavaScript 可使用id属性来选取元素或设置特定元素的样式id属性的值区分大小写id属性还可用于创建 HTML 书签JavaScript 可以使用getElementById() 方法访问拥有特定 id 的元素。
前端笔记-使用vue绑定id使得组件更加灵活（在使用echarts时常用）
IT1995的博客
08-08 7191
目录 基本概念 代码与实例 基本概念 这个问题是在我使用echarts时出现的，因为echarts有这样的一个函数（官方实例） let myChart = this.$echarts.init(document.getElementById(this.idStr)); 这样的画就需要div的id号，为了使得这个id比较灵活，可以使用vue的绑定:id或者v-bind...
js 如何调用另一个页面id 内容
热门推荐
mayaofr的专栏
09-25 1万+
点A页面用B页面来增加数据。通常情况下，这种需求是要通过服务器端的程序来实现的。如果硬是要用js复制内容，可以试试以下方法。 第一种： document.getElementById("show").innerHTML=window.opener.document.getElementById("abc").innerHTML; 第二种： A页面写入Cookie，B页面读取Cookie。这是比较
web前端学习（六）—— HTML中元素的id属性、div和span布局
m0_55637498的博客
12-11 2605
一、id属性 1、在HTML文档中，任何元素（节点）都有id属性，id属性是该节点的唯一标识，所以在同一个HTML文档中id值不能重复 2、注意：表单提交数据的时候，只和name有关系，和id无关 3、id有什么用？ javascript语言可以对HTML文档中的任意节点进行增删改，那么在增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象 id的存在让我们获取元素（节点）更方便 4、HTML文档是一颗树，树上有很多节点，每一个节点都有唯一的id ja...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值