《DOM Scripting》 - 阅读笔记

时间:2022-05-30 18:22:55

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);
插入元素到已存在元素的后面
这个方法是自己作者写的

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

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

如果原来已有类名,可以这样写来添加类
2. element.className += "intro"

动画

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

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

1. variable = setInterval("function",interval);
每隔一段时间执行函数

2. clearInterval(variable)
取消重复执行

3. parseInt
把字符串转换为整数

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

Ajax

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

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

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

 function getHTTPObject(){
if(window.ActiveXObject){
var waystation = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest){
var waystation = new XMLHttpRequest();
} else {
var waystation = false;
}
return waystation;
}

XMLHttpRequest对象有许多方法,其中最有用的是open。
open方法用来指向服务器上文件对象,也可指定HTTP请求:GET,POST,SEND,第三个参数指定是否请求是同步的。
初始化GET请求:请求一个example.txt文件
request.open("GET","example.txt",true);

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

 request.onreadystatechange = doSomthing
request = getHTTPObject();
request.open("GET","example.txt",true);
request.onreadystatechange = doSomething;
request.send(null);

需要写一个doSomething函数来处理响应。
当服务器返回响应到XMLHttpRequest对象,大量属性就可以使用了。
readyState属性是一个实时更新的数字值当服务器处理请求时:
0 uninitialzed
1 loading
2 loaded
3 interactive
4 complete
当readyState属性值为4,则可以访问服务器返回的数据了。
通过responseText属性来以字符串文本的形式访问数据。如果返回数据Content-Type头为"text/html",则也可以用responseXML属性来访问。

 function doSomething(){
if(request.readyState == 4){
alert(request.responseText);
}
}

渐进增强的Ajax

Ajax的成功表明一件事:一个简洁的名字有助于理解一个想法。Ajax比“具有DOM脚本,CSS和HTML的XMLHttpRequest”更容易理解,那么我用Hijax来代替“渐进增强的Ajax”也是简化理解。

Ajax的能力依赖服务器,服务端编程语言做了大部分实际工作。XMLHttpRequest就像是一个在浏览器和服务器之间的网关(gateway),传输请求和响应。如果网关被移除了,仍可以发送请求和接受响应,但时间更长。