重读《JavaScript DOM编程艺术》(第一版)

简介:

今天来了雅兴去图书馆看书。把《JavaScript DOM编程艺术》温习了一遍,平时写js的机会不是特别多,很多知识都有些模糊了。

伴随着身边键盘卡啦卡啦的声音,一位手速不是一般的快的程序猿。我也快速的回顾了下~


Chapter 1     JavaScript简史

1、Netscape(网景)/Sun公司

72f082025aafa40f511c2d26aa64034f79f01976

2、JavaScript 1.0 — Netscspe Navigator 2

3、VBScript — IE 3

4、ECMA标准化 — 浏览器之争

5、什么是DOM?

W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

6、DHTML:HTML\CSS\JS三种技术结合的产物。(忽略)

7、W3C DOM标准化

8、JavaScript

(1)ECMAScript:核心语言功能

(2)DOM:Document Object Model 文档对象模型(多层节点结构)

(3)BOM:Broser Object Model浏览器对象模型

9、五大主流浏览器

IE、firefox、Chrome、Safari、Opera


Chapter 2      JavaScript语法

1、基本语法

(1)区分大小写

(2)借鉴C

(3)驼峰大小写格式

(4)注释          //           /**/

2、JavaScript插入方法

(1)嵌入

(2)外部

3、变量

(1)不允许含空格、标点,$除外

(2)局部变量(var)/全局变量

4、数据类型

(1)Undefined

(2)null(空对象指针,Undefined的值是null派生的)

(3)Boolean(true/false)

(4)Number(NaN/Infinity)

(5)String(转义字符,单/双引号)

(6)Array(length,关联数组)

(7)Object(var mkq = new Person ;)

5、拼接

alert(“10″+20);  //1020

alert(10+20);  //30

6、基本操作符

(1)一元

++\–+(符)-(符)

(2)位

~/&/|/^/<>/>>>(无符号右移)

(3)布尔操作

!/&&/||

(4)乘性

乘:

其中一个NaN → NaN

Indefinity*0 → NaN(not a number)

Indefinity*Indefinity → Indefinity

除:

其中一个NaN → NaN

Indefinity/Indefinity → NaN

0/0 → NaN

余同除

(5)加性

+/-

(6)关系

/=/<=

(7)相等

!=

=  全等

!   不全等

(8)条件

… ? … : …

(10)赋值

(11)逗号

值为最后一项

7、语句

if/while/do-while/for

switch

break/continue

8、函数

(1)function

(2)作用域(局部变量(函数里var)/全局变量)


Chapter 3      DOM

1、DOM

D — Document

O — Object

M — Model

2、节点node

元素节点(element node):标签

文本节点(text node):内容

属性节点(attribute node):标签属性

3、getElementById()

getElementByTagName()

getElementByTagName(“*”).length元素节点的数目

4、getAttribute(属性名) 查属性节点

setAttribute(属性名,value) 修改属性节点


Chapter 4      案例研究:JavaScript美术馆

1

请选择图片

55555~调了我半个小时,结果是把source打成了sourse,我说怎么一点反应都没有。

回归知识点:

1、onclick=”return false;”

默认行为不会发生(不会链接到另一图片)

2、childNodes(所有子元素)

3、nodeType

(1)1 — 元素node

(2)2 — 属性node

(3)3 — 文本node

4、setAttribute():不必记忆哪种属性可以用DOM

5、nodeValue节点的值

6、firstChild第一个元素

lastChild最后一个元素


Chapter 5      JavaScript编程原则和良好习惯

1、创建新窗口

window.open(url,name,features);

window.open(winURL,”mkq”,”width=320,height=490″);

2、JS伪协议:极力不推荐

3、预留退路:如果JavaScript禁用,如何?

4、分离JavaScript

5、window.onload()


Chapter 6      JavaScript美术馆改进版

1、预留退路:假设JS禁用的情况下

第一张

就算JS禁用:

还是能展示每一张图片,就是观看起来麻烦一些。

2、分离JavaScript

应该在外部文件里用onclick=”…”,这样才能做到分离JS。

方法:用一个id与JS联系。

细节:

(1)多个JS函数写进onload事件处理函数上

(2)可读性

(3)函数都要养成写{}的习惯

(4)不要放过每一个细节

(5)DOM Core和HTML-DOM

DOM Core

placeholder.setAttribute(“src”,source);

HTML-DOM

placeholder.src=source;

让我想到了花了2天赶出来的工作室主页~以后要上线,绝对要改好了再出现!这样用户体验才能满分!


Chapter 7     动态创建HTML内容

1、动态html

(1)老的方法:document.write()严重违背分离原则.innerHTML()

(2)新的方法:createElement()/createTextNode()/appendChild()/insertBefore()

2、creatElement()

创造元素节点

3、creatTextNode()

创建文本节点。

4、appendChild()

创建子节点。

5、insertBefore()

把一个新的元素插入到一个现有元素前面

parentElement(parentNode).insertBefore(newElement,targetElement)

insertAfter()方法不存在

6、innerHTML

是一项专利技术,不是业界标准。

7、最后的gallery


Chapter 8    CSS-DOM

1、三位一体网页

(1)结构层 HTML

(2)表示层 CSS

(3)行为层 JS

2、分离

目录
相关文章
|
4天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
6 2
|
4天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
23天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
16 2
|
23天前
|
JavaScript Java
JavaSE精选-JS&DOM
JavaSE精选-JS&DOM
20 1
|
24天前
|
JavaScript Java
JS&DOM技术文章
JS&DOM技术文章
|
24天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
28 1
|
1月前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
20 2
|
1月前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
16 0
|
1月前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
1月前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)