转行前端自我学习养成记——js学习记录篇

本文链接：https://blog.csdn.net/ludios/article/details/79040600

（一）<DOM编程艺术>学习记录

某一天在腾讯课堂听了一位大牛的公开课，忽然发觉自己的学习方式有点低效，于是根据他的建议，开始改变，主要有下面两点：

（1）定期写技术博客，将学到的遇到的写出来，以此加深理解，说不定还能帮到需要帮助的人；“看懂是别人的，能讲出来让别人听懂才是自己的！”

（2）每年去面试一两次（或更多，因人而异），了解日新月异的技术，了解市场需求，没有比去面试几把更有效率的了。企业的技术更新人才需求，都是跟市场挂钩的，所以面试完，基本也能知道市场人才技术需求了，而且还能让面试官（一般都是主管总监级别）指出不足，何乐不为，而且万一过了一家非常好的公司的面试呢，岂不是人生赢家？？

鉴于水平有限，不提前去找虐，但是第一条却是实实在在能提高自己的方法，于是在这里写下第一篇技术文章。

其实在看<DOM编程艺术>这本书之前，已经花一个月看完w3school上面的HTML、css、js相关内容以及headfirst HTML这本书了，也有一点基础了，所以书本开始的内容跳得飞快，那种酸爽，嗨的不要不要的。然后就在前几天，灾难降临。一个常识问题把我卡了一晚上……

什么问题呢？？？

DOM获取节点属性不同方式的差异与局限！！！大家都知道getAttribute()与setAttribute()能获取或改变（或创建新的）元素节点的内联属性，也就是直接写在元素标签里的属性值（不包括style属性！），但是obj.style.property方法呢？懂的人都知道，当然是获取元素标签里的内联style属性啊。是啊，多么简单啊，但是w3school上面没写啊，<DOM>这本书只是几句话带过啊，我辣么嗨，根本没去管啊，于是乎，在第十章设置动画属性的时候，被坑出了翔。傻傻的用外部样式表设置好元素位置属性，然后用obj.style.position去获取去改变，真是naive，永远运行不了，通过alert(obj.style)方法去验证得到永远是为空，console控制台永远提示style undefined，一开始还以为是我的js文件没有在DOM完全生成就运行，用了Window.onload，失败，将js文件放到</body>前面，失败，当时想到难道是获取不到属性？于是把style属性设置放在<head>标签内，结果还是失败！仔仔细细按照书上的代码敲，还是失败，当时内心无比崩溃，问题到底出在哪？内心无数个问号，为何跟书上“一模一样”（注意用了双引号）的代码就是运行不了。终于，在我崩溃的边缘，我看到了一行字：

obj.style.property方法只能获取元素的内联属性！！！获取不到外部样式表与内嵌样式表属性（原话不一定是这样，但八九不离十，请看书本第九章），我有黑人问号了，书里明明用了啊，然后我又看到，书里代码是先用obj.style.property设置了节点属性，才进行获取的！！！

原来啊，这种方法只能获取到内嵌属性跟这种方法设置的属性值！终于豁然开朗，将代码稍微一改，立马成功，内心是又激动又抓狂，就这么一个小小的问题，我TM居然纠结了两个多小时！两个多小时！两个多小时！怪自己，先入为主，曾经用这个方法获取过表单的value属性值，就以为可以通吃天下，血泪的教训，看书不能图快，尤其是基础知识不扎实的时候，每一句话书里每一个例子，都是需要琢磨的，血泪史。

谨以此纪念我的第一次自己挖坑自己跳的学习经历。