DOM 是什么

文档对象模型，是针对 HTML 和 XML 文档的一个 API (应用程序编程接口)， 描绘了一个层次化的节点树。

D: document

当 web 浏览器浏览一个页面的时候，DOM 就在幕后把你编辑的网页文档转换成一个文档对象。(这也是为什么浏览器打开一个 html 文档显示的是丰富的内容，而在文本编辑器打开显示的是 html 源码的原因)

O: object

JavaScript 中宿主对象 window 中的一个属性：document。 document 对象主要处理网页内容。

M: model

DOM 把一份文档表示为一棵树。如文档：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <title>Title</title>

  </head>

  <body>

    <h3>

      <a href="#">标题</a>

    </h3>

    <p>内容</p>

  </body>

</html>

文档模型用下图表示：

节点

上面介绍到 DOM 可以将任何的 html 与 xml 描绘成一个由多层节点构成的树。
而DOM 的每个节点都有 nodeType , nodeName 和 nodeValue 属性，可以通过这些属性了解节点的具体信息。
接下来介绍其中 5 种节点：

Document - 文档节点

nodeType: 9
nodeName: #document
nodeValue: null

JavaScript 通过 Document 类型表示文档。
在浏览器中，document 对象是 HTMLDocument(继承自 Document 类型)的一个实例，表示整个 HTML 页面。而且 document 对象是 window 对象的一个属性。

可尝试在 chrome 浏览器控制台中打出：

console.log(document.nodeType);

< 9

console.log(document.nodeName);

< #document

console.log(document.nodeValue);

< null

Element - 元素节点

nodeType: 1
nodeName: 元素的标签名
nodeValue: null

文本段落的 nodeName：p
链接的 nodeName：a
元素可以包含其他元素，如标题包含链接等。
html 是根元素，唯一一个不能被包含在其他元素里面的元素。

Text - 文本节点

nodeType: 3
nodeName: #text
nodeValue: 节点所包含文本

页面中，我们看到的文字都是一个个文本节点。
如：

<p>文本</p>

<!-- 这里的"文本"就是一个文本节点。-->

<p> </p>

<!-- 这里 p 标签包含一个空格，也是一个文本节点。 -->

文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含文本节点。如：ul、 img

Attr - 属性节点

属性就是存在于元素的 attributes 属性中的节点。通俗的讲，属性节点用来对元素做出更具体的描述。

nodeType: 2
nodeName: 属性的名称
nodeValue: 属性的值

例如：title, align, alt ...

Comment - 注释节点

nodeType: 8
nodeName: #comment
nodeValue: 注释的内容

如：
<!-- 注释注释 --> 就是一个注释节点

DOM 常用属性

childNodes: 获取任何一个元素的所有类型的节点，不仅仅是元素节点，还有文本节点、注释节点等。
nodeType: 节点类型值，总共有 12 中可取值
nodeName: 节点名称
nodeValue: 一个节点的值
firstChild: 元素的第一个元素
lastChild: 元素的最后一个元素
innerHTML: 读、写某给定元素里的 HTML 内容

DOM 常用方法

查找元素

getElementById

通过 ID 查找元素。
函数参数为 ID 的值，如果元素存在，返回 document 对象，不存在返回 null。

<div id="ts" ></div>

var ele = document.getElementById('ts');

getElementsByClassName
通过 class 名称查找元素
函数参数为 class 的值，如果元素匹配到，返回的是 document 对象集合，不匹配则返回空数组。

创建元素

createElement

作用： 创建新元素
函数只接受一个参数，即要创建函数的标签名。
创建一个 <div> 元素代码如下：

var $div = document.createElement('div');

元素被创建后，可以为其添加更多的子节点，或者操作元素特性等。
虽然这个元素已经存在并且已经拥有了自己的 DOM 属性，但它还不是任何一颗 DOM 树的组成部分，它只是游荡在 JavaScript 世界里的一个孤儿。它这种情况称为文档碎片，还无法显示在浏览器的画面中。
可以使用 appendChild 添加到 DOM 树中 。

appendChild

作用：将节点添加到另一个节点的末端
函数参数只有一个，为即将被添加的节点。
如：

<div id="test"></div>

var div = document.createElement('div');

var ele = document.getElementById('test');

ele.appendChild(node);

createTextNode

作用：创建新文本节点
函数只接受一个函数，即要插入节点中的文本。
创建一个文本节点并添加到新元素中的代码如下：

var textNode = document.createTextNode('hello node!');

var div = document.createElement('div');

div.appendChild(textNode);

总结

DOM(文档对象模型)，是针对 HTML 和 XML 文档的一个 API (应用程序编程接口)， 描绘了一个层次化的节点树。
DOM 的 5 种节点类型：文档、元素、文本、属性、注释。
DOM 常用属性介绍。
DOM 常用方法介绍，分为两类：操作元素、查找元素。

DOM 小总结的更多相关文章

  1. dom小练习

    dom小练习 学习要点 综合运用学过的知识完成几个综合小练习,巩固学过的知识. 阶段小练习8-1:改变网页字体的大小 要求和提示: 要求:当用户选择‘大/中/小’的选项时,页面字体发生相应的变化 阶段 ...

  2. python: DOM 小实例

    一.全选 全部取消  反选 全选:选择指定的所有项目. 全部取消: 取消所有选定的项目. 反选: 选择未选定的,之前已选定的则取消. <!DOCTYPE html> <html la ...

  3. dom小总结

    DOM是W3C的标准,分为3个不同的部分: 核心DOM:针对任何结构化文档的标准模型,XML DOM:针对XML文档的标准模型,HTML DOM:针对HTML文档的标准模型. HTML DOM中所有事 ...

  4. JS基础(一)dom小实例

    DOM的新增示例 <script language="JavaScript"> window.onload = function(){ //createDocument ...

  5. jquery VS Dom(小实例单选-多选-反选)

    一直以来大家对jquery评价莫过于六个字 “吃得少,干的多” ,应用实例让大家看看这款牛到爆的插件能帮我们做什么,话不多说,直接加码 <!DOCTYPE html> <html l ...

  6. Js操作DOM小练习_01

    1.页面引入jQuery文件和bootstrap文件: 2.贴上代码 <!DOCTYPE html> <html lang="en"> <head&g ...

  7. 《微信小程序七日谈》- 第一天：人生若只如初见

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...

  8. JavaScript Dom入门

    好像代码太杂了,博客园里跑不起来,单独复制到html中本地测试都是没有问题的. JavaScript JavaScript 是属于 web 的语言,它适用于 PC.笔记本电脑.平板电脑和移动电话. J ...

  9. DOM节点详解

    @ 目录 学习总结 1. 什么是 DOM 2. HTMLDOM 3. 元素获取 元素获取方式: 元素节点的属性操作 4. Node 对象的属性和方法 常用属性 常用方法 5. 事件处理 事件驱动编程 ...

随机推荐

  1. docker:打包node+npm+pm2运行环境镜像

    最近公司有一个外包项目需要在不能连外网的情况下部署node项目到甲方公司内部.直接使用node官网的安装包可以获得node运行环境,但像pm2这种工具要离线装就会比较费劲,所以最终选择了使用docke ...

  2. LeetCode-019-删除链表的倒数第 N 个结点

    删除链表的倒数第 N 个结点 题目描述:给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点. 进阶:你能尝试使用一趟扫描实现吗? 示例说明请见LeetCode官网. 来源:力扣(Leet ...

  3. Laravel7-验证器使用

  4. SQL Server2012安装教程

    什么是SQL? 结构化查询语言(Structured Query Language)简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询.更新和管理关系数据库系统 ...

  5. ASP.NET Core 6框架揭秘实例演示[25]：配置与承载环境的应用

    与服务注册一样,针对配置的设置同样可以采用三种不同的编程模式.第一种是利用WebApplicationBuilder的Host属性返回的IHostBuilder对象,它可以帮助我们设置面向宿主和应用的 ...

  6. Redis 新特性：多线程模型解读

    Redis 官方在 2020 年 5 月正式推出 6.0 版本,提供很多振奋人心的新特性,所以备受关注. 主要特性如下: 多线程处理网络 IO: 客户端缓存: 细粒度权限控制(ACL): RESP3  ...

  7. [源码解析] TensorFlow 分布式环境(4) --- WorkerCache

    [源码解析] TensorFlow 分布式环境(4) --- WorkerCache 目录 [源码解析] TensorFlow 分布式环境(4) --- WorkerCache 1. WorkerCa ...

  8. springcloud学习00-开发工具相关准备

    用maven构建springcloud项目,目录结构(图片来源:https://blog.csdn.net/qq_36688143/article/details/82755492) 1.maven ...

  9. CVE-2014-3120 （命令执行漏洞）

    环境配置 vulhub环境搭建 https://blog.csdn.net/qq_36374896/article/details/84102101 启动docker环境 cd vulhub-mast ...

  10. CF914G Sum the Fibonacci（FWT，FST）

    CF914G Sum the Fibonacci(FWT,FST) Luogu 题解时间 一堆FWT和FST缝合而来的丑陋产物. 对 $ cnt[s_{a}] $ 和 $ cnt[s_{b}] $ 求 ...