不获取元素，直接使用id操作dom元素

Posted 2020-08-09 liyan.web

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了不获取元素，直接使用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>