JavaScript DOM

最新推荐文章于 2025-04-24 11:59:04 发布

原创最新推荐文章于 2025-04-24 11:59:04 发布

· 603 阅读

0 ·

版权

JavaScript 同时被 2 个专栏收录

4 篇文章

订阅专栏

DOM

1 篇文章

订阅专栏

本文详细介绍了W3C对DOM的定义、DHTML概念、解析与编译型程序设计语言的区别、DOM方法应用、JavaScript对象类型、宿主对象、DOM元素操作原则及实例、innerHTML属性使用限制、DOM方法深入剖析、元素复制注意事项、DOM脚本编程基本原则及实现方式，全面阐述了DOM与JavaScript交互的关键技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. W3C对DOM的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改。”

2. DHTML是"dynamic HTML"（动态HTML）的简称。严格地说，DHTML并不是一项单一的新技术，而死HTML、CSS和JavaScript这三种技术相结合的产物。

3. 解析型程序设计语言不需要编译器——它们仅需要解释器。如果编译型程序设计语言编写的代码包含着错误，那些错误在代码编译阶段就会被发现并报告。对于解释型程序设计语言，代码中的错误只有等到解释器实际执行到有关代码才会被发现并报告。

与解释型程序设计语言相比，编译型程序设计语言往往速度更快，可移植性也更好，但他们的学习曲线往往相当陡峭。

4. 四个非常实用的DOM方法：getElementById、getElementsByTagName、getAttribute、setAttribute。

getElementById()方法将返回一个对象，该对象对应着文档里的一个特定的元素节点。
getElementByTagName()方法将返回一个对象数组，它们分别对应着文档里的一个特定的元素节点。
getAttribute()方法不能通过document对象调用，只能通过一个节点对象调用它。
setAttribute()方法也只能通过元素节点对象调用，但setAttribute()方法需要我们向它传递两个参数。

这些方法都是DOM Core的组成部分。他们并不专属于JavaScript，支持DOM的任何一种程序设计语言都可以使用它们。它们的用途也并非仅限于处理网页，它们可以用来处理任何一种标记语言（比如XML）编写出来的文档。

5. JavaScript 语言里的对象可以分为三种类型：

用户定义对象（user-defined object）：有程序员自行创建的对象。
内检对象（native object）：内建在JavaScript语言里的对象，如Array、Math和Date等。
宿主对象（host object）：由浏览器提供的对象。

6. 宿主对象中最基础的是window对象。

window对象对应着浏览器窗口本身，这个对象的属性和方法通常被统称为BOM（浏览器模型）

7. 包含在<p>元素里的文本是另一种节点，它在DOM里是<p>元素的第一个子节点。如果想获得<p>元素的文本内容，就必须检索它的第一个子节点的nodeValue属性值。

8. DOM脚本编程工作有关的基本原则是：

预留退路
分离JavaScript
向后兼容性

9. 【把多个JavaScript函数绑定到onload事件处理函数上】

对DOM元素进行操作的函数，必须在HTML文档完成加载之后才能执行。网页加载完毕时会促发一个onload事件

每个事件处理函数只能绑定一条指令，可以创建一个匿名函数来容纳这两个函数firstFunction（）和secondFunction（），然后把那个匿名函数绑定到onload事件上。

下面是addLoadEvent（）函数将要完成的操作：

把现有的window.onload事件处理函数的值存入变量oldonload。
如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它。
如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾。

下边是addLoadEvent（）函数的代码清单

function addLoadEvent（func）
{
       var oldonload = window.onload;
       if(typeof window.onload != 'function')
       {
                window.onload = func;
       }
       else
       {
                window.onload = function()
                {
                        oldonload();
                        func();
                }
       }   
}

10. innerHTML属性无细节可言。要想获得细节，就必须使用DOM方法和属性。

在需要把一大段HTML内容插入一个网页时，innerHTML属性更适用。

不仅可以用它读出元素的HTML内容，还可以用它把HTML内容写入元素。一旦使用了innerHTML属性，它的全部内容都将被替换。

innerHTML属性只适用于HTML文档。浏览器在呈现正宗的XHTML文档（即MIME类型是application/xhtml+xml的XHTML文档）时不会去执行innerHTML属性。

在任何时候，标准的DOM都是ikeyi替代innerHTML属性的。虽然说这往往需要多编写一些代码才能获得同样的效果，但DOM提供了更高的精确性和更多的功能。

11. 深入剖析DOM方法：creatElement（）、createTextNode（）、appendChild（）和insertBefore（）

12. 请注意：如果被复制元素有一个独一无二的id属性值，千万不要忘记对复制出来的新元素的id属性值进行修改。在同一个文档里边，不同元素的id属性值必须各不相同。

13. appendchild()方法不仅可以用来追加新创建的元素，还可以用来挪动文档中的现有元素。