《JavaScript DOM 编程艺术》（第二版）读书笔记（三）

时间 2019-11-24

标签 javascript dom 编程艺术第二读书笔记栏目 JavaScript 繁體版

原文原文链接

第六章案例研究：图片库改进版javascript

这一章将根据第五章提到的内容对图片库进行了改进html

首先检查DOM方法是否被游览器支持前端

if(!document.getElementById)  return false;
if(!document.getElementsByTagName)  return false;
if(!document.getElementById("placeholder"))
//.......相似的测试

接下来说到了一个重点内容：共享onload事件java

JavaScript每每须要在HTML文档加载结束后执行，否则一些dom方法会找不到对象,这就是为何jquery开头要加$(document).ready()node

做者给出了一个有意思的方法，用于加载多个函数，这个方法看起来很简单，但其中思想须要仔细领悟，这本书中之后的几个方法的思路也是相似的jquery

addLoadEvent函数浏览器

function addLoadEvent(func) {
    var oldonload=window.onload;
    if(typeof window.onload != 'function'){
        window.onload=func;
    } else {
        window.onload= function (){
            oldonload();
            func();
        }
    }
}

1.把现有的window.onload事件处理函数存入变量oldonload.服务器

2.若是在这个处理函数上尚未绑定任何函数，就向平时同样把函数添加给它.app

3.若是在这个处理函数上已经绑定了一些函数，就把新函数追加到现有函数末尾.dom

三元操做符

variable(变量) = condition(条件) ? if true : if else;

能够看出三元操做符是if/else 的一种变体

nodeName属性

返回元素的标签名，老是返回大写字母好比IMG,P,A等html标签

第七章动态建立标记

document.write()方法能够轻松的把字符串插入文档，可是它不能作到javascript彻底与html分离，必须吧<script>放到<html>里。

innerHTML属性

该属性被浏览器普遍支持，既能用于读取，又能用于写入。

利用这个技术没法区分“插入一段html内容”与“写入一段html内容”。一旦使用innerHTML,它的所有内容将被替换。

<div id="test">
  <p>this is <em>my</em> content.</p>
</div>
var text= document.getElementById("test").innerHTML
alrert(text) // <p>this is <em>my</em> content.</p>

<div id="test">
</div>
document.getElementById("test").innerHTML = "<p>this is <em>my</em> content.</p>"  //浏览器中会看到相应效果

DOM方法介绍

1.createElement方法

document.createElement(nodename);

建立一个元素节点，只不过属于文档碎片(document fragment),没有成为DOM节点树的一部分，须要被添加进DOM树。

2.appendChild方法

parent.appendChild(child)

把新建立的节点插入某个文档的节点树，让它成为这个文档某个现有节点的子节点。

3.createTextNode方法

document.createNode(text)

建立一个文本节点，注意它与createElement的差异。

如今innerHTML方法就能用上述几个DOM方实现了。

4.insertBefore()方法

parentElement.insertBefore(newElement,targetElement)

把一个新元素插入到一个现有元素的前面，必须告诉它父元素(parentElement)、新元素(newElement)、目标元素(targetElement)。

5.insertAfter()函数(DOM中没有此方法)

function insertAfter(newElement,targetElement){
    var parent=targetElement.parentNode;
    if(parent.lastChild==targetElement){
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

parentNode属性：父节点；nextSibling属性：下一个兄弟元素节点；

这个函数十分简单，却效果很好。

Ajax

这是前端必须掌握的技能，如今页面已经离不开Ajax效果了，开发人员通常用jquery来处理这一行为，做者介绍了javasciprt方法

获取XMLHttpRequest对象，做者提供了兼容的方法，记下就好

function getHTTPObject(){
    if(typeof XMLHttpRequest == "undefined")
    XMLHttpRequest = function(){
        try {return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
        catch(e){}
        try {return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
        catch(e){}
        try {return new ActiveXObject("Msxml2.XMLHTTP");}
        catch(e){}
        return false;
    }
    return new XMLHttpRequest();
}

做者提供了一个例子：

function getNewContent(){
    var request = getHTTPObject();
    if(request){
        request.open("GET","example.txt",true);
        request.onreadystatechange = function(){
            if(request.readyState==4){
                var para = document.createElement("p");
                var txt = document.createTextNode(request.responseText);
                para.appendChild(txt);
                document.getElementById('new').appendChild(para);
            }
        };
        request.send(null);
    } else{
        alert('Sorry,your browser doesn\'t support XMLHttpRequest');
    }
}
addLoadEvent(getNewContent);

当页面加载完成，以上代码发起一个GET请求，加载exemple.txt文件

request.open()

代码中的onreadystatechange是一个时间处理函数，它会在服务器给XMLHttpRequest对象送回响应时被触发执行

request.onreadystatechange = dosomething

而后就能够发送请求

reequest.send(null)

浏览器会在不一样阶段更新readyState属性 0 表明未初始化 1 表明正在加载 2表明加载完毕 3表明正在交互 4表示完成。

在这个例子中readyState=4时，就会从requst里获取requestText内容

这一篇就到这里，Ajax内容在最后一章会有一个更详细的例子