Javascript,html,css学习过程中的小细节。——持续更新——

1、关于.value和.innerHTML的区别。

.value

取回值；

.innerHTML

取回文本。

innerHTML输入/出的该DOM的内部纯HTML代码（流）

value(innerText)

输入/出的是转义的文本（字符串）

表单元素用value，其他非输入（表单）类元素用innerHTML:如div, span,em等

简单的说.innerHTML所控制的是对应ID所在处的标签起始位置和结束位置中间的内容a。如:

<span>a</span>

。

2、关于==双等号和===三等号的区别。

== equality 等同，=== identity 恒等。

==只要值相等就能用==；

===除了值相等外还需要值得类型也相等才相等。

3、关于网页优化。

CSS推荐http://csscompressor.com/，可以在线压缩，非常方便。

JavaScrip的话推荐http://tool.css-js.com/，这个网站很不错，在线压缩同时提供多种压缩引擎选择，也推出了CSS压缩和图片转BASE64的功能，十分强大！

4、关于函数中

this

指向的改变。

在一个函数中，如果插入了一个新的函数，尤其是像

setTimeou

t或者是

addEventListener

这种的，在这些函数里面this就会指向新的变量。

对此一直都用在新函数之前将旧函数或旧对象的this保存到一个新变量里面，以供调用。

function oldFunc(){
var self = this;
var timeout = setTimeout(function(){
//如果要操作oldFunc就直接对self进行操作就行了
//this已经指向这个timeout了
},1000);
}

但是有更方便的方法，那就是ES5的

bind

方法。

var obj = {
name : 'frog'
}

document.addEventListener('click',function(){
alert(this.name); // frog
}.bind(obj),false);

上面代码如果不用

bind

的话，

this

就会指向global变量了。除了

bind

之外还有

call

,

apply

方法，可以参考几个链接。

javascript中call,apply,bind的用法对比分析

JavaScript中bind、call、apply函数用法详解

MDN Function.prototype.bind()

ECMAScript 定义类或对象—w3school

5、关于chm文件的使用

在学习过程中我发现每次碰到有不懂得或者记不清的代码都要去百度搜，比如忘了box-shadow的参数是哪些了，要去百度先搜box-shadow，然后一般会进入w3cschool的相关网站查看，因为在w3cschool里面的自带的搜索实在是用不了。

因此每次浏览网站的时候我都会保留一个w3cschool的网页，以供快速的查看文档。偶然发现有人做出了现成的chm文档，可以在chm文档里面快速的查找相应代码，非常NB，于是乎便去网上下载了chm，但是发现下载下来的chm打开后右边都是空的，一百度才发现要右键——解除锁定才能正常查看。

经检验此方法有效，顺带附上百度经验。

6、previousSibling和nextSibling的坑

nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

语法：nodeObject.nextSibling

说明：如果无此节点，则该属性返回 null。

previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

语法：nodeObject.previousSibling

说明：如果无此节点，则该属性返回 null。

注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。

当我这么写的时候

<div id='123'>
<input type="radio" name='radio' />
<input type="text" value="选项一" />
<span onclick='deleSelf()'>X</span>
</div>
<div>
<input type="radio" name='radio' />
<input type="text" value="选项二" />
<span onclick='deleSelf()'>X</span>
</div>

想通过判断DIV的前后有无节点来确定这个DIV是否是最后一个单独的DIV

function deleSelf() {
var thisNode = event.target.parentNode;
console.log(thisNode.previousSibling)
}

结果

deleSelf()

浏览器反馈的是

#text

这么一个nodeType为3的节点。 通过测试发现，把第一个

</div>

和第二个

<div>

之间的空格去掉，就能正常读取了，但是这不是个办法，毕竟一旦用了一些美化的工具之后，极其可能为这两个之间添加一个回车，这样的化到时候程序又要报错了。

一般应要用previousSibling等，连续用两次就可以了，但是这治标不治本容易出事。网上找参考的时候搜到了这篇文章，里面提供了解决的方法很实用，就是精准找Element元素就行了，这样自然过滤掉了text节点。

javascript 中的nextSibling和previousSibling使用注意事项

firstChild,lastChild,nextSibling,previousSibling都会将空格或者换行当做节点处理，但是有代替属性

所以为了准确地找到相应的元素，会用

firstElementChild,

lastElementChild,

nextElementSibling,

previousElementSibling

兼容的写法，这是JavaScript自带的属性。

但坏消息是IE6,7,8不兼容这些属性。IE9以上和火狐谷歌支持。

7、批量添加事件

常见的初学者没有理解作用域链出现的问题,如下这么写是错的

var divall = document.getElementsByTagName("div");
for (i = 0; i < divall.length; i++) {
divall[i].onclick=function(i){
divall[i].setAttribute("class","ccc");
}
}

一般写法

for (i = 0; i < divall.length; i++) {
divall[i].onclick=function(i){
return function(){
divall[i].setAttribute("class","ccc");
}()
}(i)
}

或者在这个情景中

for (i = 0; i < divall.length; i++) {
divall[i].onclick=function(i){
this.setAttribute("class","ccc");
}
}

8、关于作用域问题

这里面，perObj的data里面储存的两个数组都会变成radios里面的最后一项，查询后发现说是作用域问题，看到一个类似问题和解决的方案后链接，跟着改了一下，改成如下图就没问题了。



没错，就是把datailObj的声明放到for循环里面就OK了，具体的作用域的作用还没明白，以后看书看看。

9、关于event事件的兼容

window.event 只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的event只能在事件发生的现场使用。

function isInt(e){
var oEvent = e || window.event; //用来判断是IE或者FF，并赋值给对象。
var oTarget = oEvent.target || oEvent.srcElement; //用来取IE或者FF的对象。
}

<input type='button' value='click' onclick='isInt(e)' />

上面说的是比较简单的方法，其他方法可以参考这两个链接

Event事件的兼容性

Firefox不支持event解决方法