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

不使用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. MySQL 的 4 种隔离级别，你了解么？

    1.什么是事务 事务是应用程序中一系列严密的操作,所有操作必须成功完成,否则在每个操作中所作的所有更改都会被撤消.也就是事务具有原子性,一个事务中的一系列的操作要么全部成功,要么一个都不做.事务的结束 ...

  2. pytorch 建立模型的几种方法

    利用pytorch来构建网络模型,常用的有如下三种方式 前向传播网络具有如下结构: 卷积层-->Relu层-->池化层-->全连接层-->Relu层 对各Conv2d和Line ...

  3. 2019-2020-1 20199305《Linux内核原理与分析》第四周作业

    MenuOS的构造 一.Linux源代码的关键目录 block:存放块设备管理代码: crypto:存放常见加密算法的C语言代码: Documentation:存放一些文档: drivers:驱动目录 ...

  4. jQuery的延迟对象（十一）

    在前端这个领域里面,ajax请求非常常见. // 前提引入jquery $.ajax({ type: 'get', url: '/path/to/data', success: function (r ...

  5. 数据库访问接口（ODBC，OLEDB，ADO）

    数据库访问接口发展历史 ODBC历史 ODBC(Open Database Connectivity,开放数据库互连).要了解ODBC是什么,先了解一下数据库连接的相关知识.在最开始连接数据库时,由于 ...

  6. 向技术领先的华为说No，就是对国家的通信前景说No！

    历史已经证明了,任何一项可以加速人员.物资.能源.金钱.信息迁移的技术,都会让社会原有的生产力成倍地增长.中国在互联网.移动互联网保持令整个世界震惊的飞速发展,以BAT为首的诸多商业帝国建立,还有人们 ...

  7. 基于Django的Rest Framework框架的分页组件

    本文目录 一 简单分页(查看第n页,每页显示n条) 二 偏移分页(在第n个位置,向后查看n条数据) 三 CursorPagination(加密分页,只能看上一页和下一页,速度快) 回到目录 一 简单分 ...

  8. source vimrc的时候报错：.vimrc:1: command not found: syntax

    vim的配置如下: 1 syntax enable //语法高亮 2 set number //显示行号 3 set cursorline //突出显示当前行 4 set ruler //打开状态栏标 ...

  9. IT兄弟连 Java语法教程 数据类型1

    Java是强类型化的语言 Java是一种强类型话的语言,在开始时指出这一点是很重要的.实际上,Java的安全性和健壮性正是部分来自这一事实.强类型意味着什么呢?首先,每个变量都具有一种类型,每个表达式 ...

  10. Java修饰符作用域

    作用域 当前类 同一package 子孙类 其他package public √ √ √ √ protected √ √ √ × friendly √ √ × × private √ × × × 修饰 ...