欢迎光临
我们一直在努力

JavaScript | 震惊!documen.getElementById可以省略!

<div id="test"></div>
<script>
var attr = test.attributes.id;
//2 'id' 'test'
console.log(attr.nodeType,attr.nodeName,attr.nodeValue)
console.log(Node.ATTRIBUTE_NODE === 2);//true    
</script>

我是散人研,今天我是震惊君!

看上面的这段代码,我们直接在script中声明变量,然后通过test居然能直接找到id为test的标签!真的是震惊震惊震惊!

好吧,其实也没啥,只不过是因为DOM绘制完成后默认会把自身的对象交给window,然后我们可以直接在window中找到这个对象,而window又可以省略不写。

再来看一个“简单”的列子:

<input type="text" id="txt" value="震惊!!" />
<script>
    //打印input标签
    console.log(txt);
    //先获取属性值(一个动态对象列表),然后查找value属性的值(一个value对象),最后获取value的值
    console.log(window.txt.attributes.value);
</script>

首先通过txt直接找到了这个标签,然后根据txt获取attributes属性,最后就可以随心所欲的拿到标签中的数据了!

总的来说,如果以后看到别人的代码没有写document.getElementById,可千万别说别人代码写错了。

不过,还是不建议大家省略document,毕竟合格的前端工程师,需要熟悉并遵守W3C的规范。

赞(1) 打赏
未经允许不得转载:散人研 » JavaScript | 震惊!documen.getElementById可以省略!
分享到: 更多 (0)

评论 2

9 + 5 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    第二个代码块中attributes获取到的实际上是一个NamedNodeMap对象,它是动态的。另外要注意它是一个object,上面所说的“动态列表”有误。

    铃屋什造 8个月前 (04-03) 来自天朝的朋友 回复
    • 散人研

      @铃屋什造 对,的确是一个object,NamedNodeMap 对象表示一个无顺序的节点列表,称其为动态列表并无不妥当之处,但使用时仍要注意,它的的确确是一个动态的无序的节点列表,和对象十分相似。

      散人研 8个月前 (04-03) 来自天朝的朋友 回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏