JavaScript Dom编程艺术阅读笔记

最新推荐文章于 2024-03-19 22:04:17 发布

原创最新推荐文章于 2024-03-19 22:04:17 发布 · 354 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了DOM的基本概念及其与JavaScript的交互方式，包括如何优化脚本加载、处理字符串中的特殊字符、变量作用域、宿主对象的应用、以及利用DOM进行动态内容修改等内容。此外还深入探讨了AJAX的工作原理及注意事项。

DOM：一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式。
最好将外部js的<srcipt>标签放在html文档的最后，</body>标签之前，这样能使浏览器更快的加载页面。
可以不加type="text/javascript"，因为脚本默认是JavaScript。
如果想在使用单引号（双引号）包裹的字符串中写单引号（双引号），需要加入转义字符/，比如'they\'re dogs'。
赋值操作并不永远返回true， a = false; 返回的就是false。
空字符串和false等价，如果还要比较类型使用===（!==)。
do...while能够保证循环体内的语句至少被执行一次。
如果在某个函数中声明了var，就是局部变量，只存在于这个函数中。如果不声明var（直接使用），则声明的变量为全局变量。
由浏览器提供的预定义对象称为宿主对象(host object)。
使用typeof操作符得到的类型为string。
如果getElementsByTagName得到的目标类型为object htmlCollection而不是数组，原因是代码顺序的问题，JS代码位于目标元素之前，代码被执行时目标元素还没有加载到DOM树中，将js代码放在</body>上一行。
if(something)与if(someting != null)完全等价。
setAttribute不会修改文档的源码，因为是DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。
元素节点的nodeType是1，文本节点的nodeType是2，属性节点的nodeType是3。
使用href="#"，表示一个仅提供内部使用的链接记号（未指向任何位置，不跳转）。
为了向后兼容，有的浏览器不理解DOM语法，所以在调用去之前先要进行判断，if(!document.getElementByTagName) return false;
尽量减少外部js的数量（将其放入一个js），就可以减少加载页面时发出的请求数量，减少请求数量通常是性能优化时首先考虑的。
位于<head>块的脚本会导致浏览器无法并行加载其他文件（如图像和其他脚本）。在下载脚本期间，浏览器不会下载其他文件，所有其他资源都要等脚本加载完毕后才能下载。
如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined。
nodeName属性总是大写的值，即使html中是小写的。
innerHTML不会返回内容，还是需要通过DOM操作获取内容。
对浏览器来说，DOM节点树才是文档，要从这一点上进行考虑。
不属于DOM节点树的组成部分，称为文档碎片。
var xx = document.getElementById("xx"); xx是对节点的一个引用（C++中的引用&），对xx修改也会对原节点修改。
ajax中，服务器向XMLHttpRequest发回响应时，该对象有很多值（readyState）
- 0：未初始化
- 1：正在加载
- 2：加载完毕
- 3：正在交互
- 4：完成
只要readyState的值为4了，就可以访问服务器发回来的数据了。
访问服务器发回来的数据通过两个属性完成
- responseText属性，这个属性用于保存文本字符串形式的数据。
- responseXML属性，用于保存Content-type头部中指定为‘text/xml'的数据，其实是一个DocumentFragment对象（？）。
在使用ajax时，千万要注意同源策略。使用XMLHttpRequest对象发送的请求只能访问与其所在同一个域（？）中的数据，不能向其他域发送数据。
获取p标签的文本使用 xx.firstChild.nodeValue;
xx.style.font等只包含内联的css样式，无法读取内/外部样式表中的样式。
用DOM设置的样式，就能用DOM读出来。