在JavaScript中,标准的id选择器调用语法是:

document.getElementById('myid').style.width = pc + "%";

但是,今天发现,直接用id名字调用竟然也可以正确运行:

myid.style.width = pc+"%";

最后找度娘问了问。

看到Mrcxt的博客里面有这个问题,问题的答案是:

这个最初是 IE 里面的,后来 firefox chrome 好像也支持了。 不建议使用,这个不是标准里面的,将来不一定支持。 而且代码容易写混乱了,multiNavItem1 属于全局作用域,而且你可以给他赋值,赋值之后就是那个新的值,不赋值就是那个元素的值,当有些 id 赋了值有些没有,那么有些就是这个 DOM 对象,有些不是,特别容易混乱了。

又找了找,也没找到官方的答案,不过应该和这差不多啦。

所以,最后的结论就是:可以这样用,但是不是标准推荐的,而且容易出错,所以还是不建议使用!

js获取dom节点之 id 获取的更多相关文章

  1. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

  2. vue的数据双向绑定和ref获取dom节点

    vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...

  3. React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  4. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

  5. ionic2 获取dom节点

    ionic2页面上面获取dom节点,可以直接用原生的方法,document.querySelector()等, 但是不建议这样使用,建议使用官方的.就是要在获取的节点上加上#name的属性(相当于ge ...

  6. Vue 双向数据绑定、事件介绍以及ref获取dom节点

    vue是一个MVVM的框架 M model V view MVVM  model改变会影响视图view,view改变会影响model 双向数据绑定必须在表单里面使用 //我发现在谷歌浏览器翻译后的网页 ...

  7. Omi框架学习之旅 - 获取DOM节点 及原理说明

    虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式. 这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获 ...

  8. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  9. js中DOM 节点的一些操作方法

    什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...

随机推荐

  1. js中 __proto__ 和 prototype

    js中的对象都有__proto__属性存在[隐式原型],注意是两个_, 1,javascript对象的__proto__指向的是该对象的构造函数的原型对象,即constructor.prototype ...

  2. springmvc 的@ResponseBody 如何使用JSONP?

    JSONP解释 在解释JSONP之前,我们需要了解下”同源策略“这个概念,这对理解跨域有帮助.基于安全的原因,浏览器是存在同源策略机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载额文 ...

  3. Markdown使用说明

    # Markdown 使用说明 Markdown 是一种**轻量级标记语言** 使用规则: 1. 标题   2. 列表 3. 引用 4. 图片与链接 5. 粗体与斜体 6.表格 7. 代码框 8. 分 ...

  4. P5596 【XR-4】题 笔记

    P5596 [XR-4]题 其实这题我昨天没做出来--所以今天写一下笔记 昨天我还信誓旦旦地说这一定是一道黑题\(OTZ\).果然菜是原罪. 另外吐槽一下科技楼机房频繁停电,昨天写了两小时的树刨和倍增 ...

  5. Altium Designer 20下载与安装教程

    目录 一.Altium Designer 20下载 二.Altium Designer 20安装 三.Altium Designer 20破解 四.Altium Designer 20汉化 作者:st ...

  6. 二、create-react-app自定义配置

    这里主要讲解添加less  和  实现Antd按需加载 首选需要执行npm run eject 暴露所有内建的配置 ,这是后面所有配置的基础,这个必须优先执行! 一.实现Antd按需加载 按需加载插件 ...

  7. 启动崩盘!IDEA 2020 无法启动的解决办法|赠送 IDEA 2020 新功能

    今天早上看到 IDEA 可以升级新版本,想着体验一下新功能,点击升级,然后全部项目工程无法打开. 报错信息如下: Cannot execute command No project found to ...

  8. Spring框架——IOC 自动装载

    IOC自动装载有两种形式 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...

  9. Journal of Proteome Research | Global Proteomic Analysis of Lysine Succinylation in Zebrafish (Danio rerio) (解读人:关姣)

    文献名:Global Proteomic Analysis of Lysine Succinylation in Zebrafish (Danio rerio)(斑马鱼赖氨酸琥珀酰化的全球蛋白质组学分 ...

  10. Bisecting GlcNAc is a general suppressor of terminal modification of N-glycan (解读人:王茹凯)

    文献名:Bisecting GlcNAc is a general suppressor of terminal modification of N-glycan(平分GlcNAc是N-聚糖末端修饰的 ...