js速记

前言

马上就要参加一个团队项目进行React的前端开发了。最近正在着手熟练React语法，然后发现本质上还是建立在对javascript的深刻理解上。市面上在js基础上封装出了非常多优秀的车轮，其中最被新手广泛使用的当属jquery。熟悉jquery语法的童鞋可能会觉得js的语法非常的啰嗦，但是在ES6的最新标准出现以后，js重获新生，可以造出更优秀的轮子了（笑）。所以在这里我重新整理一下js的基本知识点。

DOM相关

JS最大的特性就在于直接操纵网页上的DOM节点，从而实现网页的局部刷新而非全局刷新。这个特性决定了只要浏览器不死，js就还是会活跃在一线作为底层的实现优化浏览器的加载。当然曾经对JS的滥用也导致在一段时间内，人们对弹窗广告嗤之以鼻，这一段时期是JS的用户体验的低谷期。然而在爆炸互联网时期，随着浏览器承担了更多本来桌面应用承担的功能，JS的深度运用也逐渐被开发出来。下面是一些我整理的API关于直接操纵DOM节点的。

获得节点

getElementById(idname): 返回id值为idname的节点
getElementsByTagName(tagname) : 返回array对象，array中的元素为标签名是tagname的节点
getElementsByClassName(className) : 返回array对象，array中为class中包含className的节点

节点属性

getAttribute(attributeName) : 该方法作用于节点上，获得节点attributeName属性的内容
setAttribute(attributeName, value) : 该方法作用域节点上，修改节点attributeName属性的值
childNodes : 该属性可以用来获得任何一个元素的所有子元素，这个子元素包含元素节点，文本节点，属性节点
nodeType : 获得元素节点的属性值，元素节点属性值为1，属性节点的属性值为2，文本节点的属性值为3
nodeValue : 获得节点的属性值，注意一定要作用在文本节点上，否则得到的值是null，也可以用于赋值
firstChild : 获得第一个子节点，等价于node.childNodes[0]
lastChild : 获得最后子节点，等价于node.childNodes[childNodes.length-1]
nextSibling : 获得相邻的节点
parentNode : 父节点

增删节点

innerHTML : 获得或更改当前节点下的所有html代码
createElement(element) : 创建一个元素节点
createTextNode(text) : 创建一个文本节点
appendChild(child) : 将child节点插入当前节点的子节点
parentElement.insertBefore(newElement, targetElement) : 在已有元素前插入一个新元素。这个方法的设计有点累赘，可见js当初给自己的定位就是单纯的脚本语言啊。

Window

JS最顶层的全局属性就是Window，通过全局的window我们可以定义很多浏览器行为比如弹出窗口，弹出警告，跳转至新的窗口等。

window.open(url, name, features) : 创建新的浏览器窗口，这个方法的三个参数都是可选的。第一个参数是指新窗口的URL地址，如果忽略这个参数会弹出一个新的空白浏览窗。第二个参数是新窗口的名字，可以在代码里通过新窗口的名字和这个窗口通信。最后一个参数是以逗号分隔的字符串，其内容是新窗口的各种属性，比如尺寸，工具栏。
window.onload : 页面被加载时进行的工作，可以赋值给它一个方法，如果想要执行多个方法，也可以将其封装进一个方法。或者手动创建一个addEvent的方法来给其动态赋值

AJAX

以前和浏览器交互意味着发送请求然后浏览器重新返回一个新的页面，然而跟原来页面相比，可能只需要页面上极少的一部分发生改变。AJAX可以做到异步向服务器发送请求并根据数据只更新一小部分界面。很多框架都对JS的AJAX进行了封装，从而让代码更加简洁高效,而且可以在不同的浏览器上实现兼容（IE笑了）。

XMLHttpRequest

范例：

    function getNewContent(){
        //在这里不考虑兼容性，直接返回XMLHttpRequest对象
        var request = new XMLHttpRequest(); 
        if(request){
            request.open('GET', "example.txt", true);
            request.onreadystatechange = function(){
                if(request.readyState == 4){
                    ....
                }
            };
            request.send(null);
        }else{
            alert("浏览器不支持XMLHttpRequest");
        }
    }

在这里先使用open方法打开一个ajax请求，然后传入回调函数。该回调函数会在XMLHttpRequest送回响应的时候被调用。当然了，如果浏览器不支持XMLHttpRequest对象，会返回false，在这时需要进行额外的处理。

readystate有五个可能的属性值：

0 : 未初始化
1 : 正在加载
2 : 加载完毕
3 : 正在交互
4 : 完成

返回的响应内容可以在request.responseText中查看

快捷键之access key

accesskey='1' : 返回到本网站主页
accesskey='2' : 后退到前一页面
accesskey='4' : 打开本网站的搜索表单/页面
accesskey='9' : 本网站联系方法
accesskey='0' : 查看本网站的快捷键清单

时钟

variable = setTimeOut("function", interval) : 将function在一段interval之后开始执行
clearTimeOut(variable) : 取消等待执行队列里的某个函数

数值处理

parseInt('') : 返回输入值中的整数
parseFloat('') : 返回输入值中的小数

这些都是我在阅读了《Script DOM编程艺术》之后的一些随手笔记。其实这本书非常适合入门，因为它给了一些简单的示例让我们在对JS了解甚少的情况下清楚HTML+CSS+JS是怎样的工作模式。不过对于真正的语法讲解甚少，所以可谓是基础之基础。