《JavaScript高级程序设计》读书笔记：classList 与 readyState

继续学习《JavaScript高级程序设计》，体会原生 JavaScript 之美。今天记录2个有用的属性。 1.classList HTML5 对DOM操作 class 做了优化，增加了 classList 属性，从此再也不用对 className 做字符串操作了。它有4个方法 add // 增加一条属性（已经存在就不添加） contains // 判断属性是否存在 remove // 删除属性 toggle // 如果存在就删除，不存在就添加。这个好玩～ 2.readyState 曾几何时，使用 onload 方法来判断页面有没有加载完毕，现在有了 document.readyState , 一切就简单了。 其中书中的内容不完整（P292），这个属性目前已经有了3个值（2018-02-24） loading //页面还在加载 interactive //文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。 complete // 文档和所有子资源已完成加载。状态表示 load 事件即将被触发。 之前使用 m-React 的时候使用的是 onload 方法，如果下次有机会再来测试一波 readyState

html == document.childNodes[0] ? 不是

《JavaScript高级程序设计》（第三版）中发现了一个问题，在P254中有这么一句 html === document.childNodes[0] 作者当时写书的时候，document.childNodes[0] 返回的是html元素，也就是说返回 true， 但我在读的时候试验了一下，发现是不对的。 在Chrome v63 及 Firfox v58.0 中document.childNodes[0]均不是html元素，而是 documentType。

document.implementation.hasFeature总是返回true

在读《JavaScript高级程序设计》（第三版）中发现了document.implementation.hasFeature 方法，这个方法功能很强大，可以检测到浏览器是否支持某些功能。（P259） 于是我赶紧使用了一下，发现： document.implementation.hasFeature('Range',"40000000.0") 输出 true why MDN上说，这个方法已经废弃了。DOMImplementation.hasFeature() - Web APIs | MDN 所以不要用了。 so，读书要趁早。

通过ua判断微信浏览器打开

最近做了一个小需求，需要判断网页是不是在微信内打开的，打印了一下微信浏览器的UA，写了一个简单的小函数。 function checkWechatBrowser () { var userAgent = navigator.userAgent.toLowerCase(); return (/MicroMessenger/ig).test(userAgent); }; 暂时可用。 PHP 版本 if( !preg_match('/micromessenger/i', strtolower($_SERVER['HTTP_USER_AGENT'])) ) { return true; }

JavaScript中forEach无法遍历空位

说一个小坑吧。

之前在看《JavaScript高级程序设计》的时候，看到这样一句话：“它只是对数组中的每一项运行传入的函数，这个方法没有返回值，本质上与使用for循环迭代数组一样。”（P97）

继续阅读

Date.parse() method not work in IOS

Maybe it’s a big bug that I had experienced recently, when I use JavaScript method Date.parse('2016-10-24 18:36'), two different outputs in Android and IOS. In Android it output the right timestamp which i need, but in IOS, it can not get the timestamp.

继续阅读

Useful jQuery .eq() method

I want to mark a specific li tag in the ul, the HTML code is like this:

<ul>
  <li>li-1</li>
  <li>li-2</li>
  <li>li-3</li>
  <li>li-4</li>
</ul>

继续阅读