不获取元素,直接使用id操作dom元素
今天无意中发现个让我很吃惊的问题。
不使用getElementById方法,也可以用id直接操作有id的元素。
继续搜索后,发现name也可以直接操作...
这让我大感意外,了解以后,忍不住写点东西记录下来。
如果dom元素的id名称不和js内置属性或全局变量重名的话,该名称自动成为window对象的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素</title>
</head>
<body>
<div id="box01">01</div>
<div id="box02">02</div>
<div id="box03">03</div>
<script>
var box01=document.getElementById('box01');
console.log(box01);//id为的box01元素节点
console.log(box02.innerHTML);//02
console.log(box02);//id为的box02元素节点
box02.style.color="red";
</script>
</body>
</html>
最让我意外的是浏览器支持程度,Firefox、chrome支持不意外,意外的是IE居然7-11都支持
看网上的说法是,这个是IE首先支持,火狐谷歌后面才支持的。不过现在还未形成标准,为了保险,还是不用的好。
不过看各大浏览器都支持,觉得也许以后这个有可能直接成标准也说不定哈,到时候又可以省几个代码0.0
对了,还有name的
不获取元素,直接使用id操作dom元素的更多相关文章
- jQuery操作DOM元素
作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- 跨frame操作dom元素
今天,一群友问到跨frame操作dom元素的问题.于是写了个demo,在此发表在博客里面,供其他同道中人参考! 创建child.html内容如下: <!DOCTYPE HTML PUBLIC & ...
- 【面试必备】javascript操作DOM元素
前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...
- JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)
JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...
- jquery 操作DOM元素(1)
.clone() 创建一个匹配的元素集合的深度拷贝. .clone([withDataAndEvents]) withDataAndEvents (默认为false) 一个Boolean 表示是否会复 ...
- JS/JQuery操作DOM元素笔记
原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...
- Js操作DOM元素及获取浏览器高宽
在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM ...
- vue如何获取并操作DOM元素
原文地址 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加re ...
随机推荐
- golang中的viper示例
这是第二次实操viper了, 年纪大了就多练练,才能记住. http://go.coder55.com/article/6589 https://github.com/spf13/viper pack ...
- python的路径问题
## 文件路径出错问题 """ 如何获取与当前文件相关的地址 """ import os # 当前文件的完整路径 print(__file_ ...
- linux 判断文件夹或文件是否存在
文件夹不存在则创建 if [ ! -d "/data/" ];then mkdir /data else echo "文件夹已经存在" fi 文件存在则删除 i ...
- Python ASCII码与字符相互转换
ASCII ((American Standard Code for Information Interchange): 美国信息交换标准代码)是基于拉丁字母的一套电脑编码系统,主要用于显示现代英语和 ...
- 掌握Spring REST TypeScript生成器
在优锐课的java分享中,讨论了关于Spring REST TypeScript生成器,该生成器创建反映后端模型和REST服务的模型和服务.码了很多干货,分享给大家参考学习. 我注意到网络开发人员创建 ...
- 纯js的统计图插件-统计图
第一次写博客,写的不到望大家见谅! 今天给大家分享一个纯js的插件(统计图),有知道的可以在下面评论一起谈论一下,刚学着的时候,我是看了好久才看懂的一个基本结构,到后来我才知道原来直接去原网站上找到复 ...
- MySQL数据库查询所有表名
查找指定库中所有表名 select table_name from information_schema.tables where table_schema='db_name'; 注:替换db_nam ...
- linux安装IB驱动方法
一.准备 1.Linux操作系统7.6(根据实际情况变更,此处用redhat7.6系统举例) 2.驱动:MLNX_OFED_LINUX-4.6-1.0.1.1-rhel7.6-x86_64.tgz(根 ...
- 脚本自动统计安卓log中Anr、Crash等出现的数量(Python)
作为测试,在测试工作中一定会经常抓log,有时log收集时间很长,导致log很大,可能达到几G,想找到能打开如此大的log文件的工具都会变得困难:即使log不大时,我们可以直接把log发给开发同学去分 ...
- crm-4权限
1.rbac-优化login函数 因为login是业务逻辑 ,而rbac是个组件 ,将rbac在login的代码分离 ###初始化权限函数分离出去 rbac/service/permission fr ...