DOM常用节点类型汇总
- 格式:docx
- 大小:256.11 KB
- 文档页数:8
dom结构类型-回复DOM结构类型简介及应用领域[DOM结构类型]是指文档对象模型(Document Object Model)中的三种基本节点类型:元素节点、文本节点和属性节点。
DOM是一种用于表示和处理网页文档的API,它将整个页面以一棵树的形式进行组织和访问,开发人员可以通过DOM接口来操作和修改页面的内容和样式。
DOM结构类型的应用非常广泛,以下将逐步介绍并深入讨论这三种节点类型的具体特点和应用领域。
第一步:元素节点元素节点是DOM树中的核心节点类型,代表HTML或XML文档中的各个标签。
每个网页都是由一个或多个元素节点组成的。
元素节点具有以下特点:1. 标签名:元素节点的名称由HTML或XML中的标签名决定,例如`<div>`、`<p>`、`<img>`等。
2. 属性:元素节点可以拥有零到多个属性,属性用于定义元素的额外信息,例如`<img src="image.jpg" alt="image">`中的`src`和`alt`就是该元素节点的属性。
3. 子节点:元素节点可以包含零到多个子节点,这些子节点可以是元素节点、文本节点或其他类型的节点。
元素节点广泛应用于网页开发中,通过操作元素节点,可以实现许多功能,例如:- 动态添加、删除或修改网页的各个元素,改变页面的结构和布局。
- 获取元素节点的属性值,例如修改或获取表单元素的值。
- 通过元素节点进行事件绑定,实现交互效果,例如点击一个按钮时触发某个事件。
第二步:文本节点文本节点是DOM树中的叶子节点,代表HTML或XML文档中的文本内容。
文本节点具有以下特点:1. 文本内容:文本节点的内容就是HTML或XML文档中的文本信息,例如`<p>Hello World</p>`中的`Hello World`就是该文本节点的内容。
2. 父节点:文本节点总是作为元素节点的子节点存在,没有直接包含其他节点。
jQueryDOM节点操作-⽗节点、⼦节点、兄弟节点 -------------------------------------------------------------------⼦(/孙)节点: .children([selector]). 获得匹配元素集合中每个元素的所有直接⼦元素(选择器可选)。
实例:<div><a href="#"><span>welcome to </span>zhenheinfo</a><p id="p1">欢迎来到臻和信息</p><p id="p2">欢迎来到臻和信息</p></div>操作: $("div").children();结果: 得到<a></a>和<p></p>总共3个节点. 操作: $("div").children("#p1");结果: 得到<p id="p1"></p>节点. .find(selector). 获得当前匹配元素集合中每个元素的后代(选择器必须)。
实例:<div> <a href="#"><span>welcome to </span>zhenheinfo</a> <p id="p1">欢迎来到<span>臻和信息</span></p> <p id="p2">欢迎来到臻和信息</p> </div> 操作: $("div"). find ("span");结果: 得到2个<span></span>节点.兄弟节点: .siblings([selector]). 获得匹配元素集合中所有元素的同辈元素(选择器可选)。
DOM笔记一、节点信息1、nodeName此属性可返回节点的名称,根据其类型。
语法:currentNode.nodeName元素节点的nodeName是标签名称,属性节点的nodeName是属性名称,文本节点的nodeName永远是#text。
2、nodeType此属性可返回节点的节点类型。
语法:currentNode.nodeType元素节点的nodeType为1,属性节点的nodeType为2,文本节点的nodeType 为3。
3、nodeValue此属性可设置或返回某节点的值,根据其类型。
语法:currentNode.nodeValue对于文本节点,nodeValue属性包含文本,对于属性节点,nodeValue属性包含属性值,nodeValue属性对于元素节点是不可用的。
二、节点获取:1、通过顶层document节点(1)getElementById()此方法可返回对拥有指定 ID 的第一个对象的引用。
语法:document.getElementById(id)(2)getElementsByName()此方法可返回带有指定名称的对象的集合。
语法:document.getElementsByName(name)因为一个文档中的name属性可能不唯一,getElementsByName()方法返回的是元素的数组,而不是一个元素。
(3)dgetElementsByTagName()此方法可返回带有指定标签名的对象的集合。
语法:document.getElementsByTagName(tagname)如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。
2、通过引用父子节点:(1)parentNode此属性可返回指定节点的父节点。
语法:currentNode.parentNode(2)childNodes此属性可返回指定节点的子节点的节点列表。
DOM节点的属性和⽅法DOMDOM 是 JavaScript 操作⽹页的接⼝,全称为“⽂档对象模型”(Document Object Model)。
它的作⽤是将⽹页转为⼀个 JavaScript 对象,从⽽可以⽤脚本进⾏各种操作(⽐如增删内容)。
它只是⼀个接⼝规范,可以⽤各种语⾔实现。
所以严格地说,DOM 不是 JavaScript 语法的⼀部分,但是 DOM 操作是 JavaScript 最常见的任务,离开了 DOM,JavaScript 就⽆法控制⽹页。
另⼀⽅⾯,JavaScript 也是最常⽤于 DOM 操作的语⾔。
节点DOM 的最⼩组成单位叫做节点(node)。
⽂档的树形结构(DOM 树),就是由各种不同类型的节点组成。
每个节点可以看作是⽂档树的⼀⽚叶⼦。
节点的类型有七种。
Document:整个⽂档树的顶层节点DocumentType:doctype标签(⽐如<!DOCTYPE html>)Element:⽹页的各种HTML标签(⽐如<body>、<a>等)Attribute:⽹页元素的属性(⽐如class="right")Text:标签之间或标签包含的⽂本Comment:注释DocumentFragment:⽂档的⽚段浏览器提供⼀个原⽣的节点对象Node,上⾯这七种节点都继承了Node,因此具有⼀些共同的属性和⽅法。
节点树所有的节点就好像组成了⼀棵树,⽽document节点就代表整个树也就是整个⽂档。
⽂档的第⼀层有两个节点,第⼀个是⽂档类型节点(<!doctype html>),第⼆个是 HTML ⽹页的顶层容器标签<html>。
后者构成了树结构的根节点(root node),其他 HTML 标签节点都是它的下级节点。
除了根节点,其他节点都有三种层级关系。
⽗节点关系(parentNode):直接的那个上级节点⼦节点关系(childNodes):直接的下级节点同级节点关系(sibling):拥有同⼀个⽗节点的节点DOM 提供操作接⼝,⽤来获取这三种关系的节点。
DOM 模型DOM 模型框架DOM 模型中的节点使用DOM innerHTMLDOM 模型框架文档对象模型(Document Object Model)定义了用户操作文档对象的接口,可以说DOM是自HTML 将网上相关文档连接起来后最伟大的创新,它使得用户对HTML 有了空前的访问能力。
<html><head><title>DOM Page</title></head> <body> <h2><a href=”#isaac ”>标题1</a></h2><p>段落1</p><ul id=”myUL ”><li>JavaScript</li> <li>DOM</li><li>CSS</li></ul></body></html>使用DOM 对其抽象。
可以通过一个节点遍历所有节点DOM 模型中的节点元素节点文本节点 属性节点htmlhead bodyh2 p ulli li lia<a href=””>搜狐</a>元素节点ahref=””搜狐属性节点文本节点介绍DOM相关知识,如何使用DOM使用DOM<script>function searchDOM(){var oLi = document.getElementsByTagName("li");//输出长度、标签名称以及某项的文本节点值alert(oLi.length+" "+oLi[0].tagName+" "+oLi[3].childNodes[0].nodeV alue);var oUl = document.getElementsByTagName("ul");var oLi2 = oUl[1].getElementsByTagName("li");alert(oLi2.length+" "+oLi2[0].tagName+oLi2[1].childNodes[0].nodeV alue);}</script></head><body onLoad="searchDOM()">客户端语言<ul><li>HTML</li><li>JavaScript</li><li>CSS</li></ul>服务器端语言<ul><li></li><li>JSP</li><li>PHP</li></ul></body>父子节点访问元素后,知道某一个元素,通过父子关系,遍历所有元素<script>function myDOMInspector(){//获取<ul>标记var oUl = document.getElementById("myList");var DOMString = "";//判断是否有子节点if(oUl.hasChildNodes()){var oCh = oUl.childNodes;for(var i=0;i<oCh.length;i++){//依次查找DOMString += oCh[i].childNodes[0].nodeV alue + "\n";}}alert(DOMString);}</script></head><body onLoad="myDOMInspector()"><ul id="myList"><li>糖醋排骨</li><li>圆笼粉蒸肉</li><li>泡菜鱼</li><li>板栗烧鸡</li><li>麻婆豆腐</li></ul></body>访问节点getElementsByTagNamegetElementById节点的属性<script>function myDOMInspector(){//获取超链接var myLink = document.getElementsByTagName("a")[0];//获取超链接的href属性alert(myLink.getAttribute("href"));}</script></head><body onLoad="myDOMInspector()"><a href="">搜狐</a></body>除了对已有的节点进行访问,还可以创建新节点创建新节点<script>function createP(){var oP = document.createElement("p");var oText = document.createTextNode("这是一段感人的故事");oP.appendChild(oText);document.body.appendChild(oP);}</script></head><body onLoad="createP()"><p>事先写一行文字在这里,测试appendChild()方法的添加位置</p></body>innerHTMLinnerHTML这个属性由于使用方便,也得到了目前主流浏览器的支持该属性表示某个标记之间的所有内容,包括代码本身。
dom结构类型-回复DOM结构类型是一种描述网页文档结构的标准。
它定义了一种方式来操作HTML或XML文档,使得开发者可以通过JavaScript等编程语言来访问和操作网页中的元素。
在本文中,我们将一步一步地回答有关DOM结构类型的问题,并深入探讨其在Web开发中的重要性和用途。
DOM结构类型指的是HTML或XML文档的层次结构。
它由不同类型的节点组成,这些节点之间有层级关系,并且可以通过DOM API进行访问和操作。
DOM结构类型主要分为以下几种:1. 文档节点(document):文档节点是DOM树的根节点,在一个文档中只会有一个文档节点。
所有其他节点都是文档节点的子节点。
2. 元素节点(element):元素节点是指HTML或XML文档中的标签元素,如<div>、<p>等。
元素节点可以包含其他节点作为子节点,并且可以设置属性和样式。
3. 文本节点(text):文本节点是指元素节点中的文本内容,如<p>这是一个段落</p>中的“这是一个段落”。
文本节点没有子节点,但它可以是其他节点的子节点。
4. 属性节点(attribute):属性节点是指元素节点中的属性,如<imgsrc="image.jpg">中的“src”属性。
属性节点是元素节点的一部分,其值可以通过DOM API进行读取和更改。
5. 注释节点(comment):注释节点是指文档中的注释内容,如<! 这是一个注释>。
DOM结构类型的重要性和用途在于开发者可以使用DOM API来访问和操作网页的结构和内容。
通过使用DOM API,开发者可以执行各种操作,例如:- 动态添加、修改和删除网页的元素和属性:开发者可以使用DOM API 创建新的元素节点,设置元素属性,或通过修改DOM结构来改变网页的外观和行为。
- 获得和修改网页中的文本内容:开发者可以使用DOM API获取元素节点中的文本内容,并在需要时对其进行修改。
深⼊理解DOM节点类型第⼀篇——12种DOM节点类型概述前⾯的话 DOM是javascript操作⽹页的接⼝,全称为⽂档对象模型(Document Object Model)。
它的作⽤是将⽹页转为⼀个javascript对象,从⽽可以使⽤javascript对⽹页进⾏各种操作(⽐如增删内容)。
浏览器会根据DOM模型,将HTML⽂档解析成⼀系列的节点,再由这些节点组成⼀个树状结构。
DOM的最⼩组成单位叫做节点(node),⽂档的树形结构(DOM树)由12种类型的节点组成。
本⽂将主要说明DOM节点类型总括 ⼀般地,节点⾄少拥有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)注释节点 MENT_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对象的形式实现的。
12种节点类型DOM(文档对象模型)的12种节点类型包括:元素节点(ElementType):元素节点对应网页的HTML标签元素,元素节点的节点类型值是1,节点名称值是大写的标签名。
属性节点(AttributeType):属性节点表示元素的属性,节点类型值为2,节点名称值是属性的名称,nodeValue的值是属性对应的值。
文本节点(TextType):文本节点表示元素的内容,节点类型值为3,节点名称值是null,nodeValue的值是文本内容。
注释节点(CommentType):注释节点表示注释内容,节点类型值为8,节点名称值是null,nodeValue的值是注释内容。
文档节点(DocumentType):文档节点表示HTML文档,也称为根节点,指向document对象。
文档片段节点(DocumentFragmentType):文档片段节点表示文档片段,节点类型值为15,节点名称值是null,nodeValue的值是片段内容。
域节点(DomainType):域节点表示域,节点类型值为16,节点名称值是域的名称,nodeValue的值是域的值。
属性节点(ProprietaryType):属性节点表示专有属性,节点类型值为17,节点名称值是属性的名称,nodeValue的值是属性对应的值。
命名空间节点(NamespaceType):命名空间节点表示命名空间,节点类型值为18,节点名称值是命名空间的名称,nodeValue的值是命名空间的URL。
CDATA节点(CharacterDataType):CDATA节点表示字符数据,节点类型值为4,节点名称值是null,nodeValue的值是数据内容。
程序代码节点(ProcessingInstructionType):程序代码节点表示处理指令,节点类型值为7,节点名称值是处理指令的名称,nodeValue 的值是处理指令的内容。
这种节点类型主要用于XML文档中,表示特定的程序指令。
DOM的官方定义DOM Document Object Model 文档对象模型。
DOM的官方定义:W3C的DOM,可以使程序或脚本(JS或AS、JScript),动态的访问或操作文档的内容、结构、样式。
DOM只是一个标准,就是操作网页的标准。
而这个标准(模型)在浏览器中,以“对象”的方式实现。
DOM的分类●核心DOM:提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。
●HTMLDOM:针对HTML文档,提供的专有的属性和方法。
●XMLDOM:针对XML文档,提供的专有的属性和方法。
●EventDOM:事件DOM,提供了很多的常用事件。
●CSSDOM:提供了操作CSS的一个接口。
HTML节点树DOM中节点的类型:●document文档节点:代表整个网页,document文档节点不对应标记。
是访问文档中各元素的起点。
●element元素节点:元素节点对应于网页中的各标记。
●attribute属性节点:每个元素都有若干个属性。
●text文本节点:文本节点是最底层节点。
核心DOM公共属性和方法●nodeName:节点名称。
●nodeV alue:节点的值。
●firstChild:第一个子节点。
●lastChild:最后一个子节点。
●parentNode:父节点。
●childNodes:子节点列表,是一个数组。
节点访问为什么,document.firstChild找到的不是HTML节点呢?DOM是针对HTML4.01开发的。
我们现在是XHTML1.0。
所以,要想使用核心DOM中的属性和方法,必须去掉DTD类型定义。
为什么,node_body.firstChild找不到table节点?在Firefox下,会把空格或换行,当成一个文本节点。
因此,所有标记之间的空格和换行,都去掉。
查找html节点的方法●document.firstChild●document.documentElement(兼容性较好)查找body节点的方法●stChild●document.body(推荐使用)节点属性1、getAttribute()——获取属性的值●描述:获取节点属性的值。
深⼊理解DOM节点关系前⾯的话 DOM可以将任何HTML描绘成⼀个由多层节点构成的结构。
节点分为12种不同,每种类型分别表⽰⽂档中不同的信息及标记。
每个节点都拥有各⾃的特点、数据和⽅法,也与其他节点存在某种关系。
节点之间的关系构成了层次,⽽所有页⾯标记则表现为⼀个以特定节点为根节点的树形结构。
本⽂将详细描述DOM间的节点关系 节点中的各种关系可以⽤传统的家族关系来描述,相当于把⽂档树⽐喻成家谱。
接下来,将把DOM节点关系分为属性和⽅法两部分进⾏详细说明属性⽗级属性parentNode 每个节点都有⼀个parentNode属性,该属性指向⽂档树中的⽗节点。
对于⼀个节点来说,它的⽗节点只可能是三种类型:element节点、document节点和documentfragment节点。
如果不存在,则返回null<div id="myDiv"></div><script>console.log(myDiv.parentNode);//bodyconsole.log(document.body.parentNode);//htmlconsole.log(document.documentElement.parentNode);//documentconsole.log(document.parentNode);//null</script><div id="myDiv"></div><script>var myDiv = document.getElementById('myDiv');console.log(myDiv.parentNode);//bodyvar fragment = document.createDocumentFragment();fragment.appendChild(myDiv);console.log(myDiv.parentNode);//document-fragment</script>parentElement 与parentNode属性不同的是,parentElement返回的是⽗元素节点<div id="myDiv"></div><script>console.log(myDiv.parentElement);//bodyconsole.log(document.body.parentElement);//htmlconsole.log(document.documentElement.parentElement);//nullconsole.log(document.parentElement);//null</script> [注意]在IE浏览器中,只有才有该属性,其他浏览器则是所有类型的节点都有该属性<div id="test">123</div><script>//IE浏览器返回undefined,其他浏览器返回<div id="test">123</div>console.log(test.firstChild.parentElement);//所有浏览器都返回<body>console.log(test.parentElement);</script>⼦级属性childNodes childNodes是⼀个只读的类数组对象,它保存着该节点的第⼀层⼦节点<ul id="myUl"><li><div></div></li></ul><script>var myUl = document.getElementById('myUl');//结果是只包含⼀个li元素的类数组对象[li]console.log(myUl.childNodes);</script>children children是⼀个只读的类数组对象,但它保存的是该节点的第⼀层元素⼦节点<div id="myDiv">123</div><script>var myDiv = document.getElementById('myDiv');//childNodes包含所有类型的节点,所以输出[text]console.log(myDiv.childNodes);//children只包含元素节点,所以输出[]console.log(myDiv.children);</script>childElementCount 返回⼦元素节点的个数,相当于children.length [注意]IE8-浏览器不⽀持<ul id="myUl"><li></li><li></li></ul><script>var myUl = document.getElementById('myUl');console.log(myUl.childNodes.length);//5,IE8-浏览器返回2,因为不包括空⽂本节点console.log(myUl.children.length);//2console.log(myUl.childElementCount);//2,IE8-浏览器返回undefined</script>firstChild 第⼀个⼦节点lastChild 最后⼀个⼦节点firstElementChild 第⼀个元素⼦节点lastElementChild 最后⼀个元素⼦节点 上⾯四个属性,IE8-浏览器和标准浏览器的表现并不⼀致。
web前端培训教程:DOM常用节点类型汇总
DOM 基础课程中,我们了解了DOM 的节点并且了解怎样查询和操作节点,而本身这些不同的节点,又有着不同的类型。
1.Node 类型
Node 接口是DOM1 级就定义了,Node 接口定义了12 个数值常量以表示每个节点的类型值。
除了IE 之外,所有浏览器都可以访问这个类型。
虽然这里介绍了12 种节点对象的属性,用的多的其实也就几个而已。
alert(Node.ELEMENT_NODE); //1,元素节点类型值
alert(Node.TEXT_NODE); //2,文本节点类型值
我们建议使用Node 类型的属性来代替1,2 这些阿拉伯数字,有可能大家会觉得这样岂不是很繁琐吗?并且还有一个问题就是IE 不支持Node 类型。
如果只有两个属性的话,用1,2 来代替会特别方便,但如果属性特别多的情况下,1、2、3、4、5、6、7、8、9、10、11、12,你根本就分不清哪个数字代表的是哪个节点。
当然,如果你只用1,2 两个节点,那就另当别论了。
IE 不支持,我们可以模拟一个类,让IE 也支持。
if (typeof Node == 'undefined') { //IE 返回
window.Node = {
ELEMENT_NODE : 1,
TEXT_NODE : 3
};
}
2.Document 类型
Document 类型表示文档,或文档的根节点,而这个节点是隐藏的,没有具体的元素标签。
document; //document
document.nodeType; //9,类型值
document.childNodes[0]; //DocumentType,第一个子节点对象
document.childNodes[0].nodeType; //非IE 为10,IE 为8
document.childNodes[1]; //HTMLHtmlElement
document.childNodes[1].nodeName; //HTML
如果想直接得到<html>标签的元素节点对象HTMLHtmlElement,不必使用childNodes属性这么麻烦,可以使用documentElement 即可。
document.documentElement; //HTMLHtmlElement
在很多情况下,我们并不需要得到<html>标签的元素节点,而需要得到更常用的
<body>标签,之前我们采用的是:document.getElementsByTagName('body')[0],那么这里提供一个更加简便的方法:document.body。
document.body; //HTMLBodyElement
在<html>之前还有一个文档声明:<!DOCTYPE>会作为某些浏览器的第一个节点来处理,这里提供了一个简便方法来处理:document.doctype。
document.doctype; //DocumentType
PS:IE8 中,如果使用子节点访问,IE8 之前会解释为注释类型Comment 节点,而document.doctype 则会返回null。
document.childNodes[0].nodeName //IE 会是#Comment
在Document 中有一些遗留的属性和对象合集,可以快速的帮助我们精确的处理一些任务。
//属性
document.title; //获取和设置<title>标签的值
document.URL; //获取URL 路径
document.domain; //获取域名,服务器端
document.referrer; //获取上一个URL,服务器端
//对象集合
document.anchors; //获取文档中带name属性的<a>元素集合
document.links; //获取文档中带href 属性的<a>元素集合
document.applets; //获取文档中<applet>元素集合,已不用
document.forms; //获取文档中<form>元素集合
document.images; //获取文档中<img>元素集合
3.Element 类型
Element 类型用于表现HTML 中的元素节点。
在DOM 基础那章,我们已经可以对元素节点进行查找、创建等操作,元素节点的nodeType 为1,nodeName 为元素的标签名。
元素节点对象在非IE 浏览器可以返回它具体元素节点的对象类型。
PS:以上给出了部分对应,更多的元素对应类型,直接访问调用即可。
4.Text 类型
Text 类型用于表现文本节点类型,文本不包含HTML,或包含转义后的HTML。
文本节点的nodeType 为3。
在同时创建两个同一级别的文本节点的时候,会产生分离的两个节点。
var box = document.createElement('div');
var text = document.createTextNode('Mr.');
var text2 = document.createTextNode(Lee!);
box.appendChild(text);
box.appendChild(text2);
document.body.appendChild(box);
alert(box.childNodes.length); //2,两个文本节点
PS:把两个同邻的文本节点合并在一起使用normalize()即可。
box.normalize(); //合并成一个节点
PS:有合并就有分离,通过splitText(num)即可实现节点分离。
box.firstChild.splitText(3); //分离一个节点
除了上面的两种方法外,Text 还提供了一些别的DOM 操作的方法如下:
var box = document.getElementById('box');
box.firstChild.deleteData(0,2); //删除从0 位置的2 个字符
box.firstChild.insertData(0,'Hello.'); //从0 位置添加指定字符
box.firstChild.replaceData(0,2,'Miss'); //从0 位置替换掉2 个指定字符
box.firstChild.substringData(0,2); //从0 位置获取2 个字符,直接输出
alert(box.firstChild.nodeValue); //输出结果
ment 类型
Comment 类型表示文档中的注释。
nodeType 是8,nodeName 是#comment,nodeValue是注释的内容。
var box = document.getElementById('box');
alert(box.firstChild); //Comment
PS:在IE 中,注释节点可以使用!当作元素来访问。
var comment = document.getElementsByTagName('!');
alert(comment.length);
6.Attr 类型
Attr 类型表示文档元素中的属性。
nodeType 为11,nodeName 为属性名,nodeValue 为属性值。
DOM 基础篇已经详细介绍过,略。