作者归档：wp

归去来兮辞

归去来兮，田园将芜胡不归？既自以心为形役，奚惆怅而独悲？悟已往之不谏，知来者之可追。实迷途其未远，觉今是而昨非。舟遥遥以轻飏，风飘飘而吹衣。问征夫以前路，恨晨光之熹微。

乃瞻衡宇，载欣载奔。僮仆欢迎，稚子候门。三径就荒，松菊犹存。携幼入室，有酒盈樽。引壶觞以自酌，眄庭柯以怡颜。倚南窗以寄傲，审容膝之易安。园日涉以成趣，门虽设而常关。策扶老以流憩，时矫首而遐观。云无心以出岫，鸟倦飞而知还。景翳翳以将入，抚孤松而盘桓。

归去来兮，请息交以绝游。世与我而相违，复驾言兮焉求？悦亲戚之情话，乐琴书以消忧。农人告余以春及，将有事于西畴。或命巾车，或棹孤舟。既窈窕以寻壑，亦崎岖而经丘。木欣欣以向荣，泉涓涓而始流。善万物之得时，感吾生之行休。

已矣乎！寓形宇内复几时？曷不委心任去留？胡为乎遑遑欲何之？富贵非吾愿，帝乡不可期。怀良辰以孤往，或植杖而耘耔。登东皋以舒啸，临清流而赋诗。聊乘化以归尽，乐夫天命复奚疑！

今天重读了陶渊明的归去来兮辞，还是那么琅琅上口，……舟遥遥以轻飏，风飘飘而吹衣……云无心以出岫，鸟倦飞而知还……木欣欣以向荣，泉涓涓而始流……登东皋以舒啸，临清流而赋诗……这几句是我最喜欢的。

悟已往之不谏,知来者之可追

破解PPT

1步：把你想破解的PPTX文件进行直接改名，将扩展名更改为.pptx.zip即可。

2步：将扩展名为.pptx.zip的压缩文件解压。

3步：找到PPT文件夹里的presentation.xml文件，并用记事本打开。

４步：找到modifyVerifier，把<>里面的内容都删除掉，然后保存文件。

５步：把你解压的文件重新压缩为zip文件。

６步：将zip压缩文件的扩展名改回pptx即可。

最后~希望大家尊重作者，尊重版权，与人方便，与己方便!

Bootstrap 4的新布局——弹性盒子

04 Bootstrap4的新布局——弹性盒子(flex)

4.1 定义弹性盒子(.d-flex|.d-inline-flex)

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

采用Flex布局的元素，被称为Flex容器，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。

应用display工具创建一个flex box容器，并将直接子元素转换为flex项。Flex容器和项目可以通过附加的Flex属性进行进一步修改。

在bootstrap 4中有两个类来创建弹性盒子，分别为.d-flex和.d-inline-flex。.d-flex类设置对象为弹性伸缩盒子；.d-inline-flex类设置对象为内联块级弹性伸缩盒子。

bootstrap 中定义的.d-flex和.d-inline-flex样式类：

 .d-flex {
   display: -ms-flexbox !important;
   display: flex !important;
 }
 .d-inline-flex {
   display: -ms-inline-flexbox !important;
   display: inline-flex !important;
 }
 <body class="container">
 <h3 class="mb-4">定义弹性盒子</h3>
 <h4>d-flex</h4>
 <!--使用d-flex类创建弹性盒子-->
 <div class="d-flex p-3 bg-warning text-white">
     <div class="p-2 bg-primary">d-flex item 1</div>
     <div class="p-2 bg-success">d-flex item 2</div>
     <div class="p-2 bg-danger">d-flex item 3</div>
 </div><br/>
 <h4>d-inline-flex</h4>
 <!--使用d-inline-flex类创建弹性盒子-->
 <div class="d-inline-flex p-3 bg-warning text-white">
     <div class="p-2 bg-primary">d-inline-flex item 1</div>
     <div class="p-2 bg-success">d-inline-flex item 2</div>
     <div class="p-2 bg-danger">d-inline-flex item 3</div>
 </div>
 </body>

提示：对于.d-flex和.d-inline-flex也存在响应变化，可根据不同的断点来设置。

 .d-{sm|md|lg|xl}-flex
 .d-{sm|md|lg|xl}-inline-flex

4.2 排列方向

4.2.1 水平方向排列(.flex-row)

对于水平方向的排列，使用.flex-row设置子项目从左到右进行排列，是默认值；使用.flex-row-reverse设置子项目从右侧开始排列。

 <body class="container">
 <h3 class="mb-4">水平方向</h3>
 <h4>flex-row（从左侧开始）</h4>
 <div class="d-flex flex-row p-3 bg-warning text-white">
     <div class="p-2 bg-primary">d-flex item 1</div>
     <div class="p-2 bg-success">d-flex item 2</div>
     <div class="p-2 bg-danger">d-flex item 3</div>
 </div><br/>
 <h4>flex-row-reverse（从右侧开始）</h4>
 <div class="d-flex flex-row-reverse bg-warning p-3 text-white">
     <div class="p-2 bg-primary">d-flex item 1</div>
     <div class="p-2 bg-success">d-flex item 2</div>
     <div class="p-2 bg-danger">d-flex item 3</div>
 </div>
 </body>

提示：水平方向布局还可以添加响应式的设置，响应式类如下。

 .flex-{sm|md|lg|xl}-row
 .flex-{sm|md|lg|xl}-row-reverse

4.2.2 垂直方向排列(.flex-column)

使用.flex-column设置垂直方向布局，或使用.flex-column-reverse实现垂直方向的反转布局（从底向上铺开）。

 <body class="container">
 <h3 class="mb-4">垂直方向</h3>
 <h4>flex-column（从上往下）</h4>
 <div class="d-flex flex-column p-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex item 1</div>
     <div class="p-2 bg-success">Flex item 2</div>
     <div class="p-2 bg-danger">Flex item 3</div>
 </div><br/>
 <h4>flex-column-reverse（从下往上）</h4>
 <div class="d-flex flex-column-reverse bg-warning p-3 text-white">
     <div class="p-2 bg-primary">Flex item 1</div>
     <div class="p-2 bg-success">Flex item 2</div>
     <div class="p-2 bg-danger">Flex item 3</div>
 </div>
 </body>

提示：垂直方向布局也可以添加响应式的设置，响应式类如下。

 .flex-{sm|md|lg|xl}-column
 .flex-{sm|md|lg|xl}-column-reverse

4.3 内容排列( justify-content-*)

使用flexbox弹性布局容器上的 justify-content-*通用样式可以改变flex项目在主轴上的对齐（以x轴开始，如果是flex-direction: column，则以y轴开始)，可选方向值包括：start(浏览器默认值)、end、center、between和around，说明如下：

† .justify-content-start：项目位于容器的开头。

† .justify-content-center：项目位于容器的中心。

† .justify-content-end：项目位于容器的结尾。

† .justify-content-between：项目位于各行之间留有空白的容器内。

† .justify-content-around：项目位于各行之前、之间、之后都留有空白的容器内。

 <body class="container">
 <h3 class="mb-4">内容排列</h3>
 <!--justify-content-start-->
 <div class="d-flex justify-content-start mb-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 <!--justify-content-center-->
 <div class="d-flex justify-content-center mb-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 <!--justify-content-end-->
 <div class="d-flex justify-content-end mb-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 <!--justify-content-between-->
 <div class="d-flex justify-content-between mb-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 <!--justify-content-around-->
 <div class="d-flex justify-content-around bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 </body>

4.4 项目对齐(align-items-*)

使用align-items-*通用样式可以在flexbox容器上实现flex项目的对齐（以y轴开始，如果选择flex-direction: column，则从x轴开始)，可选值有： start、end、center、baseline和stretch (浏览器默认值)。

  <style>
         .box{
             width: 100%;   /*设置宽度*/
             height: 50px;   /*设置高度*/
         }
     </style>
 </head>
 <body class="container">
 <h3 class="mb-4">项目对齐</h3>
 <div class="d-flex align-items-start bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex align-items-end bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex align-items-center bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex align-items-baseline bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex align-items-stretch bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 </body>

4.5 自动对齐(align-self-*)

使用align-self-*通用样式，可以使Flexbox上的项目单独改变在横轴上的对齐方式（y值开始，如果是flex-direction:column则为x轴开始)，其拥有与align-items相同的可选子项:start、end、center、baseline、和stretch(浏览器默认值)。

  <style>
         .box{
             width: 100%;   /*设置宽度*/
             height: 50px;   /*设置高度*/
             }
  </style>
 </head>
 <body class="container">
 <h3 class="mb-4">指定项目对齐</h3>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-start">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-center">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-end">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-baseline">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-stretch">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 </body>

4.6 自动相等(.flex-fill)

在一系列子元素上使用.flex-fill类，来强制它们平分剩下的空间。

 <body class="container">
 <h3 class="mb-4">平均分配剩下的空间</h3>
 <div class="d-flex bg-warning text-white">
     <div class="flex-fill p-2 bg-primary ">Flex item1（包含大量内容）</div>
     <div class="flex-fill p-2 bg-success">Flex item 2</div>
     <div class="flex-fill p-2 bg-danger">Flex item 3</div>
 </div>
 </body>

4.7 等宽变换(.flex-grow-*)

使用.flex-grow-*实用程序切换弹性项目的增长能力以填充可用空间。在下面的案例中，.flex-grow-1元素使用它可以使用的所有可用空间，同时允许剩余的两个Flex项目具有必要的空间。

 <body class="container">
 <h5>增长</h5>
 <div class="d-flex bg-warning text-white mb-4">
     <div class="p-2 flex-grow-1 bg-primary">Flex item1</div>
     <div class="p-2 bg-success">Flex item 2</div>
     <div class="p-2 bg-danger">Flex item 3</div>
 </div>
 <h5>收缩</h5>
 <div class="d-flex bg-warning text-white">
     <div class="p-2 w-100 bg-primary">Flex item1</div>
     <div class="p-2 bg-success">Flex item2</div>
     <div class="p-2 w-100 bg-danger">Flex item3</div>
 </div>
 </body>

4.8 自动浮动（Auto margins）

4.8.1 水平方向浮动(.mr|.ml-auto)

以下是通过auto margin来控制flex项目的三种案例，分别是预设（无margin）、向右推两个项目(.mr-auto)、向左推两个项目(.ml-auto)。

 <body class="container">
 <h3 class="mb-4">水平方向</h3>
 <div class="d-flex bg-warning text-white mb-3">
     <div class="p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="p-2 bg-danger">Flex item</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3">
     <div class="mr-auto p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="p-2 bg-danger">Flex item</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3">
     <div class="p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="ml-auto p-2 bg-danger">Flex item</div>
 </div>
 </body>

4.8.2 垂直方向浮动(margin-top|bottom:auto)

结合align-items、flex-direction:column、margin-top:auto或margin-bottom:auto，可以垂直移动一个Flex子容器到顶部或底部。

 <body class="container">
 <h3 class="mb-4">垂直方向</h3>
 <div class="d-flex align-items-start flex-column bg-warning text-white mb-4" style="height: 200px;">
     <div class="mb-auto p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="p-2 bg-danger">Flex item</div>
 </div>
 <div class="d-flex align-items-end flex-column bg-warning text-white" style="height: 200px;">
     <div class="p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="mt-auto p-2 bg-danger">Flex item</div>
 </div>
 </body>

4.9 弹性布局——包裹(.flex-wrap)

改变flex项目在flex容器中的包裹方式（可以实现弹性布局），其中包括无包裹.flex-nowrap（浏览器默认）、包裹.flex-wrap，或者反向包裹.flex-wrap-reverse。

 <body class="container">
 <h3 class="mb-4">包装</h3>
 <div class="d-flex bg-warning text-white mb-4  flex-wrap-reverse" >
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
     <div class="p-2 bg-primary">Flex项目4</div>
     <div class="p-2 bg-success">Flex项目5</div>
     <div class="p-2 bg-danger">Flex项目6</div>
 </div>
 <div class="d-flex bg-warning text-white mb-4 flex-wrap">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
     <div class="p-2 bg-primary">Flex项目4</div>
     <div class="p-2 bg-success">Flex项目5</div>
     <div class="p-2 bg-danger">Flex项目6</div>
 </div>
 </body>

4.10 排列顺序(order-*)

使用一些order实用程序可以实现弹性项目的可视化排序。bootstrap仅提供将一个项目排在第一或最后，以及重置DOM顺序，由于order只能使用整数值（例如：5），因此对于任何额外值需要自定义CSS样式。

 <body class="container">
 <h3 class="mb-4">排列顺序</h3>
 <div class="d-flex bg-warning text-white">
     <div class="order-3 p-2 bg-primary">Flex项目1</div>
     <div class="order-2 p-2 bg-success">Flex项目2</div>
     <div class="order-1 p-2 bg-danger">Flex项目3</div>
 </div>
 </body>

4.11 对齐内容(align-content)

使用flexbox容器上的align-content通用样式定义，可以将flex项对齐到横轴上。可选方向有start(浏览器默认值)、end、center、between、around和stretch。

 <h5>align-content-between</h5>
 <div class="d-flex align-content-between bg-warning text-white flex-wrap" style="height: 150px;">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
     <div class="p-2 bg-primary">Flex项目4</div>
     <div class="p-2 bg-success">Flex项目5</div>
     <div class="p-2 bg-danger">Flex项目6</div>
     <div class="p-2 bg-primary">Flex项目7</div>
     <div class="p-2 bg-success">Flex项目8</div>
     <div class="p-2 bg-danger">Flex项目9</div>
     <div class="p-2 bg-primary">Flex项目10</div>
     <div class="p-2 bg-success">Flex项目11</div>
     <div class="p-2 bg-danger">Flex项目12</div>
 </div>

DOM节点类型——12种DOM节点类型

前面的话

DOM是javascript操作网页的接口，全称为文档对象模型(Document Object Model)。它的作用是将网页转为一个javascript对象，从而可以使用javascript对网页进行各种操作(比如增删内容)。浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。

总括

一般地，节点至少拥有nodeType、nodeName和nodeValue这三个基本属性。节点类型不同，这三个属性的值也不相同

nodeType

nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值，12种类型分别对应1到12的常数值

元素节点            　　Node.ELEMENT_NODE(1)
属性节点            　　Node.ATTRIBUTE_NODE(2)
文本节点            　　Node.TEXT_NODE(3)
CDATA节点              Node.CDATA_SECTION_NODE(4)
实体引用名称节点    　  Node.ENTRY_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)
DTD声明节点            Node.NOTATION_NODE(12)

DOM定义了一个Node接口，这个接口在javascript中是作为Node类型实现的，而在IE8-浏览器中的所有DOM对象都是以COM对象的形式实现的。所以，IE8-浏览器并不支持Node对象的写法

//在标准浏览器下返回1，而在IE8-浏览器中报错，提示Node未定义
console.log(Node.ELEMENT_NODE);//1

nodeName

nodeName属性返回节点的名称

nodeValue

nodeValue属性返回或设置当前节点的值，格式为字符串

接下来，将按照节点类型的常数值对应顺序，从1到12进行详细说明

 

元素节点

元素节点element对应网页的HTML标签元素。元素节点的节点类型nodeType值是1，节点名称nodeName值是大写的标签名，nodeValue值是null

以body元素为例

// 1 'BODY' null
console.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)
console.log(Node.ELEMENT_NODE === 1);//true

 

特性节点

元素特性节点attribute对应网页中HTML标签的属性，它只存在于元素的attributes属性中，并不是DOM文档树的一部分。特性节点的节点类型nodeType值是2，节点名称nodeName值是属性名，nodeValue值是属性值

现在，div元素有id=”test”的属性

<div id="test"></div>
<script>
var attr = test.attributes.id;
//2 'id' 'test'
console.log(attr.nodeType,attr.nodeName,attr.nodeValue)
console.log(Node.ATTRIBUTE_NODE === 2);//true    
</script>

 

文本节点

文本节点text代表网页中的HTML标签内容。文本节点的节点类型nodeType值是3，节点名称nodeName值是’#text’，nodeValue值是标签内容值

现在，div元素内容为’测试’

<div id="test">测试</div>
<script>
var txt = test.firstChild;
//3 '#text' '测试'
console.log(txt.nodeType,txt.nodeName,txt.nodeValue)
console.log(Node.TEXT_NODE === 3);//true    
</script>

 

CDATA节点

CDATASection类型只针对基于XML的文档，只出现在XML文档中，表示的是CDATA区域，格式一般为

<![CDATA[
]]>

该类型节点的节点类型nodeType的值为4，节点名称nodeName的值为’#cdata-section’，nodevalue的值是CDATA区域中的内容

 

实体引用名称节点

实体是一个声明，指定了在XML中取代内容或标记而使用的名称。 实体包含两个部分， 首先，必须使用实体声明将名称绑定到替换内容。 实体声明是使用 <!ENTITY name “value”> 语法在文档类型定义(DTD)或XML架构中创建的。其次，在实体声明中定义的名称随后将在 XML 中使用。 在XML中使用时，该名称称为实体引用。

实体引用名称节点entry_reference的节点类型nodeType的值为5，节点名称nodeName的值为实体引用的名称，nodeValue的值为null

//实体名称
<!ENTITY publisher "Microsoft Press">
//实体名称引用
<pubinfo>Published by &publisher;</pubinfo>

 

实体名称节点

上面已经详细解释过，就不再赘述

该节点的节点类型nodeType的值为6，节点名称nodeName的值为实体名称，nodeValue的值为null

 

处理指令节点

处理指令节点ProcessingInstruction的节点类型nodeType的值为7，节点名称nodeName的值为target，nodeValue的值为entire content excluding the target

 

注释节点

注释节点comment表示网页中的HTML注释。注释节点的节点类型nodeType的值为8，节点名称nodeName的值为’#comment’，nodeValue的值为注释的内容

现在，在id为myDiv的div元素中存在一个<!– 我是注释内容 –>

<div id="myDiv"><!-- 我是注释内容 --></div>
<script>
var com = myDiv.firstChild;
//8 '#comment' '我是注释内容'
console.log(com.nodeType,com.nodeName,com.nodeValue)
console.log(Node.COMMENT_NODE === 8);//true    
</script>

 

文档节点

文档节点document表示HTML文档，也称为根节点，指向document对象。文档节点的节点类型nodeType的值为9，节点名称nodeName的值为’#document’，nodeValue的值为null

<script>
//9 "#document" null
console.log(document.nodeType,document.nodeName,document.nodeValue)
console.log(Node.DOCUMENT_NODE === 9);//true    
</script>

 

文档类型节点

文档类型节点DocumentType包含着与文档的doctype有关的所有信息。文档类型节点的节点类型nodeType的值为10，节点名称nodeName的值为doctype的名称，nodeValue的值为null

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var nodeDocumentType = document.firstChild;
//10 "html" null
console.log(nodeDocumentType.nodeType,nodeDocumentType.nodeName,nodeDocumentType.nodeValue);
console.log(Node.DOCUMENT_TYPE_NODE === 10);
</script>
</body>
</html>

 

文档片段节点

文档片段节点DocumentFragment在文档中没有对应的标记，是一种轻量级的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。该节点的节点类型nodeType的值为11，节点名称nodeName的值为’#document-fragment’，nodeValue的值为null

<script>
var nodeDocumentFragment = document.createDocumentFragment();    
//11 "#document-fragment" null
console.log(nodeDocumentFragment.nodeType,nodeDocumentFragment.nodeName,nodeDocumentFragment.nodeValue);
console.log(Node.DOCUMENT_FRAGMENT_NODE === 11);//true
</script>

 

DTD声明节点

DTD声明节点notation代表DTD中声明的符号。该节点的节点类型nodeType的值为12，节点名称nodeName的值为符号名称，nodeValue的值为null

 

最后

在这12种DOM节点类型中，有一些适用于XML文档，有一些是不常用的类型。

JavaScript原型链（一）—__proto__的默认指向

JavaScript的原型链系统着实让人头痛，在查阅了各种资料之后，终于总结出了基于几条通用规则和少数例外情况的js原型链逻辑，下面就让我们来一起看看是怎样的一个原理。

虽然JavaScript里一切皆对象，但为了理解原型链系统，我们需要将JavaScript的对象分为对象和函数两大类。在此基础上，JavaScript的原型链逻辑遵从以下通用规则：

通用规则

  1. 对象有__proto__属性，函数有prototype属性；
  2. 对象由函数生成;
  3. 生成对象时，对象的__proto__属性指向函数的prototype属性。

在没有手动修改__proto__属性的指向时，以上三条便是JavaScript默认原型链指向逻辑。

下面我们来从最一般的情况开始，逐步深入的详细解释一下：

1. 一般情况

创建空对象时，实际上我们是用Object函数来生成对象的：
>var o = {}
>o.__proto__ === Object.prototype
true

我们也可以显式的使用Object函数来创建对象：
>var o = Object()
o.__proto__ === Object.prototype
true

当我们使用函数来创建自定义的对象时，上面的规则同样适用：
>function MyObj(){}
>typeof MyObj
"function"
>var mo = new MyObj()
>mo.__proto__ === MyObj.prototype
true

2. 函数对象

既然JavaScript里“一切皆对象”，那函数自然也是对象的一种。对于函数作为对象来说，上面的规则同样适用：

函数对象都是由Function函数生成的：
>function fn(){}
>fn.__proto__ === Function.prototype
true

我们可以看到，把函数当做对象时，生成它的函数就是 Function函数。那Function函数本身呢？同样适用！

Function函数本身作为对象时，生成它的函数是他自身！
>Function.__proto__ === Function.prototype
true

同样我们知道，Object函数也是一个函数对象，那么它是否符合上面的规则呢？当然！

Object函数既然是函数，那生成它的函数自然是Function函数咯：
>Object.__proto__ === Function.prototype
true

3. prototype是谁？

好了，现在我们知道，对象的__proto__属性是从生成它的函数的prototype那里得来的，那我们不禁要问，函数的prototype又是谁？

一般函数默认的prototype是系统自动生成的一个对象：
>function fn(){}
>typeof fn.prototype
"object"
>fn.prototype
{constructor: ƒ}
    constructor: ƒ fn()
    __proto__: Object

>fn.prototype.constructor === fn
true
>fn.prototype.__proto__ === Object.prototype
true

一般函数默认的prototype是一个类型为"object"的对象，它有两个属性：constructor和 __proto__。其中constructor属性指向这个函数自身，__proto__属性指向Object.prototype，这说明一般函数的prototype属性是由Object函数生成的。

4. 特殊情况

前面我们特别强调了是一般函数，那不一般的函数是谁呢？当然是Object函数和Function函数！
先来看Object.prototype:

>typeof Object.prototype
"object"
>Object.prototype
{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
    constructor: ƒ Object()
    hasOwnProperty: ƒ hasOwnProperty()
    isPrototypeOf: ƒ isPrototypeOf()
    propertyIsEnumerable: ƒ propertyIsEnumerable()
    toLocaleString: ƒ toLocaleString()
    toString: ƒ toString()
    valueOf: ƒ valueOf()
    __defineGetter__: ƒ __defineGetter__()
    __defineSetter__: ƒ __defineSetter__()
    __lookupGetter__: ƒ __lookupGetter__()
    __lookupSetter__: ƒ __lookupSetter__()
    get __proto__: ƒ __proto__()
    set __proto__: ƒ __proto__()

可以看到Object函数的prototype属性也是一个类型为"object"的对象，但和一般函数的默认prototype属性不一样的是，它多了一大堆方法，这些方法都是JavaScript对象的系统默认方法。
再仔细看，好像少了什么，对了，Object函数的prototype属性里没有__proto__属性，我们试着把它的__proto__属性打出来看看：

>Object.prototype.__proto__
null

这就是Object函数特殊情况了：Object.prototype.__proto__ === null，我们知道，这就是JavaScript原型链的终点了。
为什么要这样设定呢？
typeof Object.prototype === "object"，说明它是一个Object对象，如果它由Object函数生成，于是按照我们上面的通用规则，就该是Object.prototype.__proto__ === Object.prototype。
啊哈，问题出现了，Object.prototype.__proto__属性指向了它自身，这样以__proto__属性构成的原型链就再也没有终点了！所以为了让原型链有终点，在原型链的最顶端，JavaScript规定了Object.prototype.__proto__ === null。

好，现在再来看Function函数吧：

>typeof Function.prototype
"function"

一上来就不走寻常路，Function函数的prototype属性是一个"function"类型的对象，而不像其他函数是类型为"object"的对象。那是个什么样的函数呢？

>Function.prototype
ƒ () { [native code] }

函数内部是[native code]，也就是系统编译好的二进制代码函数，这就暂时没法深究了。现在让我们来看看我们最关心的__proto__属性：

>Function.prototype.__proto__
{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
    constructor: ƒ Object()
    hasOwnProperty: ƒ hasOwnProperty()
    isPrototypeOf: ƒ isPrototypeOf()
    propertyIsEnumerable: ƒ propertyIsEnumerable()
    toLocaleString: ƒ toLocaleString()
    toString: ƒ toString()
    valueOf: ƒ valueOf()
    __defineGetter__: ƒ __defineGetter__()
    __defineSetter__: ƒ __defineSetter__()
    __lookupGetter__: ƒ __lookupGetter__()
    __lookupSetter__: ƒ __lookupSetter__()
    get __proto__: ƒ __proto__()
    set __proto__: ƒ __proto__()

怎么有种似曾相识的感觉呢？看起来很像是Object.prototype，让我们来试试：

>Function.prototype.__proto__ === Object.prototype
true

果然就是它！
按照我们最开始提出的通用规则，一个"function"类型的对象，应该是由Function函数生成的，那它的prototype属性应该指向Function.prototype，也就是Function.prototype.__proto__ === Function.prototype。和Object函数同样的问题出现了：循环引用。所以JavaScript规定Function.prototype.__proto__ === Object.prototype，这样既避免了出现循环引用，又让__proto__构成的原型链指向了唯一的终点：Object.prototype.__proto__ === null。

5. 总结

至此，我们从最一般的对象一直追溯到了Object函数和Function函数，并找在原型链的顶端发现了两个例外情况，也知道了这两个例外个规定是为了让__proto__构成的原型链存在一个唯一的终点。

现在我们再来看这张JavaScript原型链的图，是不是一目了然了呢？

JavaScript原型链

JavaScript原型链