Javascript 难点易错点总结（二）

1、创建和删除元素：

<div id="outer"></div><button onclick="delInner1()">删除inner</button><button onclick="delInner2()">删除inner</button><script>var inner = document.createElement("div");inner.id = "inner";var txt = document.createTextNode("新创建的元素");inner.appendChild(txt);var outer = document.getElementById("outer");outer.appendChild(inner);function delInner1() {    // 已知父元素删除子元素    outer.removeChild(inner);}function delInner2() {    // 未知父元素删除子元素    inner.parentNode.removeChild(inner);}</script>

2、所有全局对象（包括变量和函数）都是window对象的成员，window可省略:

var foo = "Hello"; console.log(window.foo); // Helloconsole.log(location); // 当前URL

3、获取浏览器可用窗口的宽度和高度及屏幕的宽度和高度：

var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;var screenWidth = screen.availWidth;var screenHeight = screen.availHeight;

4、location对象的相关属性：

/** https://test.com/new/index.html?param=test **/location; // 等同于location.href https://test.com/new/index.html?param=testlocation.href; // https://test.com/new/index.html?param=testlocation.hostname; // test.comlocation.pathname; // /new/index.htmllocation.search; // ?param=testlocation.protocol; // https:

5、location对象几个方法的异同：location.href属性和location.assign()方法的作用相同，都是打开新页面，并且会保留历史记录，location.replace()方法会替换掉历史记录，无法回退到原来的页面。有时某个页面是metho=”post”提交过来的，执行location.reload();或者location.assign(location.href);刷新会出现”网页过期”的提示，这时可以使用location.replace(location.href);就不会出现该问题了：

<button onclick="refresh()">location.reload刷新页面</button><br><br><button onclick="go1()">location.href打开新页面（可后退到当前页面）</button><br><br><button onclick="go2()">location.resign打开新页面（可后退到当前页面）</button><br><br><button onclick="go3()">location.replace打开新页面（不可后退到当前页面）</button><br><br><script>document.write(new Date().getTime());function refresh() { location.reload();}function go1() { location.href = "http://blog.csdn.net/tafengnanhai";}function go2() { location.assign("http://blog.csdn.net/tafengnanhai");}function go3() { location.replace("http://blog.csdn.net/tafengnanhai");}</script>

6、navigator对象的相关属性：

navigator.appCodeName; // Mozillanavigator.appName; // Netscapenavigator.appVersion; // 5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36navigator.platform; // Win32navigator.userAgent; // Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36navigator.language; // zh-CNnavigator.cookieEnabled; // true

7、cookie的基本操作：

<input type="text" id="name"><input type="text" id="value"><button onclick="setAction()">设置</button><button onclick="getAction()">读取</button><button onclick="delAction()">删除</button><script>function setCookie(name, value, expireSeconds) {    var date = new Date()    date.setSeconds(date.getSeconds() + expireSeconds);    document.cookie = name + "=" + escape(value) + ";expires="+date.toGMTString();}function getCookie(name) {    var cookie = " " + document.cookie + ";";    var regex = new RegExp(" " + name + "=" + "([^;]*);");    var result = regex.exec(cookie);    return result[1];}function delCookie(name) {    setCookie(name, null, -1);}function setAction() {    var name = document.getElementById("name").value;    var value = document.getElementById("value").value;    if(name != "" && value != "") {        setCookie(name, value, 600);          alert("设置完成");    } else {        alert("请输入内容");    }}function getAction() {    var name = document.getElementById("name").value;    if(name != "") {        var cookie = getCookie(name);        alert(cookie);    } else {        alert("请输入内容");    }}function delAction() {    var name = document.getElementById("name").value;    if(name != "") {        delCookie(name);        alert("已删除");    } else {        alert("请输入内容");    }}</script>

8、Javascript原始类型：Number, String, Boolean, Undefined, Null，它们的变量存储的是原始值，存储在栈（Stack）中的简单的数据段，即值直接存储在变量的访问位置。因为它们占用空间固定，这样存储可以进行快速查找。其它类型的变量存储的是引用值，存储在堆（Heap）中，是一个指向存储对象内存处的指针。因为引用值大小会改变，所以不能放到栈中，否则会降低查找速度。相反，对象在堆中的地址大小是固定的，可以存储在栈中。

9、对象null的类型就是原始类型Null，不过由于早期设置失误，typeof null返回的是object，可以认为null是对象的占位符。

10、字符串和数组转换：

var names = "Willson,Tafeng,Bill";var arrayNames = names.split(",");var strNames = arrayNames.join(",");

如果单个字符进行拆分可以不使用split，直接将字符串“当作”数组操作，如获取字符“T”，直接使用：

var names = "Willson,Tafeng,Bill";console.log(names[8]); // Tvar arrayNames = names.split("");console.log(arrayNames[8]); // T