转行前端自我学习记录——《DOM编程艺术》小结

最新推荐文章于 2026-07-02 10:30:00 发布

原创最新推荐文章于 2026-07-02 10:30:00 发布 · 252 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文总结了DOM的基本概念与操作方法，包括元素节点树的理解、获取与修改元素节点的技术、父代后代的操作方法、样式与行为的分离原则、定时方法的应用、错误处理策略及Ajax的基础使用。

《DOM》一刷小结

1、JS基本数据类型：string number Boolean null undefined。内建对象：Date Math Array。宿主对象：凡是DOM与BOM对象都是宿主对象以及自定义对象（objName=new Object()）；

2、所有对象都有基本的属性与方法，可通过具体的对象调用或赋值，对象的属性是专属的，只与对象挂钩，如第十章中的element.movement，只有element拥有movement属性，其他变量没有。

3、基本数据类型在声明的时候，JS默认其是包装对象（wrap），也有属性，也可以调用方法，但是在调用过后，对象销毁，比如:

var str='string'
console.log(str)
typeof str="string"
str.length=6
str.hi=0
console.log(str.hi)=undiefined;

str是一个字符串基本类型，但是也拥有length属性，对于自定义属性str.hi，阅后即焚，因为JS将基本数据类型隐式转换为包装对象。

4、DOM的核心是元素节点树。将HTML中的所有元素当成是一个族谱。被包裹着的是后代，包裹元素的是祖先代。某些浏览器如Chrome会将HTML中的一个或多个回车统一当作一个文本类型的子节点。这在定位子代元素的时候尤其需要注意。

5、DOM获取元素节点的基本方法document.getElementById();document.getElementsByTagName();document.getElementsByClassName();document.getElementsByName();除了通过ID获取的唯一元素节点，其他方法获取的都是元素集合对象。所以是elements！

6、DOM中基本的父代后代的操作方法有parentNode.appendChild(childNode)；parentNode.insertBefore(newNode,oldNode)。document.createElement(tagName)。document.createTextNode(textNode);其中appendChild方法必须明确父元素，否则返回undefined。因为新创建的元素节点只是游离的DOM对象，浏览器不知道要把它插入哪个位置。

7、层级分离：样式层（css）表示层（HTML）行为层（JavaScript）三者独立，使文档更简洁直观。在接入外部JS文件的时候，需要注意程序的运行顺序，操作DOM节点的方法函数必须要在相应的节点创建结束之后才能调用，否则会返回undefined。window.onload=function()，为一种解决办法，也可以把JS文件插入到执行节点的后面，常规是放到body元素的底部。

8、DOM有两个跟属性相关的方法getAttribute（），setAttribute（）。但是这两个方法只能获取内联属性，比如title class Ssrchref等对应外部样式属性与内嵌样式属性，无法获取，但是可以通过setAttribute创建自定义属性。JS还有一种是element.style.attribute的方法来获取内联style样式属性与设置属性。如果属性不是通过element.style.attr设置的，无法获取，俗称自营自收。在第十章练习的时候就被坑惨了。

9、setTimeout（） setInterval（）方法定时。setTimeout只执行一次，setInterval根据设置的时间间隔无限重复执行。两个方法接收的参数有两个，一个是字符串或函数，另一个是时间间隔参数。由此引出的概念是function funcName(){}中，funcName代表函数，而funcName()代表函数返回值。所以给setTimeout或者setInterval赋参数的时候，必须注意要么用funcName，要么“funcName()”在练习返回带参数的函数方法的时候，也是被坑了很久，只是因为没有在意书中的一行表达式：

因为elementID final_x final_y interval是变量，所以与字符串链接时，必须通过+来区分，否则将视作字符串。

10、当页面较多而且只有一个JS文件时（当页面内容多而且庞大的时候，这是不可取的），良好的访问检测就很重要，比如有的函数只操作某些元素，则在函数的开头，应该加上if（！element）return false；通过这句检测，对于不含有操作元素节点的页面，则函数不执行，否则会出现undefined错误，造成页面无法正常加载。

11、Ajax初探：异步加载能实现不刷新页面，获取目标文件内容。对于页面含有大量图片或音视频的时候，这能极大加快页面的交互反应，改善用户体验。Ajax有四部曲：1 声明XMLHttpRequest对象（如果不兼容，则声明ActiveXObject（‘Microsoft XMLHTTP’）），2、obj.open(method,url,true/false)异步请求文件。通过responseText读取返回的文件，文件是文本形式。3、通过onreadystatechange=function（）{}，监听readyState状态，当readyState为4的时候，执行相应DOM操作。4、send（）方法向服务器发送数据（还不是很理解这个方法）。

11、Ajax responseText属性获取的是请求文件的纯文本内容，包括元素标签，所以为了在页面上能按照HTML形式显示，需通过innerHTML赋值给相应元素。

12、由于用Ajax练习只是进行本地的请求，并没有通过服务器，所以status永远不会达到200，都是0，onreadystatechange函数的if（）判断不能根据常规的status==200来判断，否则永远请求不了。

总结：通过一刷这本书，对DOM有了基本概念，也能通过基本方法操作DOM文本节点，感受最大的是设计程序时，难的不是写出来，而是设计出能良好执行的程序。比如：

1、ID class的使用技巧，当需要唯一操作一个元素时，用ID比较好，但也不能滥用，否则一堆ID自己都会乱，不知道指向哪。class属性能通过CSS达到批量改变元素样式属性的目的。

2、而页面比较多时，最好能加一些元素检测判断，防止某些页面没有此类元素而出现undefined错误。

3、保存运行出错的代码源码，方便对比能正常执行的代码，以此来发现自己学习过程中的错误在哪。

4、书本内容得多看，因为看一遍的时候，总会错过某些重点，只有在练习实践的时候才会发现那些错过的知识点会给自己挖坑。