你真的知道DOM吗（下）----（其他类型，DOM操作技术）

偏执的太偏执、 2022-12-11 07:54 115阅读 0赞

### 文章目录 ###

*  前言
 *  正文
 *   *  其他类型
     *   *  Text类型
         *   *  操作节点文本的方法
             *  创建文本节点
             *  规范化文本节点
         *  Comment类型
         *  DOM0级，DOM1级，DOM2级事件
         *  DocumentFragment类型
         *  Attr类型
     *  DOM操作技术
     *   *  动态脚本
         *   *  外部引入
             *  内部写入
         *  动态样式
         *   *  外部引入
             *  内部写入
 *  小结

# 前言 #

DOM（文档对象模型）是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加，移除和修改页面的某一部分。可以说，DOM是前端开发中最重要的一个渲染API，它决定了页面的样式结构的走向。

# 正文 #

## 其他类型 ##

本文将介绍除node, document, element以外的节点，相对比较简单而且并不常用，所以下面将比较快速地给大家罗列一下其他相当常用的相关节点的知识

### Text类型 ###

#### 操作节点文本的方法 ####

文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML字符，但不能包含HTML代码。使用下列方法可以操作节点中的文本。

*  appendData(text):将text添加到节点的末尾
 *  deleteData(offset, count):删除指定位置的count个字符
 *  insertData(offset, count):在指定位置插入text
 *  replaceData(offset, count, text):用text替换指定位置的count个字符
 *  splitText(offset):从指定位置将当前文本节点分为两个文本节点
 *  substringData(offset, count):提取从offset指定的位置开始到offset+count为止处的字符串  
           除了这些方法之外，文本节点还有一个length属性，保存着节点中的字符的数目。要注意的是，**在修改文本节点时还要注意，此时的字符串会经过HTML（或XML，取决于文档类型）编码。换句话说，小于号、大于号或引号将被转义。**

#### 创建文本节点 ####

可以使用document.createTextNode()创建新文本节点，这个方法接受一个参数—要插入节点中的文本。如果两个文本节点是相邻的同胞节点，那么这两个节点中的文本就会连起来，中间不会有空格。

#### 规范化文本节点 ####

如果在一个包含两个或多个文本节点的父元素上调用normalize()方法，则会将所有文本节点合并成一个节点，结果节点的nodeValue等于将合并前每个文本节点的nodeValue值拼接起来的值

### Comment类型 ###

Comment类型与Text类型继承自相同的基类，因此它拥有除splitText()之外的所有字符串操作方法（因为splitText()方法由TextNode类型提供），与text类型类似，也可以通过nodeValue或datashuxing来取得注释的内容。  
       **在IE8中，注释节点被视为标签名为“!”的元素，也就是，使用getElementByTagName()可以取得注释节点**

### DOM0级，DOM1级，DOM2级事件 ###

- DOM0级事件：0级DOM分为两种，行内事件和元素.on事件名 = 函数  
       - DOM1级事件：1级DOM并没有定义事件相关的内容，所以没有所谓1级DOM事件模型  
       - DOM2级事件：监听方法，有两个方法用来添加和移除事件处理程序，addEventListener()和removeEventListener(),所有DOM节点中都包含这两个方法

### DocumentFragment类型 ###

在所有的节点类型中，只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源，也就是说文档片段本身永远不会成为文档树的一部分。  
       那么问题来了，这个节点类型有什么用呢？  
       **作为“仓库”来暂时保存节点类型的操作**  
       多次进行节点类型的修改操作，会导致浏览器的反复渲染，而这个类型可以保存创建的列表项，然后一次性将修改加入文档，来避免重复渲染的问题

### Attr类型 ###

特性节点，虽然它们也是节点，但是不被认为是DOM树里的一部分，使用getAttribute()，setAttribute()和removeAttribute()比操作特性节点更为方便

## DOM操作技术 ##

对于DOM 的一些操作，相信认真看了前面章节的小伙伴已经不陌生了，这里提供几种使用DOM操作去操作页面的一些情况，供大家自己体会加深理解，大家可以自己尝试写一写以加深理解。

### 动态脚本 ###

js可以通过外部引入，也可以通过内部样式写入，同样，使用DOM操作脚本也分为这两种方式

#### 外部引入 ####

var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'client.js';
    document.body.appendChild(script);

#### 内部写入 ####

var script = document.createElement('script');
    script.type = 'text/javascript';
    script.appendChild(document.createTextNode('function sayHi(){console.log('hi');}));
    document.body.appendChild(script);

### 动态样式 ###

css和js一样，可以外部引入，也可以内部写入。

#### 外部引入 ####

var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'styles.css';
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(link);

#### 内部写入 ####

var style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode('body{background-color: red;}'));
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(style);

# 小结 #

DOM操作往往是javascript程序中开销最大的部分，而因访问NodeList导致的问题为最多。NodeList对象都是‘动态的’，这就意味着每次访问NodeList对象，都会运行一次查询。有鉴于此，最好的方法就是尽量减少DOM操作

小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ea963b0e779f4ef283f7d9bcf5caf4fb.png