第十章 DOM

最新推荐文章于 2023-09-01 22:57:51 发布

哈哩噜啾啾哈呀呀

最新推荐文章于 2023-09-01 22:57:51 发布

阅读量170

点赞数

分类专栏：读书笔记 # JavaScript高级程序设计

本文链接：https://blog.csdn.net/weixin_42798473/article/details/105343932

版权

读书笔记同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

JavaScript高级程序设计

11 篇文章 0 订阅

订阅专栏

节点层次

文档元素是文档的外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在 HTML 页面中，文档元素始终都是元素。

每一段标记都可以通过树中的一个节点来表示：HTML 元素通过元素节点表示，特性（attribute）通过特性节点表示，文档类型通过文档类型节点表示，而注释则通过注释节点表示。总共有 12 种节点类型，这些类型都继承自一个基类型，Node类型。

Node类型

JavaScript中的所有节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。

每个节点都有一个 nodeType 属性，用于表明节点的类型。节点类型由在 Node 类型中定义的下列 12个数值常量来表示，任何节点类型必居其一：

Node.ELEMENT_NODE(1)；
Node.ATTRIBUTE_NODE(2)；
Node.TEXT_NODE(3)；
Node.CDATA_SECTION_NODE(4)；
Node.ENTITY_REFERENCE_NODE(5)；
Node.ENTITY_NODE(6)；
Node.PROCESSING_INSTRUCTION_NODE(7)；
Node.COMMENT_NODE(8)；
Node.DOCUMENT_NODE(9)；
Node.DOCUMENT_TYPE_NODE(10)；
Node.DOCUMENT_FRAGMENT_NODE(11)；
Node.NOTATION_NODE(12)

可以通过比较的方式确定节点的类型

if (someNode.nodeType == Node.ELEMENT_NODE){   //在 IE中无效
     alert("Node is an element."); 
} 

if (someNode.nodeType == 1){    //适用于所有浏览器
     alert("Node is an element."); 
}

nodeName 和 nodeValue 属性

这两个属性的值完全取决于节点的类型。在使用这两个值以前，好是像下面这样先检测一下节点的类型。

if (someNode.nodeType == 1){
     value = someNode.nodeName;    //nodeName 的值是元素的标签名 
}

首先检查节点类型，看它是不是一个元素。如果是，则取得并保存 nodeName 的值。对于元素节点，nodeName 中保存的始终都是元素的标签名，而 nodeValue 的值则始终为 null。

节点关系

父子节点，兄弟节点

childNodes属性 NodeList对象

每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。NodeList 是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。请注意，虽然可以通过方括号语法来访问 NodeList 的值，而且这个对象也有 length 属性，但它并不是 Array 的实例。NodeList 对象的独特之处在于，它实际上是基于 DOM结构动态执行查询的结果，因此 DOM结构的变化能够自动反映在 NodeList 对象中。

对 arguments 对象使用 Array.prototype.slice()方法可以将其转换为数组。而采用同样的方法，也可以将 NodeList 对象转换为数组。

var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

NodeList对象是一个类数组对象，可以通过数组的方法[]访问对象中的元素，但是这个对象是动态的，当其他的dom操作改变NodeList的内容时，NodeList对象的属性（length）也会相对应变化

parentNode 属性

每个节点都有一个 parentNode 属性，该属性指向文档树中的父节点。包含在 childNodes 列表中的所有节点都具有相同的父节点，因此它们的 parentNode 属性都指向同一个节点。

此外，包含在 childNodes 列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的 previousSibling 和 nextSibling 属性，可以访问同一列表中的其他节点。列表中第一个节点的 previousSibling 属性值为 null，而列表中后一个节点的 nextSibling 属性的值同样也为 null

父节点与其第一个和后一个子节点之间也存在特殊关系。父节点的 firstChild 和 lastChild 属性分别指向其 childNodes 列表中的第一个和后一个节点。

如果没有子节点，那么 firstChild 和 lastChild 的值均为 null。

hasChildNodes()也是一个非常有用的方法，这个方法在节点包含一或多个子节点的情况下返回 true；应该说，这是比查询 childNodes 列表的 length 属性更简单的方法。

ownerDocument属性

所有节点都有的后一个属性是 ownerDocument，该属性指向表示整个文档的文档节点。这种关系表示的是任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。通过这个属性，我们可以不必在节点层次中通过层层回溯到达顶端，而是可以直接访问文档节点。

操作节点

appendChild()

常用的方法是 appendChild()，用于向 childNodes 列表的末尾添加一个节点。添加节点后，childNodes 的新增节点、父节点及以前的后一个子节点的关系指针都会相应地得到更新。更新完成后，appendChild() 返回新增的节点。

如果传入到 appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。即使可以将 DOM树看成是由一系列指针连接起来的，但任何 DOM节点也不能同时出现在文档中的多个位置上。

//someNode 有多个子节点 将第一个子节点移到最后
var returnedNode = someNode.appendChild(someNode.firstChild); 
alert(returnedNode == someNode.firstChild);      //false 
alert(returnedNode == someNode.lastChild);      //true

insertBefore()

如果需要把节点放在 childNodes 列表中某个特定的位置上，而不是放在末尾，那么可以使用 insertBefore()方法。这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。如果参照节点是 null，则 insertBefore()与 appendChild()执行相同的操作

replaceChild()

replaceChild()方法接受的两个参数是：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。

在使用 replaceChild()插入一个节点时，该节点的所有关系指针都会从被它替换的节点复制过来。尽管从技术上讲，被替换的节点仍然还在文档中，但它在文档中已经没有了自己的位置。

removeChild()

这个方法接受一个参数，即要移除的节点。被移除的节点将成为方法的返回值

与使用 replaceChild()方法一样，通过 removeChild()移除的节点仍然为文档所有，只不过在文档中已经没有了自己的位置。

其他方法

有两个方法是所有类型的节点都有的。

cloneNode()

cloneNode()，用于创建调用这个方法的节点的一个完全相同的副本。cloneNode()方法接受一个布尔值参数，表示是否执行深复制。在参数为 true 的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为 false 的情况下，执行浅复制，即只复制节点本身。复制后返回的节点副本属于文档所有，但并没有为它指定父节点。

这个节点副本就成为了一个“孤儿”，除非通过 appendChild()、insertBefore()或 replaceChild()将它添加到文档中。

normalize()

normalize()，这个方法唯一的作用就是处理文档树中的文本节点。由于解析器的实现或 DOM操作等原因，可能会出现文本节点不包含文本，或者接连出现两个文本节点的情况。当在某个节点上调用这个方法时，就会在该节点的后代节点中查找上述两种情况。如果找到了空文本节点，则删除它；如果找到相邻的文本节点，则将它们合并为一个文本节点。

主要是用来处理HTML中标签的空格和换行的（空的文本节点）

Document类型

JavaScript通过 Document 类型表示文档。在浏览器中，document 对象是 HTMLDocument（继承自 Document 类型）的一个实例，表示整个 HTML页面。而且，document 对象是 window 对象的一个属性，因此可以将其作为全局对象来访问。

文档的子节点

一个就是 documentElement 属性，该属性始终指向 HTML页面中的元素。另一个就是通过 childNodes 列表访问文档元素，但通过 documentElement 属性则能更快捷、更直接地访问该元素。
document 对象还有一个 body 属性，直接指向<body>元素。
所有浏览器都支持 document.documentElement 和 document.body 属性。
Document 另一个可能的子节点是 DocumentType。通常将<!DOCTYPE>标签看成一个与文档其他部分不同的实体，可以通过 doctype 属性（在浏览器中是 document.doctype）来访问它的信息。
由于浏览器对 document.doctype 的支持不一致，因此这个属性的用处很有限。

文档信息

title属性

title，包含着<title>元素中的文本——显示在浏览器窗口的标题栏或标签页上。通过这个属性可以取得当前页面的标题，也可以修改当前页面的标题并反映在浏览器的标题栏中。修改 title 属性的值不会改变<title> 元素。

//取得文档标题 
var originalTitle = document.title; 
 
//设置文档标题 
document.title = "New page title";

URL、domain 和 referrer

URL 属性中包含页面完整的 URL（即地址栏中显示的 URL），domain 属性中只包含页面的域名，而 referrer 属性中则保存着链接到当前页面的那个页面的 URL。在没有来源页面的情况下，referrer 属性中可能会包含空字符串。所有这些信息都存在于请求的 HTTP 头部，只不过是通过这些属性让我们能够在 JavaScrip中访问它们而已

在这 3个属性中，只有 domain 是可以设置的。但由于安全方面的限制，也并非可以给 domain 设置任何值。如果 URL中包含一个子域名，例如 p2p.wrox.com，那么就只能将 domain 设置为"wrox.com" （URL 中包含"www"，如 www.wrox.com 时，也是如此）。不能将这个属性设置为 URL 中不包含的域

可以通过domain属性实现同一页面中不同框架页面间的跨域名通信

查找元素

getElementById()和 getElementsByTagName()

ID必须与页面中元素的 id 特性（attribute）严格匹配，包括大小写。
如果页面中多个元素的 ID值相同，getElementById()只返回文档中第一次出现的元素
getElementsByTagName()方法会返回一个 HTMLCollection 对象，作为一个“动态”集合
HTMLCollection 对象还有一个方法，叫做 namedItem()，使用这个方法可以通过元素的 name 特性取得集合中的项。
对 HTMLCollection 而言，我们可以向方括号中传入数值或字符串形式的索引值。在后台，对数值索引就会调用 item()，而对字符串索引就会调用 namedItem()。
要想取得文档中的所有元素，可以向 getElementsByTagName()中传入" * "。

var allElements = document.getElementsByTagName("*");

getElementsByName()

这个方法会返回带有给定 name 特性的所有元素。常使用 getElementsByName()方法的情况是取得单选按钮；为了确保发送给浏览器的值正确无误，所有单选按钮必须具有相同的 name 特性

<fieldset>
    <legend>Which color do you prefer?</legend>
    <ul>
        <li>
            <input type="radio" value="red" name="color" id="colorRed">
            <label for="colorRed">Red</label>
        </li>
        <li>
            <input type="radio" value="green" name="color" id="colorGreen">
            <label for="colorGreen">Green</label>
        </li>
        <li>
            <input type="radio" value="blue" name="color" id="colorBlue">
            <label for="colorBlue">Blue</label>
        </li>
    </ul>
</fieldset>

其中所有单选按钮的 name 特性值都是"color"，但它们的 ID可以不同。ID的作用在于将<label>元素应用到每个单选按钮，而 name 特性则用以确保三个值中只有一个被发送给浏览器。

    var radios = document.getElementsByName("color");
    document.getElementsByTagName('ul')[0].onclick = function() {
        for(const item of radios) {
            if (item.checked) console.log(item.value)
        }
    }

特殊集合

document.anchors，包含文档中所有带 name 特性的<a>元素；
document.forms，包含文档中所有的<form>元素，与 document.getElementsByTagName(“form”) 得到的结果相同；
document.images，包含文档中所有的<img>元素，与 document.getElementsByTagName (“img”)得到的结果相同；
document.links，包含文档中所有带 href 特性的<a>元素。

Element类型

要访问元素的标签名，可以使用 nodeName 属性，也可以使用 tagName 属性；这两个属性会返回相同的值（使用后者主要是为了清晰起见）。

在 HTML中，标签名始终都以全部大写表示

HTML元素

所有 HTML元素都由 HTMLElement 类型表示，不是直接通过这个类型，也是通过它的子类型来表示。HTMLElement类型直接继承自Element并添加了一些属性。

取得特性

每个元素都有一或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。操作特性的 DOM方法主要有三个，分别是 getAttribute()、setAttribute()和 removeAttribute()。这三个方法可以针对任何特性使用，包括那些以 HTMLElement 类型属性的形式定义的特性

如果给定名称的特性不存在，getAttribute()返回 null。

通过 getAttribute()方法也可以取得自定义特性（即标准 HTML 语言中没有的特性）的值

特性的名称是不区分大小写的，即"ID"和"id"代表的都是同一个特性。
根据 HTML5规范，自定义特性应该加上 data-前缀以便验证。

特殊情况

style，用于通过 CSS为元素指定样式。在通过 getAttribute()访问时，返回的 style 特性值中包含的是 CSS文本，而通过属性来访问它则会返回一个对象。
onclick 这样的事件处理程序。当在元素上使用时，onclick 特性中包含的是 JavaScript 代码，如果通过 getAttribute()访问，则会返回相应代码的字符串。而在访问 onclick 属性时，则会返回一个 JavaScript函数（如果未在元素中指定相应特性，则返回 null）。这是因为 onclick 及其他事件处理程序属性本身就应该被赋予函数值。

设置特性

setAttribute()，这个方法接受两个参数：要设置的特性名和值。如果特性已经存在，setAttribute()会以指定的值替换现有的值；如果特性不存在，setAttribute() 则创建该属性并设置相应的值。

通过 setAttribute()方法既可以操作 HTML 特性也可以操作自定义特性。通过这个方法设置的特性名会被统一转换为小写形式，即"ID"终会变成"id"。

removeAttribute()，这个方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性

attributes 属性

Element 类型是使用 attributes 属性的唯一一个 DOM节点类型。attributes 属性中包含一个 NamedNodeMap，与 NodeList 类似，也是一个“动态”的集合。元素的每一个特性都由一个 Attr 节点表示，每个节点都保存在 NamedNodeMap 对象中。

如果想要遍历元素的特性，attributes 属性倒是可以派上用场。

创建元素

使用 document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。这个标签名在 HTML文档中不区分大小写

在使用 createElement()方法创建新元素的同时，也为新元素设置了 ownerDocuemnt 属性。

元素的子节点

元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。元素的 childNodes 属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。

元素也支持 getElementsByTagName()方法。在通过元素调用这个方法时，除了搜索起点是当前元素之外，其他方面都跟通过 document 调用这个方法相同，因此结果只会返回当前元素的后代

Text类型

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

可以通过 nodeValue 属性或 data 属性访问 Text 节点中包含的文本，这两个属性中包含的值相同。对 nodeValue 的修改也会通过 data 反映出来，反之亦然。

appendData(text)：将 text 添加到节点的末尾。
deleteData(offset, count)：从 offset 指定的位置开始删除 count 个字符。
insertData(offset, text)：在 offset 指定的位置插入 text。
replaceData(offset, count, text)：用 text 替换从 offset 指定的位置开始到 offset+ count 为止处的文本。
splitText(offset)：从 offset 指定的位置将当前文本节点分成两个文本节点。
substringData(offset, count)：提取从 offset 指定的位置开始到 offset+count 为止处的字符串。

除了这些方法之外，文本节点还有一个 length 属性，保存着节点中字符的数目。而且， nodeValue.length 和 data.length 中也保存着同样的值。

如果这个文本节点当前存在于文档树中，那么修改文本节点的结果就会立即得到反映。在修改文本节点时还要注意，此时的字符串会经过 HTML（或 XML，取决于文档类型）编码。

div.firstChild.nodeValue = "Some <strong>other</strong> message"; 
//输出结果是"Some &lt;strong&gt;other&lt;/strong&gt; message"

创建文本节点

可以使用 document.createTextNode()创建新文本节点，这个方法接受一个参数——要插入节点中的文本。与设置已有文本节点的值一样，作为参数的文本也将按照 HTML或 XML的格式进行编码。

规范化文本节点 normalize()

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

分割文本节点 splitText()

splitText()这个方法会将一个文本节点分成两个文本节点，即按照指定的位置分割 nodeValue 值。原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。这个方法会返回一个新文本节点，该节点与原节点的 parentNode 相同。

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

Comment类型

注释在 DOM中是通过 Comment 类型来表示的

Comment 类型与 Text 类型继承自相同的基类，因此它拥有除 splitText()之外的所有字符串操作方法。
与 Text 类型相似，也可以通过 nodeValue 或 data 属性来取得注释的内容。
使用 document.createComment()并为其传递注释文本可以创建注释节点
浏览器也不会识别位于</html>标签后面的注释。

DocumentFragment类型

DocumentFragment 在文档中没有对应的标记。
DOM 规定文档片段（document fragment）是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。
要创建文档片段，可以使用 document.createDocumentFragment()方法

var fragment = document.createDocumentFragment();

文档片段继承了 Node 的所有方法，通常用于执行那些针对文档的 DOM操作。如果将文档中的节点添加到文档片段中，就会从文档树中移除该节点，也不会从浏览器中再看到该节点。添加到文档片段中的新节点同样也不属于文档树。可以通过 appendChild()或 insertBefore()将文档片段中内容添加到文档中。在将文档片段作为参数传递给这两个方法时，实际上只会将文档片段的所有子节点添加到相应位置上；文档片段本身永远不会成为文档树的一部分。

DOM操作技术

动态脚本

通过javascript动态的在html中添加script元素

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

也可以将JavaScript代码作为text节点或者字符串添加到script元素中，然后再将其加入到html中

动态样式

和动态脚本一样，只不过这次添加的是CSS文件或者样式字符串
可以使用link元素加载css文件

function loadStyles(url) {
  var link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = url;
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
}

也可以使用style元素加载样式字符串

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

使用NodeList

理解 NodeList 及其“近亲”NamedNodeMap 和 HTMLCollection，是从整体上透彻理解 DOM的关键所在。这三个集合都是“动态的”；换句话说，每当文档结构发生变化时，它们都会得到更新。因此，它们始终都会保存着新、准确的信息。从本质上说，所有 NodeList 对象都是在访问 DOM文档时实时运行的查询。

一般来说，应该尽量减少访问 NodeList 的次数。因为每次访问 NodeList，都会运行一次基于文档的查询。所以，可以考虑将从 NodeList 中取得的值缓存起来。