《超简单的python爬虫基础知识.docx》由会员分享，可在线阅读，更多相关《超简单的python爬虫基础知识.docx（46页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、呦坯曳文出I:海云登校区口北大修知名r在这个大数据时代，尤其是人工智能浪潮兴起的时代，不管是工程领域还是研究 领域,数据已经成为必不可少的一局部,而数据的获取很大程度上依赖于爬虫的 爬取，所以爬虫变得越来越火爆。什么是爬虫？我们可以把互联网比作一张大网，而爬虫（即网络爬虫）便是在网上爬行的蜘蛛。 把网的节点比作一个个网页，爬虫爬到这就相当于访问了该页面，获取了其信息。 可以把节点间的连线比作网页与网页之间的链接关系，这样蜘蛛通过一个节点 后，可以顺着节点连线继续爬行到达下一个节点，即通过一个网页继续获取后续 的网页，这样整个网的节点便可以被蜘蛛全部爬行到，网站的数据就可以被抓取 下来了 0怎么
2、学爬虫？在学习写爬虫之前,我们需要了解一些基础知识，如 原理、网页的基础 知识、爬虫的基本原理、Cookies的基本原理等。本文，我们就对这些基础知 识做一个简单的总结。 基本原理在本节中，我们会详细了解 的基本原理，了解在浏览器中敲入URL到获取网页内容之间发生了什么。了解了这些内容，有助于我们进一步了解爬虫的 基本原理。a北大国昌I:海云登校区口北大修知名r分，例如其中包含了服务器的类型、文档类型、日期等信息，浏览器接受到响应 后,会解析响应内容，进而呈现网页内容。卜面我们分别来介绍一下请求和响应都包含哪些内容。五.请求 请求，由客户端向服务端发出，可以分为4局部内容：请求方法（Reque
3、stMethod )、请求的网址(Request URL )、请求头(Request Headers )、请求体(Request Body) o.请求方法常见的请求方法有两种：GET和POST。在浏览器中直接输入URL并回车，这便发起了一个GET请求，请求的参数会 直接包含到URL里。例如，在百度中搜索Python ,这就是一个GET请求，链 接为 = Python，其中 URL 中包含了请求的参数 信息，这里参数wd表示要搜寻的关键字。POST请求大多在表单提交时发起。 比方，对于一个登录表单，输入用户名和密码后，点击登录按钮，这通常会 发起一个POST请求，其数据通常以表单的形式传输,而不
4、会表达在URL中。GET和POST请求方法有如下区别。GET请求中的参数包含在URL里面数据可以在URL中看到，而POST 请求的URL不会包含这些数据，数据都是通过表单形式传输的，会包含在请求 体中a北大国昌I:海云登校区GETHEADPOSTPUTDELETECONNECTOPTIONSTRACE豫日北大修知名门GET请求提交的数据最多只有1024字节，而POST方式没有限制一般来说，登录时，需要提交用户名和密码，其中包含了敏感信息，使用GET方 式请求的话，密码就会暴露在URL里面，造成密码泄露，所以这里最好以POST 方式发送。上传文件时，由于文件内容比拟大，也会选用POST方式。我们
5、平常遇到的绝大局部请求都是GET或POST请求，另外还有一些请求方法，如 GET、HEAD、POST、PUT、DELETE. OPTIONS. CONNECT. TRACE等，我们简单将其总结为表lo请求页面，并返回页面内容 类似于GET请求,只不过返回 大多用提交表单或上传文件, 从客户端向服务器传送的数据月 请求服务器删除指定的页面 把服务器当作跳板,把服务器彳 允许客户端查看服务器的性能 回显服务器收到的请求，主要）表1其他请求方法本表参考：.请求的网址a北大国昌I:海云登校区请求的网址，即统一资源定位符URL,它可以唯一确定我们想请求的资源。1 .请求头请求头，用来说明服务器要使用的附
6、加信息，比拟重要的信息有Cookie. Referer. User-Agent等。下面简要说明一些常用的头信息。Accept :请求报头域,用于指定客户端可接受哪些类型的信息Accept-Language :指定客户端可接受的语言类型Accept-Encoding :指定客户端可接受的内容编码Host :用于指定请求资源的主机IP和端口号，其内容为请求URL的原 始服务器或网关的位置。从 1.1版本开始，请求必须包含此内容Cookie :也常用复数形式Cookies ,这是网站为了区分用户进行会话跟 踪而存储在用户本地的数据。它的主要功能是维持当前访问会话。例如，我们输 入用户名和密码成功登录
7、某个网站后，服务器会用会话保存登录状态信息，后面 我们每次刷新或请求该站点的其他页面时，会发现都是登录状态，这就是 Cookies的功劳。Cookies里有信息标识了我们所对应的服务器的会话,每次 浏览器在请求该站点的页面时，都会在请求头中加上Cookies并将其发送给服 务器，服务器通过Cookies识别出是我们自己，并且查出当前状态是登录状态, 所以返回结果就是登录之后才能看到的网页内容Referer:此内容用来标识这个请求是从哪个页面发过来的，服务器可以 拿到这一信息并做相应的处理，如做来源统计、防盗链处理等呦坯曳文出I:海云登校区口北大修出行User-Agent :简称UA ,它是一个
8、特殊的字符串头，可以使服务器识别客 户使用的操作系统及版本、浏览器及版本等信息。在做爬虫时加上此信息，可以 伪装为浏览器；如果不加，很可能会被识别出为爬虫Content-Type 也叫互联网媒体类型（Internet Media Type 或者 MIME 类型，在 协议消息头中，它用来表示具体请求中的媒体类型信息。例如, text/html 代表 HTML 格式，image/gif 代表 GIF 图片，application/json 代 表JSON 类型，更多对应关系可以查看此对照表： 因此，请求头是请求的重要组成局部，在写爬虫时，大局部情况下都需要设定请 求头。2 .请求体请求体一般承载的
9、内容是POST请求中的表单数据，而对于GET请求，请求体 那么为空。例如，这里我登录GitHub时捕获到的请求和响应如图7所示。a北大国昌I:海云登校区HameVy6MTX4FkyMo4OrnQ3Y；VxMMZYrnAnnMD.gibubcomvrwworkie3ee7必八 84cMsaiPOM?6ngem6mli- MW614&-40C 206BS7S6?V*4&ft-40 MVL 29,88050=39 d 1737078TN4U*W B 1750GTN-4A-40 目 MbT21mlM .12l3?vWY0 a 8578661VlHww0ffcc3W3734cMXI21X9 U g461
10、M!C200teM4MSa21d369606311.vrww(yk45773iiO9mo44bt7bKM3A4 _ rO4CewWcd(WfWcWM,“MQ9_、wwdr4nM)HB(pegpitpftMA W2F.U OOMtet OOtiOCt tut22 roquMts 122.4 KB vmmd I FHaK 5.14 s ID.Ioic cq咏WXWLC8 pOMwcrd：G fijMemory AmeHsi QmmMi MMwtfk Aicion Souom PaHofwvmoi 84ore)r EettTheaCcotui Ad3teh 0. 57 Vw :二、Grocp tiy
11、 frvne 8 Preserve eg Dttabh cache OMne NotfvorSng .PiterR690C HdsaataURiA Q XMR JS CSS krg Medfl Font Doc 的 MWest (Xhorm Umms Picwww Rmpohm Coo*m ImnoX-UA C0mpeeote： g9,6rmr, X-XSKptEcrr I； iodeblock ftoquM Header* Ww toufc*A(c0pfc text/htalfppliCAtlO0/Khtiil4-xlvAppUc4tion/Ml;H49.Lx9e/weg，FQe/dpn”；
12、q=%8AccpKncodt： giip. defUte, t)rAoc*pURQUBge:，hOl,，h；qe.8e；Q；Q40.4,，TW；Q07.e；qa6.7Caaw-Cdntral： MX ECconecttonc keep-。LiveContonl-Lefigth; IB?Cemem-TH *9lk-Coete .oto；Ml.l.156192289.1514)914; .at-1; logged.ini*o; .9h.$esMeyj2M/M9uX2lt(ljoivQwM：iNGf4R 2U2NOeaMx)MMGE5ZWIiOCm(Mg$Y)MXJMM，Z2vbV9yZ“gcyI6
13、miMUElN，MjkMSbGFNW“SI6KT U/EUaz04M|I5MCwlY2udG74dCI6I18aaCHUcVyX6KKKptluZ2MM9nfvXY4de：pteloZ)fBXnHweV/ZXBX2FeXjQJiMTA zKr0iW2yLCJyZWZlcnJhDF91b2ftUjoiaWC(f lMxjRn2MJejeTzM)RLk)DkRK0S(DeXKlczeiLO)C&C16eyJKilM)YXJkI)pdXSwlZiixhc?hlCyIeyJhM&eXflpY3N*bG9jYXApt 23fCXVlCfllfCJRyaXA10U9cnVlInl9fQM(A3D 12Dl
14、D12C8e9dle46ce48Od2314TcJ42Te49e4： _WGA12.899537231. 13 B14)91$4： tz*Aiia%2St)an9hatHoet： 9ithub.cc0ongme titp；/yiiMiu.cuMRHervn nttps:/?github.coe/Up9rad4nMcwr*-IWqiBtB： 1Usee AQenti KozHU/S.e (Maclfttosn； Irtel Mac 05 X lt_12_6) ApplewiebKlt/S37.J6 (WTM, Uke GecKol Chree/6g Form Ms vww ewe* view U
15、RL ancocM cwnmit Siflft in utB: .10M(k 田3tMecgSCcMUCAAYqTmorKnuiMQJbHnEdbMOmmSqMjaZTDUWkjUtXhKOg图7详细信息登录之前，我们填写了用户名和密码信息，提交时这些内容就会以表单数据的形 式提交给服务器，此时需要注意Request Headers中指定Content-Type为 application/x-www-form-urlencodedo 只有设置 Content-Type 为 application/x-www-form-urlencoded ,才会以表单数据的形式提交。另外， 我们也可以将Con
16、tent-Type设置为application/json来提交JSON数据， 或者设置为multipart/form-data来上传文件。表2列出了 Content-Type和 POST提交数据方式的关系。a北大国昌I:海云登校区源口北大修知名门Content-Type applicatioiL-Av-form-uilencoded multipart/fbnn-data applicatioiVjson text xml表2 Content-Type和POST提交数据方式的关系在爬虫中，如果要构造POST请求，需要使用正确的Content-Type ,并了解 各种请求库的各个参数设置时使用的
17、是哪种Content-Type ,不然可能会导致 POST提交后无法正常响应。六.响应响应，由服务端返回给客户端，可以分为三局部：响应状态码(Response Status Code )、响应头(Response Headers )和响应体(Response Body ) o1 .响应状态码响应状态码表示服务器的响应状态，如200代表服务器正常响应，404代表页 面未找到，500代表服务器内部发生错误。在爬虫中，我们可以根据状态码来 判断服务器响应状态，如状态码为200，那么证明成功返回数据，再进行进一步的 处理，否那么直接忽略。表3列出了常见的错误代码及错误原因。(4北大目鸟ru1上海云登校
18、区状态码说 明详 情100继续请求者应当继续提出请求 服务器已收到谪求的一局部.正在等待其余局部101切换协议谙求者已要求服务器切换办议.服务器已确认并准备切换20()成功股务怒已成功处理请求201已创世谙求成功并且服务器创立新的资源202已接受服务器已接受谙求,但尚未处理203一授权信息服务器已成功处理了请求.但返问的信息可能来自个许204无内容服务器成功处理门门求.但没有返回任何内容205而置内容服务器成功处理了请求.内容MHR置206局部内容服务器成功处理了局部请求30()多种选抨针对请求服务器可执行多种操作301永久移动谙求的网页已永久移动到新位置.即永久用定向302临时移动请求的网页
19、暂时跳转到其他页面,即忻时币:定向303代行共他位置 .如果原来的请求是POST.3定向H标文档应该通过GET提取304未修改此次请求返回的网页来修改.继续使用上次的资源305使用代理请求者应该使用代理访问该网页307临时术定向请求的资源临时从技他位置响应40()错误请求服务器无法解析该请求401未授权请求没行进行号份假证或赛证未通过403禁止访问版务器拒绝此请求404未找到服务器找不到请求的网页405方法禁用IK务器禁用了请求中指定的方法406不接受无法使用请求的内容响应请求的网页407需要代理授以请求并需要使用代理授权40X清求超时服务器请求超时409冲突服务器在完成请求时发生冲突410L
20、1删除请求的资源已永久删除411，要疗效尺度服务器不接爻不含有效内容长度标头字段的请求412未满足前提条件服务器未满足谙求者在谙求中设置的其中一个前提条件413请求实体过大请求实体过大,超出限务器的处理能力414请求UR1过长谙求网址过长.服务器无法处理415不支持类型请求格式不被请求页面支持416请求范惘不符一而无法提供请求的他阐417未满足期望侑服务器未满足期中谙求标头字段的要求500服务器内部错误服务器遇到错误，无法完成请求501未实现，、瞅芬器不具备完成请求的功能502错误M关服务器作为网关或代理.从上游服务罂收到无效响应503服务不可用服务器目前无法使用504网关超时服分器作为网关或
21、代理.但他没彳i及时从I:游服务器收到请求505 版本不支持服务器不支持i。求中所用的 协议版本表3常见的错误代码及错误原因a北大国昌a北大国昌I:海云登校区源口北大修知名门.响应头 响应头包含了服务器对请求的应答信息如Content-Type. Server. Set-Cookie 等。下面简要说明一些常用的头信息。Date :标识响应产生的时间。Last-Modified :指定资源的最后修改时间。Content-Encoding :指定响应内容的编码。Server:包含服务器的信息，比方名称、版本号等。Content-Type :文档类型，指定返回的数据类型是什么，如text/html代
22、 表返回 HTML 文档，application/x-javascript 那么代表返回 JavaScript 文件， image/jpeg那么代表返回图片。Set-Cookie :设置Cookies0响应头中的Set-Cookie告诉浏览器需要 将此内容放在Cookies中，下次请求携带Cookies请求。Expires :指定响应的过期时间，可以使代理服务器或浏览器将加载的内 容更新到缓存中。如果再次访问时，就可以直接从缓存中加载，降低服务器负载, 缩短加载时间。2 .响应体最重要的当属响应体的内容了。响应的正文数据都在响应体中，比方请求网页时, 它的响应体就是网页的HTML代码；请求一张
23、图片时，它的响应体就是图片的 二进制数据。我们做爬虫请求网页后，要解析的内容就是响应体，如图8所示。a北大国昌I:海云登校区鬻日北大修知名门Namesu per_min_5 bad4 b98.css日 bdogo1_31bdc765,png _ jquery-1.10.2 d88366fd.js_ sbase_f1 d73ac3Js_ min_suppr_af0391 fe jsI* Iogojop_ca79a146.pngLq| icon-police. png?v=md5_ all_async_search_9433dt5.jse vefy-cookie_mac_82990d4 .js I
24、 34 requests I 309KB transferred I Finish: 6.93s.x Headers Preview Response Cookies Timing1 !U ；、y.Q html xmlns= s/ 2 #u_sp .user-photo imgwidth:30px;heigh3 .s-ps-sug td p(font-size:14px;font-wei：4：5 window.sysTime=1496858788;61 manCard = 7 asynJs :口，8 asynLoad: function(id)9 _manCard.asynJs.push(id
25、);10 11 ;12 (function()var hashM13 <style data-for="resuIt"14 *display:none;17 #head .s-isindex-wrapdispLay:none;18 #nvdisplay: none !important;1 G her!” r*KriHir 用Laccarrtr a r he 小 4图8响应体内容在浏览器开发者工具中点击Preview ,就可以看到网页的源代码，也就是响应体的内容，它是解析的目标。在做爬虫时，我们主要通过响应体得到网页的源代码、JSON数据等，然后从中做相应内容的提取。
26、七,总结上面，我们了解了 的基本原理,大概了解了访问网页时背后的请求和响应过程。上面涉及的知识点需要好好掌握，因为分析网页请求时会经常用到。网页基础a北大国昌I:海云登校区用浏览器访问网站时，页面各不相同，你有没有想过它为何会呈现这个样子呢？F面，我们就来了解一下网页的基本组成、结构和节点等内容。一、网页的组成网页可以分为三大局部HTML. CSS和JavaScript。如果把网页比作一个 人的话，HTML相当于骨架,JavaScript相当于肌肉，CSS相当于皮肤,三者 结合起来才能形成一个完善的网页。下面我们分别来介绍一下这三局部的功能。1. HTMLHTML是用来描述网页的一种语言，其全
27、称叫作Hyper Text MarkupLanguage ,即超文本标记语言。网页包括文字、按钮、图片和视频等各种复杂 的元素，其基础架构就是HTML0不同类型的文字通过不同类型的标签来表示, 如图片用img标签表示，视频用video标签表示，段落用p标签表示，它们 之间的布局又常通过布局标签div嵌套组合而成，各种标签通过不同的排列和 嵌套才形成了网页的框架。在Chrome浏览器中翻开百度，右击并选择检查项（或按F12键），翻开 开发者模式，这时在Elements选项卡中即可看到网页的源代码，如图9所示。a北大国昌I:海云登校区巷口北大修知名口一.URI 和 URL这里我们先了解一下URI和
28、URL , URI的全称为Uniform Resource Identifier,即统一资源标志符，URL 的全称为 Universal Resource Locator, 即统一资源定位符。举例来说， s:/github /favicon.ico是GitHub的网站图标链接，它 是一个URL ,也是一个URL即有这样的一个图标资源，我们用URL/URI来 唯一指定了它的访问方式，这其中包括了访问协议 s、访问路径（/即根目 录）和资源名称favicon.icoo通过这样一个链接，我们便可以从互联网上找到 这个资源，这就是URL/URLURL是URI的子集,也就是说每个URL都是URI ,但不
29、是每个URI都是 URL。那么,怎样的URI不是URL呢？ URI还包括一个子类叫作URN ,它 的全称为Universal Resource Name ,即统一资源名称。URN只命名资源而 不指定如何定位资源，比方urn:isbn:0451450523指定了一本书的ISBN ,可 以唯一标识这本书，但是没有指定到哪里定位这本书，这就是URN。URL、URN 和URI的关系可以用图1表示。URI图1 URL、URN和URI关系图a北大国昌I:海云登校区鬻自北大后知名门 /QS百量一下,你裁妁道 *s- C 史全 s:*”.baidujcom ：G (5J ferrrts Monncry Con
30、soto Ntwortc Apptomon Sourcw PertooranxAuoci Secuncy Weo Scrapor XStyig Computed Event bnen OOM Brwkponts PrependI rdter:hov cl4 +eUsmtyle ) Mhed.wrppcr.s-psHUte .s-p-top Mox):2positico: absolute; botton: 4epx: width： ides；)Might: I8ipx;#hradMMrappr .5-p-top (Indux】：2f 的4. 63 g, nin-height: 181px： 阳
31、numh reElve, z-index: e； text-align: center; div cis”，s_forn_epper soutu-env-top - _ $9 href=* id -rculjlogo onaouvedoum- return *tb,:,logo) fom nae,f, id form * ation=M/s Uss rfn, target- _blank on$ubTit-H Javascript :F.ca11 fur - */if rae- - -/oivrD class- *s-skln-Ui s-lsir div id;r.wrcp tlds=* s-
32、isintfc?x-wrdp、dfv，d MboTto_coAtainer* class-Hs-/div Mrr： bod/ Miipp4* ahead thel_*-apoer “ K s.fcm.w-app* Km?图9源代码这就是HTML ,整个网页就是由各种标签嵌套组合而成的。这些标签定义的节点元素相互嵌套和组合形成了复杂的层次关系，就形成了网页的架构。2. CSSHTML定义了网页的结构，但是只有HTML页面的布局并不美观，可能只是简 单的节点元素的排列，为了让网页看起来更好看一些，这里借助了 cssoCSS ,全称叫作Cascading Style Sheets ,即层叠样式表。层
33、叠”是指当在 HTML中引用了数个样式文件，并且样式发生冲突时，浏览器能依据层叠顺序 处理。样式”指网页中文字大小、颜色、元素间距、排列等格式。CSS是目前唯一的网页页面排版样式标准，有了它的帮助，页面才会变得更为a北大国昌I:海云登校区俾知名n匕面图9中右侧即为CSS，例如：#head_wrapper.s-ps-islite .s-p-top position: absolute;bottom: 40px;width: 100%;height: 181px;就是一个css样式。大括号前面是一个css选择器。此选择器的意思是首先 选中id为head_wrapperH class为s-ps-is
34、lite的节点，然后再选中其内部 的class为s-p-top的节点。大括号内部写的就是一条条样式规那么，例如 position指定了这个元素的布局方式为绝对布局，bottom指定元素的下边距 为40像素，width指定了宽度为100%占满父元素，height那么指定了元素的 高度。也就是说，我们将位置、宽度、高度等样式配置统一写成这样的形式，然 后用大括号括起来，接着在开头再加上CSS选择器，这就代表这个样式对CSS 选择器选中的元素生效，元素就会根据此样式来展示了。在网页中,一般会统一定义整个网页的样式规那么，并写入css文件中（其后缀 为css ）。在HTML中，只需要用link标签即可
35、引入写好的CSS文件，这样整 个页面就会变得美观、优雅。3. JavaScriptJavaScript，简称JS ,是一种脚本语言。HTML和CSS配合使用，提供给用户的只是一种静态信息，缺乏交互性。我们在网页里可能会看到一些交互和动画效 果，如下载进度条、提示框、轮播图等，这通常就是JavaScript的功劳。它的a北大国昌a北大国昌I:海云登校区出现使得用户与信息之间不只是一种浏览与显示的关系,而是实现了一种实时、 动态、交互的页面功能。JavaScript通常也是以单独的文件形式加载的，后缀为js，在HTML中通过 script标签即可引入，例如：综上所述，HTML定义了网页的内容和结构
36、,CSS描述了网页的布局，JavaScript定义了网页的行为。二、网页的结构我们首先用例子来感受一下HTML的基本结构。新建一个文本文件，名称可以 自取，后缀为html ,内容如下：This is a Demodiv class二wrapper”)Hello WorldHelloJ this is a paragraph.呦坯曳文出I:海云登校区口北大修知名r这就是一个最简单的HTML实例。开头用DOCTYPE定义了文档类型，其次最 外层是html标签，最后还有对应的结束标签来表示闭合，其内部是head标签 和body标签，分别代表网页头和网页体，它们也需要结束标签。head标签内 定义了一
37、些页面的配置和引用，如：它指定了网页的编码为UTF-8Otitle标签那么定义了网页的标题，会显示在网页的选项卡中，不会显示在正文中。 body标签内那么是在网页正文中显示的内容。div标签定义了网页中的区块/它 的id是container这是一个非常常用的属性，且id的内容在网页中是唯一的, 我们可以通过它来获取这个区块。然后在此区块内又有一个div标签，它的class 为wrapper,这也是一个非常常用的属性，经常与CSS配合使用来设定样式。 然后此区块内部又有一个h2标签，这代表一个二级标题。另外，还有一个p标 签，这代表一个段落。在这两者中直接写入相应的内容即可在网页中呈现出来, 它
38、们也有各自的class属性。将代码保存后，在浏览器中翻开该文件，可以看到如图10所示的内容。C file:/private/var/www/test/test.htHello WorldHello, this is a paragraph.图10运行结果可以看到在选项卡上显示了 This is a Demo字样这是我们在head中的title 里定义的文字。而网页正文是body标签内部定义的各个元素生成的，可以看 到这里显示了二级标题和段落。这个实例便是网页的一般结构。一个网页的标准形式是html标签内嵌套head 和body标签，head内定义网页的配置和引用,body内定义网页的正文。三,
39、节点树及节点间的关系在HTML中，所有标签定义的内容都是节点，它们构成了一个HTML DOM树。fl北大修知名a北大国昌I:海云登校区我们先看下什么是D0Mo DOM是W3C （万维网联盟）的标准,其英文全称Document Object Model ,即文档对象模型。它定义了访问HTML和XML文 档的标准:W3C文档对象模型（DOM ）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。W3C DOM标准被分为3个不同的局部。核心DOM :针对任何结构化文档的标准模型XML DOM :针对XML文档的标准模型HTML DOM :针对HTML文档的标准模型根据W
40、3C的HTML DOM标准，HTML文档中的所有内容都是节点。整个文档是一个文档节点每个HTML元素是元素节点HTML元素内的文本是文本节点每个HTML属性是属性节点注释是注释节点HTML DOM将HTML文档视作树结构，这种结构被称为节点树，如图11所I:海云登校区a北大国昌a北大国昌源口北大修知名门图11节点树通过HTMLDOM，树中的所有节点均可通过JavaScript访问，所有HTML节点元素均可被修改，也可以被创立或删除。节点树中的节点彼此拥有层级关系。我们常用父（parent）、子（child ）和兄 弟（sibling ）等术语描述这些关系。父节点拥有子节点，同级的子节点被称为
41、兄弟节点。在节点树中，顶端节点称为根（root）。除了根节点之外，每个节点都有父节点, 同时可拥有任意数量的子节点或兄弟节点。图12展示了节点树以及节点之间的I:海云登校区KZ根心系parentNodefirstChild俏1大国鸟元素：lastchild0UZ名 XCDU XT. 升的子节点 同时，彼此互为兄弟元素：图12节点树及节点间的关系本段参考W3SCHOOL,链接：四、选择器我们知道网页由一个个节点组成，CSS选择器会根据不同的节点设置不同的样 式规那么，那么怎样来定位节点呢？在CSS中，我们使用CSS选择器来定位节点。例如，上例中div节点的id为 container,那么就可以表
42、示为/container,其中#开头代表选择id ,其后紧跟 id的名称。另外，如果我们想选择class为wrapper的节点，便可以使 用.wapper,这里以点（.）开头代表选择class ,其后紧跟class的名称。另外，还有一种选择方式，那就是根据标签名筛选，例如想选择二级标题，直接 用h2即可。这是最常用的3种表示，分别是根据id、class,标签名筛选，请 牢记它们的写法。a北大国昌I:海云登校区KZ另外，CSS选择器还支持嵌套选择，各个选择器之间加上空格分隔开便可以代 表嵌套关系，如Container .wrapper p那么代表先选择id为container的节点，然后选中其内
43、部的class为wrapper的节点，然后再进一步选中其内部的P节点。另外，如果不加空格，那么代表并列关系，如 div#container .wrapperp.text 代表先选择 id 为 container 的 div 节点,然 后选中其内部的class为wrapper的节点，再进一步选中其内部的class为text的p节点。这就是CSS选择器,其筛选功能还是非常强大的。另外，CSS选择器还有一些其他语法规那么，具体如表4所示。I:海云登校区鬻门北大伸知名门例子描述选拄classJintro的所存直点选抨idfirstnamB”的所仃门点选择器class.intro#idMfirstname选择所rr节点 选择所仃p。点 选择所/ div。点和所仃p在点 选择div力点内部的所有p N点 选抒父。点为div。点的所彳jp打点 选择紧接在div节点之后的所有p节点 选择带有target帆性的所分0点 选择targetblank”的所有的点选择title M性包含小词flower的所有节点 选择所行未被访问的链接选抒所在已被访问的钻接 选择活动链接选择鼠标指针位尸其上的健接选择获得佻点的i