[Javascript]：DOM概念、DOM操作元素、属性、文本节点详解

最新推荐文章于 2024-06-01 00:00:00 发布

南纬的风

最新推荐文章于 2024-06-01 00:00:00 发布

阅读量2.7k

点赞数 4

分类专栏： H5/CSS/JS/jQuery 文章标签： DOM DOM节点操作 DOM增删改查 DOM操作属性 DOM操作文本

本文链接：https://blog.csdn.net/fengwei4618/article/details/78025522

版权

【篇幅略长，建议点击上面目录来快速查询相关知识点】

首先简单了解一下Javascript的三大组成部分：ECMAScript + BOM + DOM。

ECMAScript是JS的语言核心。
BOM和DOM是中立于平台和语言的应用程序接口（API），不和任何语言进行绑定，Javascript只是对其进行实现。
我们可以通过JS的BOM对象对浏览器的功能部件进行访问，相关知识点击BOM知识。通过DOM对象来操作文档内容。

DOM概念

DOM全称是文档对象模型，是专门用于操作HTML/XML文档的API（应用程序接口）。DOM将文档看作一颗树，其中的每个成分都是对象，这些对象都看作是节点。可以将文档的一切都理解成节点对象。

DOM的组成部分介绍：文档、对象和模型

Document(文档)：当用浏览器打开一个页面文档时，这个文档就会被转成document对象，然后就可以调用了。后面会提到该对象的用法。
Object(对象)：DOM中的每个节点都是对象，通过对象的属性和方法就能够操作节点。
Model(模型)：DOM将整个文档划分成节点树结构，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    <p>文本P</p>
    <ol>
        <li>文本1</li>
        <li>文本2</li>
    </ol>
</body>
</html>

DOM节点知识

DOM把文档描述成层次节点树，一个由多层节点组成的结构。文档中的每个元素都是节点对象，节点可以分为以下几类：

整个文档是一个文档节点，即根节点；
所有的HTML标签都是元素节点；
所有的HTML 属性都是属性节点；
包含在HTML元素中的文本内容都是文本节点；
注释节点。

注意：DOM中的根节点和根元素节点是两回事。根节点代表整个文档，document对象是它的唯一实例。可以把根节点理解成document对象。而根元素节点代表文档的根元素，即<HTML>元素，可以通过document.documentElement拿到根元素节点<html>。

节点对象使用细节

DOM节点都是Node类型，因此所有节点对象都具有相同的属性和方法。使用时最好根据当前节点类型来选择适当的方法，不然会出错。
例如：一个属性节点.appendChild()，虽然允许调用该方法，但很明显这是不符合规定的，所以不能瞎用。
document对象继承了Node对象的所有属性和方法，在document对象中访问某些节点属性和方法时，因为是根节点，这些属性和方法是没有意义的。如下：

document.attributes	文档作为根节点，没有属性。
document.hasAttributes()	文档没有该属性
document.nextSibling	文档没有下一节点
document.nodeName	这个通常是 #document
document.nodeType	这个通常是 9(DOCUMENT_NODE)
document.nodeValue	文档没有一个节点值
document.ownerDocument	文档没有主文档
document.ownerElement	文档没有自己的节点
document.parentNode	文档没有父节点
document.previousSibling	文档没有兄弟节点
document.textContent	文档没有文本节点

DOM操作节点介绍

DOM编程本质上就是对节点对象进行操作。
Javascript使用document对象来操作DOM节点，主要包括：获取节点、操作元素节点、操作属性节点和操作文本节点。
通过操作节点就能改变文档中的所有 HTML 元素、HTML 属性、CSS 样式以及对事件做出反应，让HTML实现动态效果。

【提示：document对象是window对象的子对象之一，属于BOM的一部分，可以通过window.document来访问，但window前缀通常可以省略】

首先了解一下document对象的一些常用属性，非常有用。

document对象常用属性

这些属性返回的是单一对象。这些都是最初始的DOM属性，在DOM3中又添加了许多属性和集合属性，如果想了解可以去搜索DOM3。

document对象属性	描述
body	返回<body>元素。
cookie	设置或返回与当前文档有关的所有 cookie。
domain	返回当前文档的域名。
lastModified	返回文档被最后修改的日期和时间。
referrer	返回载入当前文档的文档的 URL。
title	返回当前文档的标题。
URL	返回当前文档的 URL。

      var body = document.body; //拿到body元素节点
       document.writeln("URL:" + document.URL + "<br>"); //获取当前页面URL地址
       document.writeln("标题：" + document.title + "<br>"); //获取当前页面的标题
       document.writeln("域名：" + document.domain + "<br>

最低0.47元/天解锁文章

南纬的风

关注

4
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
[Javascript]：DOM概念、DOM操作元素、属性、文本节点详解

DOM全称是文档对象模型，是专门用于操作HTML/XML文档的API（应用程序接口）。DOM将文档看作一颗树，其中的每个成分都是对象，这些对象都看作是节点。可以将文档的一切都理解成节点对象。 DOM的组成部分介绍：文档、对象和模型Document(文档)：当用浏览器打开一个页面文档时，这个文档就会被转成document对象，然后就可以调用了。后面会提到该对象的用法。Object(对象)：DOM中的每个节点都是对象，通过对象的属性和方法就能够操作节点。Model(模型)：DOM将整个文档
复制链接

扫一扫

专栏目录