DOM 小总结

hyuan 发布于2019-08-21 14:16 / 1432人阅读

摘要：在浏览器中，对象是继承自类型的一个实例，表示整个页面。它这种情况称为文档碎片，还无法显示在浏览器的画面中。创建一个文本节点并添加到新元素中的代码如下总结文档对象模型，是针对和文档的一个应用程序编程接口，描绘了一个层次化的节点树。

DOM 是什么

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

D: document

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

O: object

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

M: model

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

Title

标题

内容

文档模型用下图表示：

节点

上面介绍到 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: 节点所包含文本

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

文本

文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含文本节点。如：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。



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

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

创建元素 createElement

作用： 创建新元素
函数只接受一个参数，即要创建函数的标签名。
创建一个

元素代码如下：

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

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

appendChild

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



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 常用方法介绍，分为两类：操作元素、查找元素。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87848.html

DOM 小总结

摘要：在浏览器中，对象是继承自类型的一个实例，表示整个页面。它这种情况称为文档碎片，还无法显示在浏览器的画面中。创建一个文本节点并添加到新元素中的代码如下总结文档对象模型，是针对和文档的一个应用程序编程接口，描绘了一个层次化的节点树。 DOM 是什么文档对象模型，是针对 HTML 和 XML 文档的一个 API (应用程序编程接口)，描绘了一个层次化的节点树。 D: document 当...

yzd 2019-08-01 15:35 评论0 收藏0
标注图+部分举例聊聊Vue生命周期

摘要：天王盖地虎钩子事件得到的结果是小总结实例创建完成后，我们能读取到数据的值，但是还没生成，挂载属性还不存在。此时的阶段解读为挂载完毕阶段我们再打印下此时看看钩子事件得到的结果是可见，已经成功渲染成里面对应的值天王盖地虎了。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。现在项目中遇到了，好好回头总结一波Vue生命周期，以后用到的时候再来翻翻。啥叫V...

Aceyclee 2019-08-23 12:36 评论0 收藏0
小程序项目-总结

摘要：小程序线上代码线上地址小程序技术点官方提供的是不可少的。小程序事件的区分，和的区别，事件冒泡。一定要注意以及单个的生命周期，只会在小程序生成的时候执行一次。小程序-线上代码 github线上地址小程序-技术点官方提供的API 是不可少的。常用的方法，获取用户信息，登录授权，获取设备信息，发送数据请求，页面渲染小程序不支持promise，所以需要额外的引入es6-promise...

Baoyuan 2019-08-30 14:06 评论0 收藏0
小程序项目-总结

摘要：小程序线上代码线上地址小程序技术点官方提供的是不可少的。小程序事件的区分，和的区别，事件冒泡。一定要注意以及单个的生命周期，只会在小程序生成的时候执行一次。小程序-线上代码 github线上地址小程序-技术点官方提供的API 是不可少的。常用的方法，获取用户信息，登录授权，获取设备信息，发送数据请求，页面渲染小程序不支持promise，所以需要额外的引入es6-promise...

spademan 2019-08-22 15:12 评论0 收藏0