今天无意中发现个让我很吃惊的问题。

不使用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元素的更多相关文章

  1. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

  2. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  3. 跨frame操作dom元素

    今天,一群友问到跨frame操作dom元素的问题.于是写了个demo,在此发表在博客里面,供其他同道中人参考! 创建child.html内容如下: <!DOCTYPE HTML PUBLIC & ...

  4. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

  5. JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

  6. jquery 操作DOM元素(1)

    .clone() 创建一个匹配的元素集合的深度拷贝. .clone([withDataAndEvents]) withDataAndEvents (默认为false) 一个Boolean 表示是否会复 ...

  7. JS/JQuery操作DOM元素笔记

    原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...

  8. Js操作DOM元素及获取浏览器高宽

    在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM ...

  9. vue如何获取并操作DOM元素

    原文地址 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加re ...

随机推荐

  1. 关于git远程

    1.注册github的账户(官网;github.com ) 2.新建一个项目(在右上角点击+,选择New repository ),输入项目名和项目描述,其他可根据自己项目选填,创建完成后可查看到ht ...

  2. Django celery 使用

    0.安装包 cachetools 3.1.1 celery 3.1.26.post2 celery-with-redis 3.0 certifi 2019.9.11 Django 2.2.6 djan ...

  3. HTML网页自动跳转(重定向)

    HTML网页自动跳转(重定向) meta <head> <meta http-equiv="refresh" content="5;url=https: ...

  4. LVS 负载均衡——直接路由模式DR

    一.配置的网络拓扑结构图 二.配置lvs服务器 配置虚拟网卡地址(VIP地址) [root@localhost ~]# ifconfig eno16777728: 192.168.200.253 ne ...

  5. 【Notepad++】notepad++主题和字体设置(非常好看舒服的)

    #效果图 1.字体:Courier New 字号:14号字体 2.字体:Consolas 字号:14号字体 #设置方法 1.设置---语言格式设置 2.选择主题,同时勾选“使用全局字体”“使用全局字体 ...

  6. SQL Server设置数据库为状态为只读

    问题描述: 有时候我们为了防止连接数据库再链接插入数据,就可以把库设置为只读模式 灰色后面显示只读说明已经是只读状态了 1.设置为只读状态 USE [master] GO ALTER DATABASE ...

  7. SqlServer ----- 根据查询语句创建视图

    我们都知道视图的本质就是查询语句,那么就可以根据查询语句创建视图, 前提 知道视图的组成,已经写好的sql 语句,多表或单表的查询语句,将查询语句变成视图. 所以视图可以由单表,多表或视图加表构成. ...

  8. 【前端知识体系-NodeJS相关】浅谈NodeJS中间件

    1. 中间件到底是个什么东西呢? [!NOTE] 中间件其是一个函数,在响应发送之前对请求进行一些操作 function middleware(req,res,next){ // 做该干的事 // 做 ...

  9. zookeeper — 实现分布式锁

    一.前言 在之前的文章中介绍过分布式锁的特点和利用Redis实现简单的分布式锁.但是分布式锁的实现还有很多其他方式,但是万变不离其宗,始终遵循一个特点:同一时刻只能有一个操作获取.这篇文章主要介绍如何 ...

  10. springcloud微服务多节点高性能、高可用、高并发部署

    1. 共有三个服务 discovery服务,domain服务,gateway服务. discovery服务是用来注册其他服务的,作为服务治理用. domain服务是主业务服务. gateway服务是所 ...