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. Linux的用户与用户组管理

    1.Linux用户与用户组 Linux 是多用户多任务操作系统,Linux 系统支持多个用户在同一时间内登陆,不同用户可以执行不同的任务,并且互不影响.不同用户具有不问的权限,毎个用户在权限允许的范围 ...

  2. matplotlib补充知识及数据清理方法

    今日内容概要 数据操作 数据清洗理论 数据清洗实操 数据操作 read_csv read_excel read_hdf read_html read_json read_msgpack read_sq ...

  3. 超好用的Markdown编辑器Typora中的常见语法

    目录 下载网址 安装 一.标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 二.语法环境 三.单选 四.字体 五.分割符 六.列表 七.图片引入 八.表格 九.超链接 下载网址 正版中 ...

  4. docker 搭建php 开发环境 添加扩展redis、swoole、xdebug

    docker-compose搭建lnmp 先决条件 首先需要安装docker 安装docker-compost 1.创建lnmp工作目录 #创建三个目录 mkdir lnmp && c ...

  5. MySQL — DML语言

    DML 全称 Data Manipulation Language.数据操作语言,用来对数据库表中的数据进行增删改. 1.添加数据 插入一条数据 给指定字段插入数据:insert into 表名 (字 ...

  6. feign服务中调用，传递token

    默认spring-boot 微服务中 用feign来做服务间调用,是不会携带token传递的.为了能让服务间调用的时候带上token,需要进行配置,增强resTemplate   1.先实现请求拦截器 ...

  7. winform中更新UI控件的方案介绍

    这是一个古老的话题...直入主题吧! 对winfrom的控件来说,多线程操作非常容易导致复杂且严重的bug,比如不同线程可能会因场景需要强制设置控件为不同的状态,进而引起并发.加锁.死锁.阻塞等问题. ...

  8. go RWMutex 的实现

    Overview go 里面的 rwlock 是 write preferred 的,可以避免写锁饥饿. 读锁和写锁按照先来后到的规则持有锁,一旦有协程持有了写锁,后面的协程只能在写锁被释放后才能得到 ...

  9. linux基础篇--复习重点成长之路

    linux阶段性复习提纲 1.xshell与shell之间的区别 shell ​ shell是一个由C语言编写的程序,它的主要作用就是在用户和操作系统之间搭起一道桥梁(人机操作界面).直接在命令行执行 ...

  10. java-关于java

    JavaSE(标准版) JavaME(嵌入式)(淘汰) JavaEE(E企业级开发) JavaSE是基础 API端口 JDK Java开发工具 JRE Java运行时环境 JVM 虚拟机 可以在软件和 ...