2Lazy.org It’s time 2 kill lazy ones …

DOM学习笔记(二)

Published on 15/01/08
by 小羊

首先推荐一本比较好的教程，来自于Jeremy Keith的DOM Scripting，当然我读的是翻译之后的中文版本，JavaScript DOM编程艺术。翻译质量来还算不错，最值得推荐的，便是著者将DOM最主要最精华的部分化解在了几个专业级别的案例应用中进行相熟，思路清晰、循序渐进而不嫌枯燥，甚至可说引人入胜。此外，本书也是贯串了标准化、内容与行为分离、预留退路等等能显著提升用户体验的理念与方法，实属难得。对于入门学习来讲，虽有些许难度但是仍然建议初学者参考。

Day.2 I wanna this, I wanna that!

在DOM的世界中，获取元素及其属性和内容是最基本的操作。前一篇也说过，DOM实际上是构建了一个页面内所有元素及其属性、内容的索引，那么，我们通过这个索引来获取到所需要处理的东西无疑是探囊取物般简单。一般来说，通过JavaScript，我们是从两个基本方法开始的——所谓的方法，就是对文档中对象进行操作的手段——这两个方法便是：getElementById()和getElementsByTagName()方法。

作为一种相当接近自然语言的编程语言，这两个方法的意义很明显，通过html中预先赋予的id属性或是html中的结构标签来取得元素。其应用形如：

document.getElementById(“shoplist”)
document.getElementsByTagName(“li”)

其中，第一行的代码获取的，是整个文档中id=”shoplist”的元素，而第二行代码获得的，是整个文档中所有的列表元素（li）。

值得注意的有几点，其一是，（）内的参数，应该是一个字符串，即是说，引号是必需的，无论是单引号还是双引号（我个人比较喜欢双引号，因为在有些编辑器中，两个单引号看起来往往和一个双引号一模一样，在复杂程序中，往往会看错而忘记关闭引号，导致出错）。

而其二便是，“getElement”和“getElements”的区别告诉我们，getElementById()所取得的，是一个单个的元素，而另一个，则（有可能）是复数个的元素（一组元素）。因为在一个符合标准规范的页面中，id属性的值是不能重复的，是一个唯一的值。在疯狂的状态下，我们可以为html页面上每一个元素都赋上一个不同的id值，这样只要用getElementById()方法就可以找到任何需要的元素。但是显然这样的方法是不现实的而且笨重的，同时会造成页面代码的冗余——就像css界泛滥的“div症（divitus）”和“class症（classitis）”一样。id更像是一个挂钩，链接着css，javascript以及DOM。通过getElementById()，getElementsByTagName()以及javascript中循环、判断语句的使用，找到任何的元素都不是问题！

That's it. What Next?

Please leave your comment so we know what you think about this article. Trackback URL: DOM学习笔记(二).