JS基础——DOM

最新推荐文章于 2022-04-12 22:57:59 发布

naildingding

最新推荐文章于 2022-04-12 22:57:59 发布

阅读量274

点赞数

分类专栏：红宝书 JS基础文章标签： javascript

本文链接：https://blog.csdn.net/small_sesame/article/details/120187236

版权

红宝书同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

JS基础

7 篇文章 0 订阅

订阅专栏

前面已经将ES和BOM 的一些知识点都有了一些总结。今天进入到DOM的知识点。

这里的知识点有一点点的杂，但也还好，只是一些DOM 的方法，暂时先记住这些方法的作用是什么就好。

我准备将DOM这块的知识点分为两篇——DOM（本篇文章）、DOM扩展（下一篇文章）。

在DOM这篇文章里面我将要根据JS红宝书对节点层次、DOM操作技术进行一个总结提炼。

一、节点层次

Node类型、Document类型、Element类型、Text类型、Comment类型、CDATASection类型、DocumentType类型、DocumentFragment类型、Attr类型

节点之间的关系构成了层次，而所有的页面标记则表现为以一个特定的节点为根节点的属性结构。

1、Node类型：JS中所有节点类型都继承自Node类型

下面的12个方框就代表着继承Node类型的12种节点类型，也就是12种类型常量所代表的12种节点类型。

12种节点类型，分别表示着文档中不同的信息及标记。（我是3个一组记忆的，这12中节点类型是有顺序的，由1-12编号，不要搞错顺序了）

ELEMENT、ATTRIBUTE、TEXT
CDATA_SECTION、ENTITY_REFERENCE、ENTITY
PROCESSING_INSTRUCTION、COMMENT、DOCUMENT
DOCUMENT_TYPE、DOCUMENT_FRAGMENT、NOTATION

2、Document类型

nodeType：9
nodeName：“#document”
nodeValue：null
parentNode：null
childNodes：DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction、Comment
ownerDocument：null

3、Element类型

nodeType：1
nodeName：元素的标签名
nodeValue：null
parentNode：Document 或者 Element
childNodes：。。。

（1）Element的 nodeName == tagName

var div = document.getElementById('myDiv');
alert(div.tagName == div.nodeName);    //true

（2）任何元素的所有特性，也都可以通过DOM元素本身的属性来访问。

只有公认的（非自定义的）特性才会以属性的形式添加到DOM对象中。

开发人员不经常使用getAttribute()，而是只使用对象的属性，只有在取得自定义特性值的情况下，才会使用getAttribute()。

（3）attribute属性：Element类型是唯一一个DOM节点使用attribute属性。

attribute属性中包含一个NamedNodeMap，类似于 NodeList。

就是每一个元素的特性值，会与attribute中的NamedNodeMap中的Attr节点表示，这些个节点就有对应的方法——getNamedItem()、setNamedItem()、removeNamedItem()。

一般来说，由于这些方法不够方便，开发人员更多的会使用getAttribute()、setAttribute()、removeAttribute().

（4）创建元素

document.createElement()

记得在创建后，要使用appendChild（）等方法将其添加进文档树。

4、Text类型

nodeType：3
nodeName："#text"
nodeValue：所包含的文本
parentNode：Element
childNodes：不支持

几个方法：（其实可以和操作字符串的那些个方法联想起来记忆）

Text.nodeValue == Text.data
appendData("text")
deleteData(offset,count)
insertData(offset,text)
replaceData(offset,count,text)
splitText(offset)
substringData(offset,count)

（1）创建文本节点：document.createTextNode()
一般一个元素仅有一个文本节点，某些情况下会出现多节点，当出现多节点时。。。

（2）规范化文本节点：normalize()

var element = document.getElementById("div");
element.className = "message";

var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);

var anotherTextNode = document.createTextNode("Yippee!");
element.appendChild(anotherTextNode);

document.body.appendChild(element);

alert(element.childNodes.length);    //2

element.normalize();
alert(element.childNodes.length);    //1
alert(element.firstChild.nodeValue);    //"Hello world!Yippee!"

（3）分割文本节点：splitText()

这是一个与normalize()相反的方法。

这个方法将文本分成两个文本节点，即按照指定的位置分割nodeValue值。

原来的文本节点将包含从开始到指定位置之前的内容。新文本节点将包含剩下的文本。

分割文本节点是从文本节点中提取数据的一种常用DOM解析技术。

5、Comment类型

注释节点。

与Text类型继承自相同的基类。因此它拥有出splitText()之外的所有字符串操作方法。

但很少使用。

6、CDATASection类型

只针对XML文档

7、DocumentType类型

不常用

8、DocumentFragment类型

作为“仓库”来使用。

可以降低DOM的渲染次数。详见JS红宝书P275-P276.

9、Attr类型

不建议直接访问特性节点。使用getAttribute()、setAttribute()、removeAttribute()更方便。

二、 DOM操作技术

这一部分讲的知识点很简单。其实就是使用DOM操作技术，动态的将<script>、<style>、<table>添加进入到HTML中。

1、动态脚本

创建动态脚本有两种方式——插入外部文件、直接插入JavaScript代码。

function loadScript(url){
    var script = document.createElement("script");
    srcipt.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}

loadScript("client.js");