Ajax《DOM Scripting》 – 阅读笔记

DOM Scripting – Web Design with JavaScript and the Document Object
Model,Jeremy Keith
中文名:JavaScript DOM 编程艺术

因而了扳平宏观之时空看了了就按照开,其实内容还是深简短的,顺便用来上学英语,积累了一部分单词。
朗诵毕一本书不便于,总要召开来记录,才够本儿。

DOM,文档对象模型,D表示文档,web页面;D表示对象,document对象;M表示模型,浏览器提供的一致栽web页面的映照(模型),你可用JavaScript来读写该映射。(生硬的翻。。。)

JavaScript中生出三种植对象:用户定义的目标,JavaScript中坐的靶子与浏览器提供的对象(Host
Object)。
浏览器提供的最好核心的凡window对象,该目标就意味着一个浏览器窗口。window对象的计与特性通常通过浏览器对象模型(BOM)来引用。
document对象表示html文档,而本书的主题就是是座谈document对象的性质和方法。

一个文档就是部分结点的联谊,这些结点组成树状结构,称为文档树。一个文档就是一个结点树。

结点类型包括元素结点,文本结点,属性结点。

  1. document.write
    document对象的write方法供了一个简短高效的法来插入一个字符串到文档。

  2. innerHTML
    浏览器引入的innerHTML属性,用于读写元素外之HTML。
    使innerHTML,元素外的HTML将总体吃替换。

innerHTML比document.write更好。使用innerHTML能维持JS和标志的分手,不必插入<script>标记

找到结点

  1. element = document.getElementById(ID);
    根据id获得元素结点,如果非设有则赶回null

  2. element = document.getElementByTagName();
    基于签获得结点的数组。

  3. booleanValue = element.hasChildNodes;
    看清是否有子结点。
    文件结点和性结点没有子结点,所以采取该措施返回false。

  4. object.getAttribute(attribute);
    得属性结点。
    苟没有拖欠结点,则赶回null

操作结点

  1. var para = document.createElement(“p”);
    创立元素结点

  2. var txt = createTextNode(“Hello World”);
    开创文本结点

  3. para.appendChild(txt);
    txt结点作为子结点插入到para中

  4. reference = element.insertBefore(newNode,targetNode);
    安插元素到都是元素的前
    只要非依赖定targetNode,则插入到element的子结点的终极。

  5. paraElement.insertAfter(newElement,targetElement);
    安插元素到曾存在元素的末端
    以此艺术是投机作者写的

    1 function insertAfter(newElement,targetElement) {
    2 var parent = targetElement.parentNode;
    3 if (parent.lastChild == targetElement) {
    4 parent.appendChild(newElement);
    5 } else {
    6 parent.insertBefore(newElement,targetElement.nextSibling);
    7 }
    8 }

  6. reference = node.cloneNode(true)
    复制结点,并复制子结点
    reference = node.cloneNode(false)
    复制结点,但不再制子结点

  7. reference = element.removeChild(node)
    移除结点并赶回该节点,该结点的子结点也为删去。

  8. reference = element.replaceChild(newChild,oldChild)
    替换element的子结点oldChild.
    要是新结点有子结点,也于插到文档中

结点属性

  1. name = node.nodeName;
    得到结点的名

  2. integer = node.noteType;
    获得结点的种类

    1. ELEMENT_NODE
    2. ATTRIBUTE_NODE
    3. TEXT_NODE
    4. CDATA_SECTION_NODE
    5. ENTITY_REFERENCE_NODE
    6. ENTITY_NODE
    7. PROCESSING_INSTRUCTION_NODE
    8. COMMENT_NODE
    9. DOCUMENT_NODE
    10. DOCUMENT_TYPE_NODE
    11. DOCUMENT_FRAGMENT_NODE
    12. NOTATION_NOD
  3. value = node.nodeValue;
    获得结点值。
    若否性结点,返回属性值,若否文本结点,则归文本内容,若为素结点,则回null。
    演示:获得段落内之文本<p>这是平等段落文本</p>
    description.childNodes[0].nodeValue
    分析:首先得到p的子结点—文本结点,然后抱文本结点的值——文本。因为段落内之公文是一个不比之结点,这个文件是段子的率先个头结点

  4. object.setAttribute(attribute,value)
    设置结点属性与其值

遍历结点树的法子

  1. nodeList = node.childNodes
    取子结点的列表

  2. node.childNotes.length
    获子结点的数额

  3. reference = node.firstChild
    获第一身材结点

  4. reference = node.lastChild
    抱最终一个子结点

  5. reference = node.nextSibling
    博下一个结点

  6. reference = node.previousSibling
    落高达一个结点

  7. reference = node.parentNode
    落父结点

操作CSS

每个元素都是一个靶,每个对象还来一部分性。
中间一些属性表示结点在结点树被之岗位信息,比如:parentNode,childNotes等等。
还有一对属性,包含元素本身的音信,比如:nodeType和nodeName
再有一部分特性,叫做样式属性,包含了拖欠因素的体。查询样式属性返回一个目标,JavaScript通过读写该目标好操纵元素的体裁。
element.style.preperty
JavaScript会管”-“当作减号,所以采取驼峰命名法来引用样式属性,下面是部分示范

CSS 

JavaScript 

color color
font-family fontFamily
background-color backgroundColor
font-weight fontWeight
margin-top-width marginTopWidth

啊得以应用类名属性来控制元素的体

  1. element.className

要是原先都起类名,可以如此描写来补加类

  1. element.className += “intro”

动画

  1. variable = setTimeout(“function”,interval)
    一段时间后行函数

  2. clearTimeout(variable)
    撤消延迟启动

  3. variable = setInterval(“function”,interval);
    各国隔一段时间执行函数

  4. clearInterval(variable)
    注销重复执行

  5. parseInt
    拿字符串转换为整数

  6. parseFloat
    把字符串转换为浮点数

Ajax

XMLHttpRequest对象
IE创建语法
var waystation = new ActiveXObject(“Microsoft.XMLHTTP”);

外浏览器语法:
var waystation = new XMLHttpRequest();

为了同时满足上述两种实现,写一个函数来缓解:

 1 function getHTTPObject(){
 2     if(window.ActiveXObject){
 3         var waystation = new ActiveXObject("Microsoft.XMLHTTP");
 4     } else if(window.XMLHttpRequest){
 5         var waystation = new XMLHttpRequest();
 6     } else {
 7         var waystation = false;
 8     }
 9     return waystation;
10 }

XMLHttpRequest对象有诸多道,其中最为实用之凡open。
open方法用来针对服务器上文件对象,也可指定HTTP请求:GET,POST,SEND,第三单参数指定是否要是共的。
初始化GET请求:请求一个example.txt文件
request.open(“GET”,”example.txt”,true);

当服务器返回响应,触发onreadystatechange事件处理器,将见面调用执行doSomthing。

1 request.onreadystatechange = doSomthing
2 request = getHTTPObject();
3 request.open("GET","example.txt",true);
4 request.onreadystatechange = doSomething;
5 request.send(null);

用写一个doSomething函数来拍卖应。
当服务器返回响应到XMLHttpRequest对象,大量属性就得使了。
readyState属性是一个实时更新的数字值当服务器处理要时:
0 uninitialzed
1 loading
2 loaded
3 interactive
4 complete
当readyState属性值为4,则足以看服务器返回的多少了。
由此responseText属性来坐字符串文本的样式拜访数。如果回去数据Content-Type头为”text/html”,则也可为此responseXML属性来访问。

1 function doSomething(){
2     if(request.readyState == 4){
3     alert(request.responseText);
4     }
5 }

日趋进增强的Ajax

Ajax的打响表明一项事:一个简之讳有助于了解一个设法。Ajax比“具有DOM脚本,CSS和HTML的XMLHttpRequest”更爱懂,那么自己用Hijax来顶替“渐进增强的Ajax”也是简化理解。

Ajax的力量依赖服务器,服务端编程语言做了绝大多数实在工作。XMLHttpRequest就比如是一个当浏览器和服务器之间的网关(gateway),传输请求与应。如果网关被移除了,仍可以发送请求和承受响应,但日子还增长。

相关文章