DOM学习笔记

比眉伴天荒 2022-04-15 02:38 282阅读 0赞

DOM（文档对象模型，Document文档，Object对象，Model模型）

在开发中的地位和作用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70][]

1、解释下面名词

HTML XHTML DHTML XML：

HTML：超文本标记语言，专门编写网页内容的语言        --元素定义可大小写

XHTML：严格的HTML语言标准                                      --元素定义小写

DHTML：动态网页技术的统称  DHTML=HTML+CSS+JS

XML：可扩展的标记语言，可自定义标签，主要有配置文件和存储数据格式两种功能

专门用来存储/传输自描述的结构化数据，逐渐被json替代了

2、BOM 与 DOM 区别

BOM：浏览器对象模型(API),专门操作浏览器窗口的API，没有标准

DOM：文档对象模型(API),专门操作网页内容的API，可以对网页中任意对象，做任何修改，DOM是标准，90%以上浏览器都严格兼容

3、W3C DOM由以下三部分组成：

核心DOM - 针对任何结构化文档(XML,HTML)的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

HTML DOM不能完成所有功能，实际开发中都是核心DOM与HTML DOM配合使用。

HTML DOM：网页中一切都是对象(元素，属性，文字)

同一网页中的所有对象，在内存中父子相连，形成一棵DOM树。

4、DOM树：

文档中的每个元素，属性，文字，注释，都被看做一个节点对象——Node——所有节点对象的父类型

当网页被加载进内存时，浏览器会为网页创建一个document对象。所有节点对象都是document对象的子节点。

document，封装了对网页中所有子节点的增加，删除，查找

**DOM节点树**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 1][]

5、七种常见的DOM节点类型（共12个）

例、

<!DOCTYPE html>  <html lang="en">

<head>

<title>DocumentFragment文档片段节点</title>

</head>

</ul>

var frag = document.createDocumentFragment();

for (var i = 0; i < 10; i++) \{

var li = document.createElement("li");

li.innerHTML = "List item" + i;

frag.appendChild(li);

document.getElementById("list-node").appendChild(frag);

</script>

</body>

</html>

①Element(元素节点)：

是组成文档树的重要部分，它表示了html、xml文档中的元素。通常元素因为有子元素、文本节点或者两者的结合，元素节点是唯一能够拥有属性的节点类型。

例子中的:html、heade、meta、title、body、div、ul、li、script都属于Element(元素节点);

②Attr(属性节点)：

代表了元素中的属性，因为属性实际上是附属于元素的，因此属性节点不能被看做是元素的子节点。因而在DOM中属性没有被认为是文档树的一部分。换句话说，属性节点其实被看做是包含它的元素节点的一部分，它并不作为单独的一个节点在文档树中出现。

例子中的:lang、charset、id、class都属于Attr(属性节点);

③Text(文本节点)：

是只包含文本内容的节点，在xml中称为字符数据，它可以由更多的信息组成，也可以只包含空白。在文档树中元素的文本内容和属性的文本内容都是由文本节点来表示的。

例子中的:DocumentFragment文档片段节点、test1、test2、元素节点之后的空白区域都属于Text(文本节点);

④Comment(注释节点)：

表示注释的内容

例子中的都属于Comment(注释节点);

⑤Document(文档节点) ：

是文档树的根节点，它是文档中其他所有节点的父节点。要注意的是，文档节点并不是html、xml文档的根元素，因为在xml文档中，处理指令、注释等内容可以出现在根元素之外，所以我们在构造DOM树的时候，根元素并不适合作为根节点，因此就有了文档节点，而根元素是作为文档节点的子节点出现的。

例子中的：<!DOCTYPE html>、html作为Document(文档节点)的子节点出现;

⑥DocumentType(文档类型节点)：

每一个Document都有一个DocumentType属性，它的值或者是null，或者是DocumentType对象。比如声明文档类型时<!doctype html>就是文档类型节点。

例子中的：<!DOCTYPE html> 就属于DocumentType(文档类型节点);

⑦DocumentFragment(文档片段节点)：//这个后面会详细说

是轻量级的或最小的Document对象，它表示文档的一部分或者是一段，不属于文档树。不过它有一种特殊的行为，该行为使得它非常有用。比如：当请求把一个DocumentFragment节点插入到文档的时候，插入的不是DocumentFragment自身，而是它的所有的子孙节点。这使得DocumentFragment成了有用的占位符，暂时存放那些一次插入文档的节点，同时它还有利于实现文档的剪切、复制和粘贴等操作。

例子中的:var frag = document.createDocumentFragment();就属于DocumentFragment(文档片段节点);

上面的七种类型的介绍摘自简书微醺岁月的《深入浅出DOM基础》

6、Node类型的3个公共属性

①nodeType: 节点的类型的数值  专门用于判断获得的节点类型

如果是元素节点，返回1

如果是文本节点，返回3

②nodeName: 节点的名称  专门用于判断获得的标签名

如果是元素节点，返回标签名

强调：nodeName返回的都是全大写标签名，如果是文本节点，返回\#text

③nodeValue: 节点的值：

元素节点，返回null

文本节点，返回文本的内容

④各类节点的nodeType、nodeName值与nodeValue的值

<table style="width:418.6pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:120px;"> 节点类型 </td> 
 <td style="vertical-align:top;width:211px;"> 字符常量 </td> 
 <td style="vertical-align:top;width:32px;"> 数值常量 </td> 
 <td style="vertical-align:top;width:104px;"> nodeName </td> 
 <td style="vertical-align:top;width:98.2pt;"> nodeValue </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:120px;"> Element（元素节点） </td> 
 <td style="vertical-align:top;width:211px;"> ELEMENT_NODE </td> 
 <td style="vertical-align:top;width:32px;"> 1（常用） </td> 
 <td style="vertical-align:top;width:104px;"> 元素的标签名 </td> 
 <td style="vertical-align:top;width:98.2pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:120px;"> Attr（属性节点） </td> 
 <td style="vertical-align:top;width:211px;"> ATTRIBUTE_NODE </td> 
 <td style="vertical-align:top;width:32px;"> 2 </td> 
 <td style="vertical-align:top;width:104px;"> 属性的名称 </td> 
 <td style="vertical-align:top;width:98.2pt;"> 属性的值 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:120px;"> Text（文本节点） </td> 
 <td style="vertical-align:top;width:211px;"> TEXT_NODE </td> 
 <td style="vertical-align:top;width:32px;"> 3（常用） </td> 
 <td style="vertical-align:top;width:104px;"> #text </td> 
 <td style="vertical-align:top;width:98.2pt;"> 节点所包含文本 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:120px;"> Comment（注释节点） </td> 
 <td style="vertical-align:top;width:211px;"> COMMENT_NODE </td> 
 <td style="vertical-align:top;width:32px;"> 8 </td> 
 <td style="vertical-align:top;width:104px;"> #comment </td> 
 <td style="vertical-align:top;width:98.2pt;"> 注释的内容 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:120px;"> Document（文档节点） </td> 
 <td style="vertical-align:top;width:211px;"> DOCUMENT_NODE </td> 
 <td style="vertical-align:top;width:32px;"> 9 </td> 
 <td style="vertical-align:top;width:104px;"> &nbsp; </td> 
 <td style="vertical-align:top;width:98.2pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:120px;"> DocumentType （文档类型节点） </td> 
 <td style="vertical-align:top;width:211px;"> DOCUMENT_TYPE_NODE </td> 
 <td style="vertical-align:top;width:32px;"> 10 </td> 
 <td style="vertical-align:top;width:104px;"> doctype的名称（html） </td> 
 <td style="vertical-align:top;width:98.2pt;"> null </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:120px;"> DocumentFragment （文档片段节点） </td> 
 <td style="vertical-align:top;width:211px;"> DOCUMENT-FRAGMENT_NODE </td> 
 <td style="vertical-align:top;width:32px;"> 11 </td> 
 <td style="vertical-align:top;width:104px;"> #document_fragment </td> 
 <td style="vertical-align:top;width:98.2pt;"> null </td> 
 </tr> 
 </tbody> 
</table>

7、DOM树6种关系及6个属性：

父子：4个：parentNode childNodes firstChild lastChild

兄弟：2个：previousSibling  nextSibling

childNodes: 获得当前节点对象下的所有子节点，类数组对象，\[i\]    .length

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 2][]

8、浏览器渲染的基本流程和重绘，回流

如果你想了解的更详细，请看我写的另一篇博客《浏览器渲染大致流程和重绘，回流》

①浏览器会**将****HTML****解析成一个DOM树**，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

**将CSS解析成 CSS Rule Tree** 。

②**根据DOM树和CSS**** Rule Tree****来构造 Render Tree****（渲染树）****。**

注意：Render Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。

③有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。这一步操作称之为layout，顾名思义就是**计算出每个节点在屏幕中的位置**进行布局操作。

④接下来就是绘制，即**遍历render树，并使用UI后端层绘制每个节点**。

reflow（回流）：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，就称这个回退的过程叫 reflow。

repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

9、元素树：仅由元素节点组成的树结构，与节点树6个属性对应的元素树属性

仅遍历元素节点时，就用元素树

节点树              元素树

父对象        parentNode   parentElementNode

所有子对象    childNodes     children

第一个子对象   firstChild         firstElementChild

最后子对象     lastChild         lastElementChild

前一个兄弟 previousSibling    previousElementSibling

后一个兄弟    nextSibling    nextElementSibling

10、遍历：从指定父元素开始，按照深度优先的原则，遍历所有各级子节点

①如何遍历：首先定义一个函数，查找任意父节点下的所有直接子节点，

再以深度优先为原则，递归调用函数本身、

②使用递归调用的2种情景

不确定层级深度的树形结构时，比如：网页中的元素，网盘的文件夹结构

不确定层级深度的多级管理结构：

遍历元素树（如果要遍历节点树就把children改为childNodes）

function getChildren(parent)\{

//如果parent是元素节点，就返回nodeName否则，返回nodeValue

console.log(parent.nodeType!=3?parent.nodeName:parent.nodeValue );

//如果parent有子节点（childNodes.length>0）

if(parent.children.length>0)\{

//遍历所有parent的直接子节点

for(var i=0,len=parent.children.length;i<len;i++)\{

//将每个子节点作为新的父节点，递归调用getChildren

getChildren(parent.children\[i\]);\}

//当页面加载后

window.οnlοad=function()\{getChildren(document);\}

10、5个查找API（重点）：

① 按id查找： var elem=document.getElementById("id值");

② 按标签名查找：var elems=parent.getElementsByTagName("标签名");  （全部）

var elem=parent.getElementsByTagName("标签名")\[n\];（具体某个）

elems也是动态集合，多用于遍历，不仅查直接子节点，同时可获得间接子节点

③ 按name属性查找：（专门用于查找表单中的元素）

var elems=parent.getElementsByName("name属性值");

④ 按class属性查找：（专门用于查找表单中的元素）

var elems=parent.getElementsByClassName("class属性值")

⑤Selector API：jQuery的核心

var elem=parent.querySelector("选择器");

var elems=parent.querySelectorAll("选择器");

二者区别：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果需要返回所有的元素，使用 querySelectorAll() 方法。

如果只要一次查找就可得到元素时，首选getXXXByXXX ；

如果需要经过多级查找，才能得到元素时，首选querySelector；

优点：  1.内置API：执行效率高

2. elems：包含完整对象属性的集合，不会反复查找！

缺点：只能从父节点向下找，要是找平级：先parentNode向上，再querySelector向下

11、 获取或修改元素内容：3个属性:

① innerHTML（主）：获得/设置元素开始标签和结束标签之间的html原文

何时使用：只要获得html原文内容时

使用技巧：删除父元素下所有子元素：parent.innerHTML="";

批量替换父元素下所有子元素parent.innerHTML="所有子元素标签组成的html"         比如：ul.innerHTML="<li>电影</li><li>剧集</li>"

② textContent/innerText: 获得开始标签和结束标签之间的纯文本内容，不包含标签

③ 文本节点的内容：nodeValue

12、元素属性：

常用：读取属性：var value=element.getAttribute("属性名")

修改属性：element.setAttribute("name","value");

IE8：element.attributes\['属性名'\]=value;

移除属性：element.removeAttribute( '属性名');

判断是否包含属性：element.hasAttribute('属性名')

全部：

①读取属性：4种方法：

1. var value=element.getAttribute("属性名")   （主）

何时使用：只要获得任意属性的值

2. element.attributes\[下标\].value

所有元素都有attributes属性,\[i\]访问每个属性

3. var value=element.attributes\['属性名'\]

4. element.getAttributeNode('属性名').value

②修改属性：2种：

1. element.setAttribute("name","value"); （主）

但是IE8不支持，IE8修改属性：element.attributes\['属性名'\]=value

2. element.setAttributeNode(attrNode);

③移除属性：2种：

1. element.removeAttribute( '属性名');

2. element.removeAttributeNode(attrNode);

④判断元素是否包含属性：2种：

1. element.hasAttribute('属性名') //true或false

2. element.hasAttributes( );

13、Property（属性 ） 与 Attribute（HTML特性）的区别

Property: 对象在内存中存储的属性，用.访问

Attribute: 元素对象在开始标签中定义的HTML属性和自定义属性

访问HTML标准属性时。二者完全一致：

比如： <a id="qw" name="gjhgjhgj" target="\_blank">drd</a>

var a=document.getElementById("qw");

a.name与a.getAttribute("name")都可以

a.name             -->属性  -->HTML DOM

a.getAttribute("name") -->特性  -->核心DOM

14、元素的样式：

①获取或修改内联样式：style对象  （常用）

在style对象中设置的样式属性，优先级最高！

设置：style.属性名="值"

移出：2种：

style.属性名="";

style.removeProperty("CSS属性名")

问题：仅能操作style属性中定义的内联样式，无法获取或设置样式表中的样式

② 获取或修改样式表中的属性：内部 外部（）

3步：

1. 获得要修改的样式表对象：

var sheet=document.styleSheets\[i\];

styleSheets:获得当前网页的所有样式表对象

2. 获得要修改的cssRule：

cssRule：样式表中一个大括号就是一个cssRule对象

var cssRule=sheet.cssRules\[i\]

cssRule可能嵌套。

3. 获得cssRule中的属性

cssRule.style.属性名

15、创建和删除节点

①创建节点：

创建元素节点共3步：

1. 创建空元素对象：

var newElem=document.createElement("标签名");

比如：var a=document.createElement("a");

<a></a>

2. 设置必要属性：

newElem.属性名="值";

newElem.innerHTML="文本";

比如：a.href="http://tmooc.cn";

a.innerHTML="go to tmooc";

<a href="http://tmooc.cn">go to tmooc</a>

3. 将元素对象挂载到指定父元素下：2种：

追加：parent.appendChild(newElem);

强调：只有向已经在页面中的父元素追加新节点，才导致渲染，才能生效

比如: div.appendChild(a);

<div>

...

<a href="http://tmooc.cn">go to tmooc</a>

</div>

② 创建文档片段：documentfragment

它表示文档的一部分或者是一段，不属于文档树。不过它有一种特殊的行为，该行为使得它非常有用。比如：当请求把一个DocumentFragment节点插入到文档的时候，插入的不是DocumentFragment自身，而是它的所有的子孙节点。这使得DocumentFragment成了有用的占位符，暂时存放那些一次插入文档的节点，同时它还有利于实现文档的剪切、复制和粘贴等操作。

文档片段：内存中，临时存储多个子节点的存储空间

何时使用文档片段？反复追加多个平级元素

解决：先将所有平级元素先追加到文档片段中

将文档片段一次性追加到父元素下

\*文档片段不参与追加\*

var fragment=document.creatDocumentFragment();

16、创建、删除：

插入新元素：parent.insertBefore(newElem,oldElem);

删除节点：parent.removeChild(oldElem);

oldElem.parentNode.removeChild(oldElem);

替换节点：parent.replaceChild(newElem,oldElem);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70]: /images/20220415/8350ebed6c4046a380f609fbf5b8aa8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 1]: /images/20220415/3278049f736149deb9d0b9ed67db0f12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 2]: /images/20220415/82a19697539c4a39a265d4f21094482e.png