最近工作不是很忙就想想想JavaScript的内部组成和一些要点,就是从这本书开始的。对新手来说还好,简单易懂。
简单终结下我重书中学到的一些要点。
下面都是个人学习的要点提取:
1.给自己预留退路,现在浏览器基本都支持Javascript,但是当时可能有一些浏览器不支持还是怎么的,毕竟我没经历过那个年代。作者的这种做法很厉害,不管你的浏览器支持还是不支持Javascript,网站最基本的信息你是能看见的,不会出现不支持Javascript就什么都看不到。例子:
<a href="http://www.cnblogs.com/" onclick="popUp(‘http://www.cnblogs.com‘);">Example</a>
把href属性设置为真是存在的URL地址后,既是JavaScript已被禁用,这个链接也是可用的;这是一个典型的"预留退路"例子;
现在可能不会用到,但是可以学习这种思考问题的方式。
2.DOM的一些理论知识吧,通过setAttribute()方法对文档做出的修改,将使得文档在浏览器窗口里的显示效果和/或行为发生相应的变化,但我们在通过浏览器的view source(查看源代码)选项去查看文档的源代码时看到的仍将是原来的属性值—也就是说,setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自于DOM的工作模式:先加载文档的静态内容、再以动态方式对它们进行刷新,动态刷新不影响文档的静态内容。
3.由childNodes属性返回的数组包含着所有类型的节点,出来所有的元素节点,所有的属性节点和文本节点也包含在其中。事实上,文档里几乎每一样东西都有一个节点—甚至连空格和换行符都会被解释成节点,而它们也全部包含在childNodes属性所返回的数组当中。
4.Node Types
文档、元素、属性以及 HTML 或 XML 文档的其他方面拥有不同的节点类型。
存在 12 种不同的节点类型,其中可能会有不同节点类型的子节点:
节点类型 | 描述 | 子节点 | |
---|---|---|---|
1 | Element | 代表元素 | Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference |
2 | Attr | 代表属性 | Text, EntityReference |
3 | Text | 代表元素或属性中的文本内容。 | None |
4 | CDATASection | 代表文档中的 CDATA 部分(不会由解析器解析的文本)。 | None |
5 | EntityReference | 代表实体引用。 | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
6 | Entity | 代表实体。 | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
7 | ProcessingInstruction | 代表处理指令。 | None |
8 | Comment | 代表注释。 | None |
9 | Document | 代表整个文档(DOM 树的根节点)。 | Element, ProcessingInstruction, Comment, DocumentType |
10 | DocumentType | 向为文档定义的实体提供接口 | None |
11 | DocumentFragment | 代表轻量级的 Document 对象,能够容纳文档的某个部分 | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
12 | Notation | 代表 DTD 中声明的符号。 | None |
节点类型 - 返回值
对于每种节点类型,nodeName 和 nodeValue 属性的返回值:
节点类型 | nodeName 返回 | nodeValue 返回 | |
---|---|---|---|
1 | Element | 元素名 | null |
2 | Attr | 属性名称 | 属性值 |
3 | Text | #text | 节点的内容 |
4 | CDATASection | #cdata-section | 节点的内容 |
5 | EntityReference | 实体引用名称 | null |
6 | Entity | 实体名称 | null |
7 | ProcessingInstruction | target | 节点的内容 |
8 | Comment | #comment | 注释文本 |
9 | Document | #document | null |
10 | DocumentType | 文档类型名称 | null |
11 | DocumentFragment | #document 片段 | null |
12 | Notation | 符号名称 | null |
NodeTypes - Named Constants
NodeType | Named Constant |
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_NODE |
5.很早的onload,现在都不用封装了,但是还是记录以后能看看是什么原理来执行的:
function addLoadEven(func){
var oldonload = window.onload;
if (typeof window.onload != ‘function‘){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
6.当事也没有DOM方法和属性把一个节点插入到另一个节点的后面。简单介绍下insertAfter()函数:
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
7.要记住JavaScript脚本值应该用来充实文档的内容,要避免使用DOM技术来直接插入核心内容。很实在的例子,我现在的这个公司项目就是用这种历练,最主要的内容基本没有几个DIV就解决了,其他全是动态添加进去,angular.js这点分的更厉害。
8.有时候我们容易混淆CSS和JavaScript到底什么时候用,或者在那里用,这里有个基本原则:
如果你想改变某个元素的呈现效果,就应该选用CSS;如果你想改变某个元素的行为,就应该选用DOM也就是JavaScript 去控制行为;
总结:大概就这些我觉的需要记录一下,以后好复习的要点,书真的是人类的一大奇迹,前人的知识能带动后代的人。