学习javascript DOM笔记：节点属性和层级结构详解

需积分: 0 108 浏览量更新于2023-12-20 收藏 323KB DOCX 举报

JavaScript DOM 学习笔记11：在 JavaScript 中，DOM（文档对象模型）是 HTML 和 XML 文档的编程接口。通过 DOM，开发者可以轻松地访问和操作文档的各个部分，包括元素、属性和内容。在 DOM 中，每个文档都有一个根节点，即 document 节点。这个根节点的唯一子节点是元素，称之为文档元素。它是文档的最外层元素，每个文档只能有一个文档元素。在 JavaScript 中，所有节点都继承自 Node 类型，因此它们都具有共同的基本属性和方法。其中，nodeType 属性表示节点的类型，nodeName 保存着节点的名称，nodeValue 则保存着节点的值。对于元素节点来说，nodeName 是标签名称，nodeValue 是元素的内容。如果父节点没有子节点，则该父节点的 firstChild 和 lastChild 属性都为 null。同样地，parentNode 属性表示父节点，而 previousSibling 表示前一个同级节点。在 JavaScript 中，可以通过 DOM 来访问和操作 HTML 页面的各个部分。下面是一个标准的 HTML 页面的层级结构示例： ```html <!DOCTYPE html> <html lang="en"> <head> <title>Sample Page</title> </head> <body> <p class='attributes1'>Hello World</p> </body> </html> ``` 在这个示例中，document 节点是整个 HTML 文档的根节点。它只有一个子节点，即 html 元素。html 元素下有 head 和 body 两个子元素，其中 head 元素下有 title 元素，而 body 元素下有一个 p 元素。通过 JavaScript 中的 DOM，可以轻松地获取并操纵这些节点。例如，可以通过 document.documentElement 来获取 html 元素，而可以通过 document.getElementsByTagName('p')[0] 来获取第一个 p 元素。总之，JavaScript 中的 DOM 提供了丰富的方法和属性，方便开发者对 HTML 和 XML 文档进行操作。通过 DOM，开发者可以动态地修改页面内容、响应用户操作或者更新页面布局。熟练掌握 DOM 的相关知识和技巧对于 JavaScript 开发者来说非常重要。

参数: 要插入的节点(新的节点)和要被替换的节点

返回值: 被替换的节点

3. 删除节点

removeChild()方法

作用: 移除节点

调用者: 上同

参数: 要被移除的节点

返回值: 被移除的节点

上述四个方法都是用于操纵调用者的子节点并且被替换和删除的节点原则上来说

还是属于该文档所拥有但文档中已经没有了它们的位置

1.4 其他方法

� cloneNode()方法

作用: 复制节点

调用者: 某节点

参数: 布尔参数(表示是否深复制)

传入参数为 true 会进行深复制即复制节点及整个子 DOM 树

传入参数为 false 只会复制调用该方法的节点

返回值: 返回与调用它的节点一模一样的节点

复制返回的节点属于文档所有, 但尚未指定父节点所以可称为孤儿节点(orphan)

该方法不会复制添加到 DOM 节点的 JavaScript 属性, 比如事件处理程序。这个方

法只会复制 HTML 属性以及可选地复制子节点, 除此之外则一概不会复制。

� normalize()方法

剩余20页未读，继续阅读

丛乐

粉丝: 38
资源: 312

学习javascript DOM笔记：节点属性和层级结构详解

DOM学习笔记

DOM视频笔记

比较详细的javascript DOM 学习笔记第1 2页.docx

韩顺平javascript 韩顺平js-DOM学习笔记

比较详细的javascript DOM 学习笔记第1/2页

JavaScript HTML DOM学习笔记.emmx

JS基本功DOM学习笔记

JavaScript高级程序设计 DOM学习笔记

js DOM的学习笔记

JavaScript DOM学习笔记：从基础到实践

最新资源