Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
root
/
blog_web
1
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Puu: 5705b9f8f0
Branchit Tagit
blog_web
/
pages
/
7d961b8030c6099e
/
index.html

index.html 679 KB
Historia Raaka

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <meta name="viewport" content="width=device-width,initial-scale=1">
    6. 

  6.     <title>DOM | 彪哥博客</title>
    7. 

  7.     <meta name="generator" content="VuePress 1.9.5">
    8. 

  8.     <link rel="icon" href="/blog/img/favicon.ico">
    9. 

  9.     <meta name="description" content="web前端技术博客,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,React,python,css3,html5,Node,git,github等技术文章。">
    10. 

  10.     <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    11. 

  11.     <meta name="theme-color" content="#11a8cd">
    12. 

  12.     
    13. 

  13.     <link rel="preload" href="/blog/assets/css/0.styles.cf8cd190.css" as="style"><link rel="preload" href="/blog/assets/js/app.28edfb28.js" as="script"><link rel="preload" href="/blog/assets/js/2.395c0d18.js" as="script"><link rel="preload" href="/blog/assets/js/3.6748bd5c.js" as="script"><link rel="preload" href="/blog/assets/js/140.0d9b8fbc.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.cad3aa70.js"><link rel="prefetch" href="/blog/assets/js/100.08a8b2d8.js"><link rel="prefetch" href="/blog/assets/js/101.2aabb12c.js"><link rel="prefetch" href="/blog/assets/js/102.13f3cc4d.js"><link rel="prefetch" href="/blog/assets/js/103.c19aee03.js"><link rel="prefetch" href="/blog/assets/js/104.91a6aec1.js"><link rel="prefetch" href="/blog/assets/js/105.71de1aa4.js"><link rel="prefetch" href="/blog/assets/js/106.207422de.js"><link rel="prefetch" href="/blog/assets/js/107.bf754f60.js"><link rel="prefetch" href="/blog/assets/js/108.a43622c2.js"><link rel="prefetch" href="/blog/assets/js/109.3219d87b.js"><link rel="prefetch" href="/blog/assets/js/11.f2e9eca8.js"><link rel="prefetch" href="/blog/assets/js/110.f41596b0.js"><link rel="prefetch" href="/blog/assets/js/111.da99a105.js"><link rel="prefetch" href="/blog/assets/js/112.9dd75c6f.js"><link rel="prefetch" href="/blog/assets/js/113.9322f157.js"><link rel="prefetch" href="/blog/assets/js/114.c5150cc6.js"><link rel="prefetch" href="/blog/assets/js/115.f58b49f8.js"><link rel="prefetch" href="/blog/assets/js/116.8f7d9c6f.js"><link rel="prefetch" href="/blog/assets/js/117.3c970f48.js"><link rel="prefetch" href="/blog/assets/js/118.921e1d54.js"><link rel="prefetch" href="/blog/assets/js/119.0141defb.js"><link rel="prefetch" href="/blog/assets/js/12.98512c60.js"><link rel="prefetch" href="/blog/assets/js/120.de47a761.js"><link rel="prefetch" href="/blog/assets/js/121.a0b3693a.js"><link rel="prefetch" href="/blog/assets/js/122.6c7dd225.js"><link rel="prefetch" href="/blog/assets/js/123.dbff103c.js"><link rel="prefetch" href="/blog/assets/js/124.493776ef.js"><link rel="prefetch" href="/blog/assets/js/125.554c9fbf.js"><link rel="prefetch" href="/blog/assets/js/126.9d3b75dc.js"><link rel="prefetch" href="/blog/assets/js/127.aad20a7e.js"><link rel="prefetch" href="/blog/assets/js/128.6543adba.js"><link rel="prefetch" href="/blog/assets/js/129.d7c56b92.js"><link rel="prefetch" href="/blog/assets/js/13.a79fa0c7.js"><link rel="prefetch" href="/blog/assets/js/130.593d21f0.js"><link rel="prefetch" href="/blog/assets/js/131.4c90d8b8.js"><link rel="prefetch" href="/blog/assets/js/132.4ad12bdc.js"><link rel="prefetch" href="/blog/assets/js/133.6df121d8.js"><link rel="prefetch" href="/blog/assets/js/134.65e904d2.js"><link rel="prefetch" href="/blog/assets/js/135.47498729.js"><link rel="prefetch" href="/blog/assets/js/136.d99350df.js"><link rel="prefetch" href="/blog/assets/js/137.71e8757e.js"><link rel="prefetch" href="/blog/assets/js/138.75e29c6f.js"><link rel="prefetch" href="/blog/assets/js/139.766f20b7.js"><link rel="prefetch" href="/blog/assets/js/14.0fdf0c78.js"><link rel="prefetch" href="/blog/assets/js/141.128b6e26.js"><link rel="prefetch" href="/blog/assets/js/142.e004a584.js"><link rel="prefetch" href="/blog/assets/js/143.5a19a0b2.js"><link rel="prefetch" href="/blog/assets/js/144.5f397211.js"><link rel="prefetch" href="/blog/assets/js/145.3b994de3.js"><link rel="prefetch" href="/blog/assets/js/146.24441c89.js"><link rel="prefetch" href="/blog/assets/js/147.f7f1952e.js"><link rel="prefetch" href="/blog/assets/js/148.25581f95.js"><link rel="prefetch" href="/blog/assets/js/149.7a6ca4f7.js"><link rel="prefetch" href="/blog/assets/js/15.fce722b2.js"><link rel="prefetch" href="/blog/assets/js/150.3a1675b7.js"><link rel="prefetch" href="/blog/assets/js/151.250a4894.js"><link rel="prefetch" href="/blog/assets/js/152.fa700729.js"><link rel="prefetch" href="/blog/assets/js/153.cc421f44.js"><link rel="prefetch" href="/blog/assets/js/154.a04c0164.js"><link rel="prefetch" href="/blog/assets/js/155.b5c0abcd.js"><link rel="prefetch" href="/blog/assets/js/156.2ba750fc.js"><link rel="prefetch" href="/blog/assets/js/157.99ee745c.js"><link rel="prefetch" href="/blog/assets/js/158.09b15f2b.js"><link rel="prefetch" href="/blog/assets/js/159.3fd855e1.js"><link rel="prefetch" href="/blog/assets/js/16.7cf1b239.js"><link rel="prefetch" href="/blog/assets/js/160.307b6a2e.js"><link rel="prefetch" href="/blog/assets/js/161.97acae68.js"><link rel="prefetch" href="/blog/assets/js/162.86431056.js"><link rel="prefetch" href="/blog/assets/js/163.f1bfa2fe.js"><link rel="prefetch" href="/blog/assets/js/164.105b48fa.js"><link rel="prefetch" href="/blog/assets/js/165.700f83da.js"><link rel="prefetch" href="/blog/assets/js/166.8de21024.js"><link rel="prefetch" href="/blog/assets/js/167.2b670c3d.js"><link rel="prefetch" href="/blog/assets/js/168.330ac31c.js"><link rel="prefetch" href="/blog/assets/js/169.f8233c38.js"><link rel="prefetch" href="/blog/assets/js/17.93f492a1.js"><link rel="prefetch" href="/blog/assets/js/170.7c8b0366.js"><link rel="prefetch" href="/blog/assets/js/171.c3155533.js"><link rel="prefetch" href="/blog/assets/js/172.b659d767.js"><link rel="prefetch" href="/blog/assets/js/173.62c681db.js"><link rel="prefetch" href="/blog/assets/js/174.5c66f092.js"><link rel="prefetch" href="/blog/assets/js/175.d41dd28b.js"><link rel="prefetch" href="/blog/assets/js/176.e60d7f0a.js"><link rel="prefetch" href="/blog/assets/js/177.10de95b1.js"><link rel="prefetch" href="/blog/assets/js/178.f301674d.js"><link rel="prefetch" href="/blog/assets/js/179.4d54a4ff.js"><link rel="prefetch" href="/blog/assets/js/18.f17de23a.js"><link rel="prefetch" href="/blog/assets/js/180.955aa8ec.js"><link rel="prefetch" href="/blog/assets/js/181.a53e32e0.js"><link rel="prefetch" href="/blog/assets/js/182.38687994.js"><link rel="prefetch" href="/blog/assets/js/183.544fef00.js"><link rel="prefetch" href="/blog/assets/js/184.711e54a6.js"><link rel="prefetch" href="/blog/assets/js/185.20075148.js"><link rel="prefetch" href="/blog/assets/js/186.08c67f20.js"><link rel="prefetch" href="/blog/assets/js/187.7ca2d0c6.js"><link rel="prefetch" href="/blog/assets/js/188.cd167879.js"><link rel="prefetch" href="/blog/assets/js/189.e8e2eb21.js"><link rel="prefetch" href="/blog/assets/js/19.6b963460.js"><link rel="prefetch" href="/blog/assets/js/190.8b557318.js"><link rel="prefetch" href="/blog/assets/js/191.3e6fdc4f.js"><link rel="prefetch" href="/blog/assets/js/192.99d6e1d8.js"><link rel="prefetch" href="/blog/assets/js/193.4ced091e.js"><link rel="prefetch" href="/blog/assets/js/194.4b375e2e.js"><link rel="prefetch" href="/blog/assets/js/195.003e3d67.js"><link rel="prefetch" href="/blog/assets/js/196.7a3f55e5.js"><link rel="prefetch" href="/blog/assets/js/197.30d4c5b4.js"><link rel="prefetch" href="/blog/assets/js/198.628c2c1a.js"><link rel="prefetch" href="/blog/assets/js/199.89c4e586.js"><link rel="prefetch" href="/blog/assets/js/20.839dae41.js"><link rel="prefetch" href="/blog/assets/js/200.1d9f2ef9.js"><link rel="prefetch" href="/blog/assets/js/201.5ba078d9.js"><link rel="prefetch" href="/blog/assets/js/202.b49b23f4.js"><link rel="prefetch" href="/blog/assets/js/203.d88a03d9.js"><link rel="prefetch" href="/blog/assets/js/204.fb928277.js"><link rel="prefetch" href="/blog/assets/js/205.432c3d8d.js"><link rel="prefetch" href="/blog/assets/js/206.ed726599.js"><link rel="prefetch" href="/blog/assets/js/207.9ac30d7b.js"><link rel="prefetch" href="/blog/assets/js/208.c5e77adc.js"><link rel="prefetch" href="/blog/assets/js/209.d396aad5.js"><link rel="prefetch" href="/blog/assets/js/21.bd21bd29.js"><link rel="prefetch" href="/blog/assets/js/210.02e4ee2f.js"><link rel="prefetch" href="/blog/assets/js/211.0f8a9304.js"><link rel="prefetch" href="/blog/assets/js/212.9220dd3d.js"><link rel="prefetch" href="/blog/assets/js/213.89521ebd.js"><link rel="prefetch" href="/blog/assets/js/214.cd5ec468.js"><link rel="prefetch" href="/blog/assets/js/215.0084d772.js"><link rel="prefetch" href="/blog/assets/js/216.a72becb1.js"><link rel="prefetch" href="/blog/assets/js/217.71a7f3aa.js"><link rel="prefetch" href="/blog/assets/js/218.9793e19a.js"><link rel="prefetch" href="/blog/assets/js/219.c89175e9.js"><link rel="prefetch" href="/blog/assets/js/22.e6bcf65d.js"><link rel="prefetch" href="/blog/assets/js/220.d496e411.js"><link rel="prefetch" href="/blog/assets/js/221.07a9338a.js"><link rel="prefetch" href="/blog/assets/js/222.22bf261f.js"><link rel="prefetch" href="/blog/assets/js/223.b9c6a055.js"><link rel="prefetch" href="/blog/assets/js/224.364b4b11.js"><link rel="prefetch" href="/blog/assets/js/225.adec6660.js"><link rel="prefetch" href="/blog/assets/js/226.78192713.js"><link rel="prefetch" href="/blog/assets/js/227.0c1ec0e5.js"><link rel="prefetch" href="/blog/assets/js/228.a94ad835.js"><link rel="prefetch" href="/blog/assets/js/229.51820867.js"><link rel="prefetch" href="/blog/assets/js/23.7bb82fc7.js"><link rel="prefetch" href="/blog/assets/js/230.6eb1d9bf.js"><link rel="prefetch" href="/blog/assets/js/231.55d62061.js"><link rel="prefetch" href="/blog/assets/js/232.f938a3a8.js"><link rel="prefetch" href="/blog/assets/js/233.2c81f1b3.js"><link rel="prefetch" href="/blog/assets/js/234.4dbf5d59.js"><link rel="prefetch" href="/blog/assets/js/235.f78274d9.js"><link rel="prefetch" href="/blog/assets/js/236.a2b61bec.js"><link rel="prefetch" href="/blog/assets/js/237.6ae31c88.js"><link rel="prefetch" href="/blog/assets/js/238.2f5c56ae.js"><link rel="prefetch" href="/blog/assets/js/239.506a4e9f.js"><link rel="prefetch" href="/blog/assets/js/24.2c9c4ee6.js"><link rel="prefetch" href="/blog/assets/js/25.b4de33d1.js"><link rel="prefetch" href="/blog/assets/js/26.0bb98ba9.js"><link rel="prefetch" href="/blog/assets/js/27.df98327e.js"><link rel="prefetch" href="/blog/assets/js/28.31289bac.js"><link rel="prefetch" href="/blog/assets/js/29.45af5621.js"><link rel="prefetch" href="/blog/assets/js/30.d5c08e66.js"><link rel="prefetch" href="/blog/assets/js/31.78e43a68.js"><link rel="prefetch" href="/blog/assets/js/32.66c0e717.js"><link rel="prefetch" href="/blog/assets/js/33.0efe6b11.js"><link rel="prefetch" href="/blog/assets/js/34.cb1866c1.js"><link rel="prefetch" href="/blog/assets/js/35.dca9b927.js"><link rel="prefetch" href="/blog/assets/js/36.fb4476c3.js"><link rel="prefetch" href="/blog/assets/js/37.09dfc1c5.js"><link rel="prefetch" href="/blog/assets/js/38.6624bf02.js"><link rel="prefetch" href="/blog/assets/js/39.df6c26ac.js"><link rel="prefetch" href="/blog/assets/js/4.44654b1a.js"><link rel="prefetch" href="/blog/assets/js/40.80101c19.js"><link rel="prefetch" href="/blog/assets/js/41.2b5e8c27.js"><link rel="prefetch" href="/blog/assets/js/42.c6ded3fe.js"><link rel="prefetch" href="/blog/assets/js/43.6d9424d6.js"><link rel="prefetch" href="/blog/assets/js/44.835e4b5c.js"><link rel="prefetch" href="/blog/assets/js/45.e7bb6f6a.js"><link rel="prefetch" href="/blog/assets/js/46.1b9286bf.js"><link rel="prefetch" href="/blog/assets/js/47.8d66ca97.js"><link rel="prefetch" href="/blog/assets/js/48.3c1102e1.js"><link rel="prefetch" href="/blog/assets/js/49.e17a3436.js"><link rel="prefetch" href="/blog/assets/js/5.88de390f.js"><link rel="prefetch" href="/blog/assets/js/50.6750f186.js"><link rel="prefetch" href="/blog/assets/js/51.9f93af9f.js"><link rel="prefetch" href="/blog/assets/js/52.f3ef3b5e.js"><link rel="prefetch" href="/blog/assets/js/53.a6bacd25.js"><link rel="prefetch" href="/blog/assets/js/54.dbb7c9ab.js"><link rel="prefetch" href="/blog/assets/js/55.2562d0c8.js"><link rel="prefetch" href="/blog/assets/js/56.14ea4931.js"><link rel="prefetch" href="/blog/assets/js/57.a2fad780.js"><link rel="prefetch" href="/blog/assets/js/58.8165b971.js"><link rel="prefetch" href="/blog/assets/js/59.556cab0d.js"><link rel="prefetch" href="/blog/assets/js/6.277038ca.js"><link rel="prefetch" href="/blog/assets/js/60.f048aa7c.js"><link rel="prefetch" href="/blog/assets/js/61.bdb307a8.js"><link rel="prefetch" href="/blog/assets/js/62.37a94f10.js"><link rel="prefetch" href="/blog/assets/js/63.74811780.js"><link rel="prefetch" href="/blog/assets/js/64.d3429318.js"><link rel="prefetch" href="/blog/assets/js/65.acfdd371.js"><link rel="prefetch" href="/blog/assets/js/66.cb805d9b.js"><link rel="prefetch" href="/blog/assets/js/67.39f85baa.js"><link rel="prefetch" href="/blog/assets/js/68.a1902a2a.js"><link rel="prefetch" href="/blog/assets/js/69.923fdd78.js"><link rel="prefetch" href="/blog/assets/js/7.474f8f8d.js"><link rel="prefetch" href="/blog/assets/js/70.1f3e978d.js"><link rel="prefetch" href="/blog/assets/js/71.13cd9358.js"><link rel="prefetch" href="/blog/assets/js/72.739b22a8.js"><link rel="prefetch" href="/blog/assets/js/73.95f69ae2.js"><link rel="prefetch" href="/blog/assets/js/74.b6624f6a.js"><link rel="prefetch" href="/blog/assets/js/75.31b56e72.js"><link rel="prefetch" href="/blog/assets/js/76.b9c0ce40.js"><link rel="prefetch" href="/blog/assets/js/77.46f6e413.js"><link rel="prefetch" href="/blog/assets/js/78.aebd00ee.js"><link rel="prefetch" href="/blog/assets/js/79.1b784d15.js"><link rel="prefetch" href="/blog/assets/js/8.9428e7ee.js"><link rel="prefetch" href="/blog/assets/js/80.1f550d53.js"><link rel="prefetch" href="/blog/assets/js/81.101cc131.js"><link rel="prefetch" href="/blog/assets/js/82.077c8298.js"><link rel="prefetch" href="/blog/assets/js/83.2e375d11.js"><link rel="prefetch" href="/blog/assets/js/84.38102a34.js"><link rel="prefetch" href="/blog/assets/js/85.24532d6a.js"><link rel="prefetch" href="/blog/assets/js/86.1dabbf00.js"><link rel="prefetch" href="/blog/assets/js/87.763da0f2.js"><link rel="prefetch" href="/blog/assets/js/88.ff6e5f7c.js"><link rel="prefetch" href="/blog/assets/js/89.187e5e16.js"><link rel="prefetch" href="/blog/assets/js/9.da143545.js"><link rel="prefetch" href="/blog/assets/js/90.3c8cff94.js"><link rel="prefetch" href="/blog/assets/js/91.a50bd44d.js"><link rel="prefetch" href="/blog/assets/js/92.5484868f.js"><link rel="prefetch" href="/blog/assets/js/93.c8ee75e3.js"><link rel="prefetch" href="/blog/assets/js/94.b18a3e9b.js"><link rel="prefetch" href="/blog/assets/js/95.cddef6ae.js"><link rel="prefetch" href="/blog/assets/js/96.80e5a938.js"><link rel="prefetch" href="/blog/assets/js/97.1f5e5197.js"><link rel="prefetch" href="/blog/assets/js/98.e3a275c8.js"><link rel="prefetch" href="/blog/assets/js/99.d33bf89e.js">
    14. 

  14.     <link rel="stylesheet" href="/blog/assets/css/0.styles.cf8cd190.css">
    15. 

  15.   </head>
    16. 

  16.   <body class="theme-mode-light">
    17. 

  17.     <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><img src="/blog/img/logo.png" alt="彪哥博客" class="logo"> <span class="site-name can-hide">彪哥博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="http://fseller.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
    18. 

  18.   个人游戏网站
    19. 

  19.   <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><a href="/blog/web/" class="link-title">前端</a> <span class="title" style="display:none;">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>前端文章</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>学习笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/note/javascript/" class="nav-link">《JavaScript教程》</a></li><li class="dropdown-subitem"><a href="/blog/note/js/" class="nav-link">《JavaScript高级程序设计》</a></li><li class="dropdown-subitem"><a href="/blog/note/es6/" class="nav-link">《ES6 教程》</a></li><li class="dropdown-subitem"><a href="/blog/note/vue/" class="nav-link">《Vue》</a></li><li class="dropdown-subitem"><a href="/blog/note/react/" class="nav-link">《React》</a></li><li class="dropdown-subitem"><a href="/blog/note/typescript-axios/" class="nav-link">《TypeScript 从零实现 axios》</a></li><li class="dropdown-subitem"><a href="/blog/note/git/" class="nav-link">《Git》</a></li><li class="dropdown-subitem"><a href="/blog/pages/51afd6/" class="nav-link">TypeScript</a></li><li class="dropdown-subitem"><a href="/blog/pages/4643cd/" class="nav-link">JS设计模式总结</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="页面" class="dropdown-title"><a href="/blog/ui/" class="link-title">页面</a> <span class="title" style="display:none;">页面</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/8309a5b876fc95e3/" class="nav-link">HTML</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/0a83b083bdf257cb/" class="nav-link">CSS</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技术" class="dropdown-title"><a href="/blog/technology/" class="link-title">技术</a> <span class="title" style="display:none;">技术</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/9a7ee40fc232253e/" class="nav-link">技术文档</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/4c778760be26d8b3/" class="nav-link">GitHub技巧</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/117708e0af7f0bd9/" class="nav-link">Nodejs</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/41f87d890d0a02af/" class="nav-link">博客搭建</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><a href="/blog/more/" class="link-title">更多</a> <span class="title" style="display:none;">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/f2a556/" class="nav-link">学习</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/aea6571b7a8bae86/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/2d615df9a36a98ed/" class="nav-link">心情杂货</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/baaa02/" class="nav-link">实用技巧</a></li><li class="dropdown-item"><!----> <a href="/blog/friends/" class="nav-link">友情链接</a></li></ul></div></div><div class="nav-item"><a href="/blog/about/" class="nav-link">关于</a></div><div class="nav-item"><a href="/blog/pages/beb6c0bd8a66cea6/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/blog/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/blog/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/blog/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/heBody/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    20. 

  20.     GitHub
    21. 

  21.     <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg"> <div class="blogger-info"><h3>彪哥</h3> <span>爱好前端</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="http://fseller.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
    22. 

  22.   个人游戏网站
    23. 

  23.   <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><a href="/blog/web/" class="link-title">前端</a> <span class="title" style="display:none;">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>前端文章</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>学习笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/note/javascript/" class="nav-link">《JavaScript教程》</a></li><li class="dropdown-subitem"><a href="/blog/note/js/" class="nav-link">《JavaScript高级程序设计》</a></li><li class="dropdown-subitem"><a href="/blog/note/es6/" class="nav-link">《ES6 教程》</a></li><li class="dropdown-subitem"><a href="/blog/note/vue/" class="nav-link">《Vue》</a></li><li class="dropdown-subitem"><a href="/blog/note/react/" class="nav-link">《React》</a></li><li class="dropdown-subitem"><a href="/blog/note/typescript-axios/" class="nav-link">《TypeScript 从零实现 axios》</a></li><li class="dropdown-subitem"><a href="/blog/note/git/" class="nav-link">《Git》</a></li><li class="dropdown-subitem"><a href="/blog/pages/51afd6/" class="nav-link">TypeScript</a></li><li class="dropdown-subitem"><a href="/blog/pages/4643cd/" class="nav-link">JS设计模式总结</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="页面" class="dropdown-title"><a href="/blog/ui/" class="link-title">页面</a> <span class="title" style="display:none;">页面</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/8309a5b876fc95e3/" class="nav-link">HTML</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/0a83b083bdf257cb/" class="nav-link">CSS</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技术" class="dropdown-title"><a href="/blog/technology/" class="link-title">技术</a> <span class="title" style="display:none;">技术</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/9a7ee40fc232253e/" class="nav-link">技术文档</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/4c778760be26d8b3/" class="nav-link">GitHub技巧</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/117708e0af7f0bd9/" class="nav-link">Nodejs</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/41f87d890d0a02af/" class="nav-link">博客搭建</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><a href="/blog/more/" class="link-title">更多</a> <span class="title" style="display:none;">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/f2a556/" class="nav-link">学习</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/aea6571b7a8bae86/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/2d615df9a36a98ed/" class="nav-link">心情杂货</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/baaa02/" class="nav-link">实用技巧</a></li><li class="dropdown-item"><!----> <a href="/blog/friends/" class="nav-link">友情链接</a></li></ul></div></div><div class="nav-item"><a href="/blog/about/" class="nav-link">关于</a></div><div class="nav-item"><a href="/blog/pages/beb6c0bd8a66cea6/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/blog/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/blog/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/blog/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/heBody/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    24. 

  24.     GitHub
    25. 

  25.     <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><a href="/blog/pages/0796ba76b4b55368/" class="sidebar-link">基础</a></li><li><a href="/blog/pages/74d2ab3fbfeaaa68/" class="sidebar-link">内置对象</a></li><li><a href="/blog/pages/659b5af5e2e704e0/" class="sidebar-link">面向对象</a></li><li><a href="/blog/pages/d61b1cb4cdac1f63/" class="sidebar-link">异步操作</a></li><li><a href="/blog/pages/7d961b8030c6099e/" aria-current="page" class="active sidebar-link">DOM</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/blog/pages/7d961b8030c6099e/#一、概述" class="sidebar-link">一、概述</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_1、dom" class="sidebar-link">1、DOM</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_2、节点" class="sidebar-link">2、节点</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_3、节点树" class="sidebar-link">3、节点树</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/blog/pages/7d961b8030c6099e/#二、node接口" class="sidebar-link">二、Node接口</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_1、属性" class="sidebar-link">1、属性</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-1-node-prototype-nodetype节点类型" class="sidebar-link">1.1 Node.prototype.nodeType节点类型</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-2-node-prototype-nodename节点名称" class="sidebar-link">1.2 Node.prototype.nodeName节点名称</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-3-node-prototype-nodevalue当前节点文本" class="sidebar-link">1.3 Node.prototype.nodeValue当前节点文本</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-4-node-prototype-textcontent所有文本内容" class="sidebar-link">1.4 Node.prototype.textContent所有文本内容</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-5-node-prototype-baseuri-获取网页路径" class="sidebar-link">1.5 Node.prototype.baseURI 获取网页路径</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-6-node-prototype-ownerdocument顶层文档对象" class="sidebar-link">1.6 Node.prototype.ownerDocument顶层文档对象</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-7-node-prototype-nextsibling下一个同级节点" class="sidebar-link">1.7 Node.prototype.nextSibling下一个同级节点</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-8-node-prototype-previoussibling上一个同级节点" class="sidebar-link">1.8 Node.prototype.previousSibling上一个同级节点</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-9-node-prototype-parentnode父节点" class="sidebar-link">1.9 Node.prototype.parentNode父节点</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-10-node-prototype-parentelement-父元素节点" class="sidebar-link">1.10 Node.prototype.parentElement 父元素节点</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-11-node-prototype-firstchild-第一个子节点-node-prototype-lastchild-最后一个子节点" class="sidebar-link">1.11 Node.prototype.firstChild 第一个子节点，Node.prototype.lastChild 最后一个子节点</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-12-node-prototype-childnodes-所有子节点-类数组对象-动态集合" class="sidebar-link">1.12 Node.prototype.childNodes 所有子节点，类数组对象，动态集合</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-13-node-prototype-isconnected-是否在文档中-布尔值" class="sidebar-link">1.13 Node.prototype.isConnected 是否在文档中，布尔值</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_2、方法" class="sidebar-link">2、方法</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-1-node-prototype-appendchild-插入子节点到最后" class="sidebar-link">2.1 Node.prototype.appendChild() 插入子节点到最后</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-2-node-prototype-haschildnodes-是否有子节点-布尔值" class="sidebar-link">2.2 Node.prototype.hasChildNodes() 是否有子节点，布尔值</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-3-node-prototype-clonenode-boolean-克隆节点" class="sidebar-link">2.3 Node.prototype.cloneNode(Boolean) 克隆节点</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-4-node-prototype-insertbefore-插入节点到指定位置" class="sidebar-link">2.4 Node.prototype.insertBefore() 插入节点到指定位置</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-5-node-prototype-removechild-删除子节点-并返回" class="sidebar-link">2.5 Node.prototype.removeChild() 删除子节点，并返回</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-6-node-prototype-replacechild-替换子节点-返回被替换的" class="sidebar-link">2.6 Node.prototype.replaceChild() 替换子节点，返回被替换的</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-7-node-prototype-contains-参数节点是否为后代节点或当前节点-返回布尔值" class="sidebar-link">2.7 Node.prototype.contains() 参数节点是否为后代节点或当前节点，返回布尔值</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-8-node-prototype-comparedocumentposition-和contains方法类似-返回值可算出位置关系" class="sidebar-link">2.8 Node.prototype.compareDocumentPosition() 和contains方法类似，返回值可算出位置关系</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-9-node-prototype-isequalnode-节点是否相等-node-prototype-issamenode-节点是否相同" class="sidebar-link">2.9 Node.prototype.isEqualNode() 节点是否相等 Node.prototype.isSameNode() 节点是否相同</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-10-node-prototype-normalize-将当前节点和它的后代节点-规范化" class="sidebar-link">2.10 Node.prototype.normalize()  将当前节点和它的后代节点”规范化“</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-11-node-prototype-getrootnode-获取根节点-document" class="sidebar-link">2.11 Node.prototype.getRootNode() 获取根节点（document）</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/blog/pages/7d961b8030c6099e/#三、nodelist-接口-与-htmlcollection-接口-节点的集合" class="sidebar-link">三、NodeList 接口 与 HTMLCollection 接口 （节点的集合）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_1、nodelist-接口-各类节点的集合" class="sidebar-link">1、NodeList 接口 （各类节点的集合）</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-1-概述" class="sidebar-link">1.1 概述</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-2-nodelist-prototype-length" class="sidebar-link">1.2 NodeList.prototype.length</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-3-nodelist-prototype-foreach" class="sidebar-link">1.3 NodeList.prototype.forEach()</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-4-nodelist-prototype-item-接受一个索引参数-返回该索引上的成员-节点" class="sidebar-link">1.4 NodeList.prototype.item() 接受一个索引参数，返回该索引上的成员（节点）</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-5-nodelist-prototype-keys-nodelist-prototype-values-nodelist-prototype-entries-遍历器对象-结合for-of遍历每一个成员的信息" class="sidebar-link">1.5 NodeList.prototype.keys()，NodeList.prototype.values()，NodeList.prototype.entries()  遍历器对象，结合for...of遍历每一个成员的信息</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_2、htmlcollection-接口-html元素节点的集合" class="sidebar-link">2、HTMLCollection 接口 （HTML元素节点的集合）</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-1-概述" class="sidebar-link">2.1 概述</a></li><li class="sidebar-sub-header level6"><a href="/blog/pages/7d961b8030c6099e/#各js选择器返回的数据对比" class="sidebar-link">各js选择器返回的数据对比</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-2-htmlcollection-prototype-length" class="sidebar-link">2.2 HTMLCollection.prototype.length</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-3-htmlcollection-prototype-item-和方括号访问一样" class="sidebar-link">2.3 HTMLCollection.prototype.item() 和方括号访问一样</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-4-htmlcollection-prototype-nameditem-参数为id或name-返回元素节点" class="sidebar-link">2.4 HTMLCollection.prototype.namedItem() 参数为id或name，返回元素节点</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/blog/pages/7d961b8030c6099e/#四、parentnode-接口-父节点接口-childnode-接口-子节点接口" class="sidebar-link">四、ParentNode 接口（父节点接口），ChildNode 接口（子节点接口）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_1、parentnode-接口" class="sidebar-link">1、ParentNode 接口</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-1-属性" class="sidebar-link">1.1 属性</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-parentnode-children-返回htmlcollection实例-当前节点的所有元素子节点" class="sidebar-link">（1）ParentNode.children  （返回HTMLCollection实例，当前节点的所有元素子节点）</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-parentnode-firstelementchild-第一个元素子节点" class="sidebar-link">（2）ParentNode.firstElementChild 第一个元素子节点</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-parentnode-lastelementchild-最后一个元素子节点" class="sidebar-link">（3）ParentNode.lastElementChild 最后一个元素子节点</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_4-parentnode-childelementcount-所有元素子节点的数量" class="sidebar-link">（4）ParentNode.childElementCount 所有元素子节点的数量</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-2-方法" class="sidebar-link">1.2 方法</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#parentnode-append-插入子节点于后-parentnode-prepend-插入子节点于前" class="sidebar-link">ParentNode.append() 插入子节点于后，ParentNode.prepend()  插入子节点于前</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_2、childnode-接口" class="sidebar-link">2、ChildNode 接口</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-1-childnode-remove-移除当前节点" class="sidebar-link">2.1 ChildNode.remove() 移除当前节点</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-2-childnode-before-插入同级节点于前-childnode-after-插入同级节点于后" class="sidebar-link">2.2 ChildNode.before() 插入同级节点于前，ChildNode.after() 插入同级节点于后</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-3-childnode-replacewith-用参数节点替换当前节点" class="sidebar-link">2.3 ChildNode.replaceWith() 用参数节点替换当前节点</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/blog/pages/7d961b8030c6099e/#五、document节点" class="sidebar-link">五、Document节点</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_1、概述" class="sidebar-link">1、概述</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_2、属性" class="sidebar-link">2、属性</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-1-快捷方式属性-指向文档内部某个节点的快捷方式" class="sidebar-link">2.1 快捷方式属性 （指向文档内部某个节点的快捷方式）</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_1-document-defaultview-返回window对象" class="sidebar-link">（1）document.defaultView  返回window对象</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_2-document-doctype-指向-doctype-html" class="sidebar-link">（2）document.doctype 指向&lt;!DOCTYPE html&gt;</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_3-document-documentelement-返回当前文档的根元素节点-即-html-节点" class="sidebar-link">（3）document.documentElement 返回当前文档的根元素节点，即&lt;html\&gt;节点</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_4-document-body-指向-body-document-head-指向-head" class="sidebar-link">（4）document.body 指向&lt;body\&gt;，document.head 指向 &lt;head\&gt;</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_5-document-scrollingelement-返回文档的滚动元素-标准模式-html-兼容模式-body" class="sidebar-link">（5）document.scrollingElement 返回文档的滚动元素（标准模式）</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_6-document-activeelement-返回文档中获取焦点的元素-一般为表单元素-如没有则返回-body-或null" class="sidebar-link">（6）document.activeElement 返回文档中获取焦点的元素，一般为表单元素，如没有则返回或null</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_7-document-fullscreenelement-返回当前以全屏状态展示的-dom-元素" class="sidebar-link">（7）document.fullscreenElement 返回当前以全屏状态展示的 DOM 元素</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-2-节点集合属性-文档内部特定元素的集合-返htmlcollection实例" class="sidebar-link">2.2 节点集合属性 （文档内部特定元素的集合，返HTMLCollection实例）</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_1-document-links-返回所有含href属性的-a-和-area" class="sidebar-link">（1）document.links 返回所有含href属性的</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_2-document-forms-返回所有-form-表单节点" class="sidebar-link">（2）document.forms 返回所有 表单节点</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_3-document-images-返回页面所有-img-图片节点" class="sidebar-link">（3）document.images 返回页面所有    图片节点</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_4-document-embeds-document-plugins-返回所有-embed-嵌入节点" class="sidebar-link">（4）document.embeds，document.plugins 返回所有  嵌入节点</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_5-document-scripts-返回所有-script-节点" class="sidebar-link">（5）document.scripts  返回所有    节点</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_6-document-stylesheets-返回文档内嵌或引入的样式表集合" class="sidebar-link">（6）document.styleSheets 返回文档内嵌或引入的样式表集合</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_7-小结-除了stylesheets属性-其他返回都是htmlcollection实例" class="sidebar-link">（7）小结（除了styleSheets属性，其他返回都是HTMLCollection实例）</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-3-文档静态信息属性" class="sidebar-link">2.3 文档静态信息属性</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_1-document-documenturi-document-url-返回网址字符串" class="sidebar-link">（1）document.documentURI，document.URL 返回网址字符串</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_2-document-domain-返回域名" class="sidebar-link">（2）document.domain 返回域名</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_3-document-location-提供-url-相关的信息和操作方法" class="sidebar-link">（3）document.location 提供 URL 相关的信息和操作方法</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_4-document-lastmodified-返回当前文档最后修改的时间" class="sidebar-link">（4）document.lastModified  返回当前文档最后修改的时间</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_5-document-title-返回当前文档的标题" class="sidebar-link">（5）document.title  返回当前文档的标题</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_6-document-characterset-返回当前文档的编码-如utf-8等" class="sidebar-link">（6）document.characterSet 返回当前文档的编码，如UTF-8等</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_7-document-referrer-当前文档的访问者来自哪里-如通过百度进入的" class="sidebar-link">（7）document.referrer 当前文档的访问者来自哪里（如通过百度进入的）</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_8-document-dir-返回文字方向-rtl从右到左-ltr从左到右" class="sidebar-link">（8）document.dir 返回文字方向（rtl从右到左，ltr从左到右）</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_9-document-compatmode-返回浏览器处理文档的模式-向后兼容与严格模式" class="sidebar-link">（9）document.compatMode 返回浏览器处理文档的模式（向后兼容与严格模式）</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-4-文档状态属性" class="sidebar-link">2.4 文档状态属性</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_1-document-hidden-当前页面是否可见-返布尔值。" class="sidebar-link">（1）document.hidden 当前页面是否可见，返布尔值。</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_2-document-visibilitystate-返回文档可见状态-visible、hidden、prerender、unloaded" class="sidebar-link">（2）document.visibilityState 返回文档可见状态（visible、hidden、prerender、unloaded）</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_3-document-readystate-返回当前文档的状态-loading、interactive、complete" class="sidebar-link">（3）document.readyState 返回当前文档的状态（loading、interactive、complete）</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-5-document-cookie-用来操作浏览器-cookie" class="sidebar-link">2.5 document.cookie 用来操作浏览器 Cookie</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-6-document-designmode-控制当前文档是否可编辑-on、off" class="sidebar-link">2.6 document.designMode 控制当前文档是否可编辑（on、off）</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-7-document-implementation-返回一个domimplementation对象" class="sidebar-link">2.7 document.implementation 返回一个DOMImplementation对象</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_3、方法" class="sidebar-link">3、方法</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-1-document-open-document-close-打开和关闭文档可写状态" class="sidebar-link">3.1 document.open()，document.close() 打开和关闭文档可写状态</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-2-document-write-向当前文档写入内容-document-writeln-写入内容并换行" class="sidebar-link">3.2 document.write() 向当前文档写入内容，document.writeln() 写入内容并换行</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-3-document-queryselector-返回匹配该选择器的元素节点-document-queryselectorall-返回一个nodelist对象-包含所有匹配给定选择器的节点" class="sidebar-link">3.3 document.querySelector() 返回匹配该选择器的元素节点，document.querySelectorAll() 返回一个NodeList对象，包含所有匹配给定选择器的节点</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-4-document-getelementsbytagname-搜索-html-标签名-返回符合条件的元素" class="sidebar-link">3.4 document.getElementsByTagName() 搜索 HTML 标签名，返回符合条件的元素</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-5-document-getelementsbyclassname-返回class符合条件的元素" class="sidebar-link">3.5 document.getElementsByClassName() 返回class符合条件的元素</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-6-document-getelementsbyname-返回拥有相应name值的元素" class="sidebar-link">3.6 document.getElementsByName() 返回拥有相应name值的元素</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-7-document-getelementbyid-返回匹配指定id属性的元素节点" class="sidebar-link">3.7 document.getElementById() 返回匹配指定id属性的元素节点</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-8-document-elementfrompoint-x-y-返回位于页面指定坐标最上层的元素节点-document-elementsfrompoint-x-y-返回一个数组-成员是位于指定坐标的所有元素" class="sidebar-link">3.8 document.elementFromPoint(x, y) 返回位于页面指定坐标最上层的元素节点，document.elementsFromPoint(x, y) 返回一个数组，成员是位于指定坐标的所有元素</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-9-document-createelement-创建元素节点-并返回" class="sidebar-link">3.9 document.createElement() 创建元素节点，并返回</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-10-document-createtextnode-创建文本节点-并返回" class="sidebar-link">3.10 document.createTextNode() 创建文本节点，并返回</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-11-document-createattribute-创建属性节点-并返回" class="sidebar-link">3.11 document.createAttribute() 创建属性节点，并返回</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-12-document-createcomment-创建注释节点-并返回" class="sidebar-link">3.12 document.createComment() 创建注释节点，并返回</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-13-document-createdocumentfragment-创建空文档片段对象" class="sidebar-link">3.13 document.createDocumentFragment() 创建空文档片段对象</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-14-document-createevent-创建事件对象-event实例" class="sidebar-link">3.14 document.createEvent() 创建事件对象（Event实例）</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-15-document-addeventlistener-添加事件监听-document-removeeventlistener-移除事件监听-document-dispatchevent-触发事件" class="sidebar-link">3.15 document.addEventListener() 添加事件监听，document.removeEventListener() 移除事件监听，document.dispatchEvent() 触发事件</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-16-document-hasfocus-判断当前文档是否有元素被激活或获取焦点" class="sidebar-link">3.16 document.hasFocus() 判断当前文档是否有元素被激活或获取焦点</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-17-document-adoptnode-采用外部节点-document-importnode-输入-拷贝-外部节点" class="sidebar-link">3.17 document.adoptNode() 采用外部节点，document.importNode() 输入（拷贝）外部节点</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-18-document-createnodeiterator-返回一个子节点遍历器-nodefilter实例" class="sidebar-link">3.18 document.createNodeIterator() 返回一个子节点遍历器（NodeFilter实例）</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-19-document-createtreewalker-返回一个dom的子树遍历器-treewalker实例" class="sidebar-link">3.19 document.createTreeWalker() 返回一个DOM的子树遍历器（TreeWalker实例）</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-20-document-execcommand-document-querycommandsupported-document-querycommandenabled" class="sidebar-link">3.20 document.execCommand()，document.queryCommandSupported()，document.queryCommandEnabled()</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_1-document-execcommand-执行命令-实现复制文本等功能-富文本编辑器大量使用此方法" class="sidebar-link">（1）document.execCommand() 执行命令（实现复制文本等功能，富文本编辑器大量使用此方法）</a></li><li class="sidebar-sub-header level6"><a href="/blog/pages/7d961b8030c6099e/#命令列表" class="sidebar-link">命令列表</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_2-document-querycommandsupported-浏览器是否支持execcommand的某个命令" class="sidebar-link">（2）document.queryCommandSupported() 浏览器是否支持execCommand的某个命令</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_3-document-querycommandenabled-当前是否可用execcommand的某个命令" class="sidebar-link">（3）document.queryCommandEnabled() 当前是否可用execCommand的某个命令</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-21-document-getselection" class="sidebar-link">3.21 document.getSelection()</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/blog/pages/7d961b8030c6099e/#六、element节点" class="sidebar-link">六、Element节点</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_1、实例属性" class="sidebar-link">1、实例属性</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-1-元素特性的相关属性" class="sidebar-link">1.1 元素特性的相关属性</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_1-element-id-返回元素id属性-可读写" class="sidebar-link">（1）Element.id 返回元素ID属性，可读写</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_2-element-tagname-返回元素的大写标签" class="sidebar-link">（2）Element.tagName 返回元素的大写标签</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_3-element-dir-元素的文字方向-可读写-ltr、rtl" class="sidebar-link">（3）Element.dir 元素的文字方向，可读写（ltr、rtl）</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_4-element-accesskey-分配给当前元素的快捷键-可读写" class="sidebar-link">（4）Element.accessKey 分配给当前元素的快捷键，可读写</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_5-element-draggable-当前元素是否可拖动-布尔值-可读写" class="sidebar-link">（5）Element.draggable 当前元素是否可拖动，布尔值，可读写</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_6-element-lang-返回当前元素的语言设置-可读写" class="sidebar-link">（6）Element.lang 返回当前元素的语言设置，可读写</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_7-element-tabindex-当前元素在-tab-键遍历时的顺序-整数-可读写" class="sidebar-link">（7）Element.tabIndex 当前元素在 Tab 键遍历时的顺序，整数，可读写</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_8-element-title-当前元素的-html-属性title-可读写" class="sidebar-link">（8）Element.title 当前元素的 HTML 属性title，可读写</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-2-元素状态的相关属性" class="sidebar-link">1.2 元素状态的相关属性</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_1-element-hidden-当前元素的hidden属性-控制是否可见-布尔值-可读写" class="sidebar-link">（1）Element.hidden 当前元素的hidden属性，控制是否可见，布尔值，可读写</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_2-element-contenteditable元素内容的可编辑性-字符串-可读写" class="sidebar-link">（2）Element.contentEditable元素内容的可编辑性，字符串，可读写，</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#element-iscontenteditable-元素内容是否可编辑-布尔值-只读" class="sidebar-link">Element.isContentEditable 元素内容是否可编辑，布尔值，只读</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-3-element-attributes-类数组-成员是元素的所有html属性节点" class="sidebar-link">1.3 Element.attributes 类数组，成员是元素的所有HTML属性节点</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-4-element-classname-元素的class-element-classlist-类数组-成员是各class-有自身方法" class="sidebar-link">1.4 Element.className 元素的class，Element.classList 类数组，成员是各class，有自身方法</a></li><li class="sidebar-sub-header level6"><a href="/blog/pages/7d961b8030c6099e/#classlist对象有下列方法。" class="sidebar-link">classList对象有下列方法。</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-5-element-dataset-返回一个对象-读写元素的data-属性" class="sidebar-link">1.5 Element.dataset 返回一个对象，读写元素的data-属性</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-6-element-innerhtml-返回一个字符串-是元素包含的所有-html-代码-可读写" class="sidebar-link">1.6 Element.innerHTML 返回一个字符串，是元素包含的所有 HTML 代码，可读写</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-7-element-outerhtml-返回一个字符串-包含元素本身和所有子元素的html代码-可读写" class="sidebar-link">1.7 Element.outerHTML 返回一个字符串，包含元素本身和所有子元素的HTML代码，可读写</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-8-element-clientheight-元素高度-element-clientwidth元素宽度" class="sidebar-link">1.8 Element.clientHeight 元素高度，Element.clientWidth元素宽度</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-9-element-clientleft-左边框宽度-element-clienttop上边框宽" class="sidebar-link">1.9 Element.clientLeft 左边框宽度，Element.clientTop上边框宽</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-10-element-scrollheight-元素总高度-element-scrollwidth-元素总宽度" class="sidebar-link">1.10 Element.scrollHeight 元素总高度，Element.scrollWidth 元素总宽度</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-11-element-scrollleft-元素水平滚动条右侧滚动的像素量-element-scrolltop-元素垂直滚动条向下滚动的像素量" class="sidebar-link">1.11 Element.scrollLeft 元素水平滚动条右侧滚动的像素量，Element.scrollTop 元素垂直滚动条向下滚动的像素量</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-12-element-offsetparent-返回最靠近当前元素的、并且-css-的position属性不等于static的上层元素" class="sidebar-link">1.12 Element.offsetParent 返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-13-element-offsetheight-元素的css垂直高度-element-offsetwidth元素的css水平宽度" class="sidebar-link">1.13 Element.offsetHeight 元素的CSS垂直高度，Element.offsetWidth元素的CSS水平宽度</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-14-element-offsetleft-水平位移-element-offsettop-垂直位移" class="sidebar-link">1.14 Element.offsetLeft 水平位移，Element.offsetTop 垂直位移</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-15-element-style-返回cssstyledeclaration实例-用于操作css" class="sidebar-link">1.15 Element.style 返回CSSStyleDeclaration实例，用于操作CSS</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-16-element-children-类数组-所有子元素-element-childelementcount-子元素个数" class="sidebar-link">1.16 Element.children 类数组，所有子元素，Element.childElementCount 子元素个数</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-17-element-firstelementchild-首个子元素-element-lastelementchild-最后一个子元素" class="sidebar-link">1.17 Element.firstElementChild 首个子元素，Element.lastElementChild 最后一个子元素</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_1-18-element-nextelementsibling后一个兄弟元素节点-element-previouselementsibling上一个兄弟元素节点" class="sidebar-link">1.18 Element.nextElementSibling后一个兄弟元素节点，Element.previousElementSibling上一个兄弟元素节点</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_2、实例方法" class="sidebar-link">2、实例方法</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-1-标签属性相关方法" class="sidebar-link">2.1 标签属性相关方法</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_1-getattribute-读取某个属性的值" class="sidebar-link">（1）getAttribute()：读取某个属性的值</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_2-getattributenames-返回当前元素的所有属性名" class="sidebar-link">（2）getAttributeNames()：返回当前元素的所有属性名</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_3-setattribute-写入属性值" class="sidebar-link">（3）setAttribute()：写入属性值</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_4-hasattribute-某个属性是否存在" class="sidebar-link">（4）hasAttribute()：某个属性是否存在</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_5-hasattributes-当前元素是否有属性" class="sidebar-link">（5）hasAttributes()：当前元素是否有属性</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_6-removeattribute-删除属性" class="sidebar-link">（6）removeAttribute()：删除属性</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-2-element-queryselector-返回第一个匹配的子元素" class="sidebar-link">2.2 Element.querySelector() 返回第一个匹配的子元素</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-3-element-queryselectorall-返回nodelist实例-包含所有子元素" class="sidebar-link">2.3 Element.querySelectorAll() 返回NodeList实例，包含所有子元素</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-4-element-getelementsbyclassname-通过class获取所有子元素" class="sidebar-link">2.4 Element.getElementsByClassName() 通过class获取所有子元素</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-5-element-getelementsbytagname-通过标签获取索引子元素" class="sidebar-link">2.5 Element.getElementsByTagName() 通过标签获取索引子元素</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-6-element-closest-接受css选择器参数-返回最靠近的祖先节点" class="sidebar-link">2.6 Element.closest() 接受CSS选择器参数，返回最靠近的祖先节点</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-7-element-matches-当前元素是否匹配给定的css选择器" class="sidebar-link">2.7 Element.matches() 当前元素是否匹配给定的css选择器</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-8-事件相关方法" class="sidebar-link">2.8 事件相关方法</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_1-element-addeventlistener-添加事件的回调函数" class="sidebar-link">（1）Element.addEventListener()：添加事件的回调函数</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_2-element-removeeventlistener-移除事件监听函数" class="sidebar-link">（2）Element.removeEventListener()：移除事件监听函数</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_3-element-dispatchevent-触发事件" class="sidebar-link">（3）Element.dispatchEvent()：触发事件</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-9-element-scrollintoview-让元素滚动到浏览器可视区" class="sidebar-link">2.9 Element.scrollIntoView()  让元素滚动到浏览器可视区</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-10-element-getboundingclientrect-返回元素大小、位置信息的对象" class="sidebar-link">2.10 Element.getBoundingClientRect() 返回元素大小、位置信息的对象</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-11-element-getclientrects-元素在页面上形成的所有矩形-类数组" class="sidebar-link">2.11 Element.getClientRects() 元素在页面上形成的所有矩形，类数组</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-12-element-insertadjacentelement-插入新节点到元素的指定位置" class="sidebar-link">2.12 Element.insertAdjacentElement()  插入新节点到元素的指定位置</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-13-element-insertadjacenthtml-插入html字符串到指定位置-element-insertadjacenttext-插入text到指定位置" class="sidebar-link">2.13 Element.insertAdjacentHTML() 插入html字符串到指定位置，Element.insertAdjacentText() 插入text到指定位置</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-14-element-remove-移除元素" class="sidebar-link">2.14 Element.remove() 移除元素</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-15-element-focus-将页面焦点转移到元素-element-blur-将焦点移除" class="sidebar-link">2.15 Element.focus() 将页面焦点转移到元素，Element.blur() 将焦点移除</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-16-element-click-模拟点击事件" class="sidebar-link">2.16 Element.click() 模拟点击事件</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/blog/pages/7d961b8030c6099e/#七、元素属性的操作" class="sidebar-link">七、元素属性的操作</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_1、element-attributes-属性-返回包含标签所有属性的类数组动态对象" class="sidebar-link">1、Element.attributes 属性 （返回包含标签所有属性的类数组动态对象）</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_2、元素的标准属性" class="sidebar-link">2、元素的标准属性</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_3、属性操作的标准方法" class="sidebar-link">3、属性操作的标准方法</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-1-概述" class="sidebar-link">3.1 概述</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-2-element-getattribute-返回元素的指定属性值-字符串" class="sidebar-link">3.2 Element.getAttribute() 返回元素的指定属性值，字符串</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-3-element-getattributenames-返回一个数组-成员是元素的所有属性的名字" class="sidebar-link">3.3 Element.getAttributeNames() 返回一个数组，成员是元素的所有属性的名字</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-4-element-setattribute-为元素设置-新增-属性" class="sidebar-link">3.4 Element.setAttribute() 为元素设置（新增）属性</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-5-element-hasattribute-是否包含指定属性" class="sidebar-link">3.5 Element.hasAttribute() 是否包含指定属性</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-6-element-hasattributes-是否有任何的属性" class="sidebar-link">3.6 Element.hasAttributes() 是否有任何的属性</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-7-element-removeattribute-移除指定属性" class="sidebar-link">3.7 Element.removeAttribute() 移除指定属性</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_4、dataset-属性-获取data-自定义属性" class="sidebar-link">4、dataset 属性   获取data-*自定义属性</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/blog/pages/7d961b8030c6099e/#八、text-节点和-documentfragment-节点" class="sidebar-link">八、Text 节点和 DocumentFragment 节点</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_1、text-节点的概念" class="sidebar-link">1、Text 节点的概念</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_2、text-节点的属性" class="sidebar-link">2、Text 节点的属性</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-1-data-设置或读取文本节点内容" class="sidebar-link">2.1 data  设置或读取文本节点内容</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-2-wholetext-当前文本和毗邻文本节-作为整体返回" class="sidebar-link">2.2 wholeText 当前文本和毗邻文本节，作为整体返回</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-3-length-文本长度" class="sidebar-link">2.3 length 文本长度</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-4-nextelementsibling-后一个兄弟元素节点-previouselementsibling-前一个兄弟元素节点" class="sidebar-link">2.4 nextElementSibling 后一个兄弟元素节点，previousElementSibling 前一个兄弟元素节点</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_3、text-节点的方法" class="sidebar-link">3、Text 节点的方法</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-1-appenddata-deletedata-insertdata-replacedata-substringdata" class="sidebar-link">3.1 appendData()，deleteData()，insertData()，replaceData()，substringData()</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-2-remove-移除text节点" class="sidebar-link">3.2 remove() 移除Text节点</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-3-splittext-分割text节点变为两个" class="sidebar-link">3.3 splitText() 分割Text节点变为两个</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_4、documentfragment-文档片段节点" class="sidebar-link">4、DocumentFragment 文档片段节点</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/blog/pages/7d961b8030c6099e/#八、css-操作" class="sidebar-link">八、CSS 操作</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_1、html-元素的-style-属性" class="sidebar-link">1、HTML 元素的 style 属性</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_2、cssstyledeclaration-接口" class="sidebar-link">2、CSSStyleDeclaration 接口</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-1-简介-用来操作元素的样式-可读写" class="sidebar-link">2.1 简介 - 用来操作元素的样式，可读写</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-2-cssstyledeclaration-实例属性" class="sidebar-link">2.2 CSSStyleDeclaration 实例属性</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_1-cssstyledeclaration-csstext-用来读写所有行内样式" class="sidebar-link">（1）CSSStyleDeclaration.cssText 用来读写所有行内样式</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_2-cssstyledeclaration-length-行内样式的长度" class="sidebar-link">（2）CSSStyleDeclaration.length 行内样式的长度</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_3-cssstyledeclaration-parentrule-返回当前规则所属的那个样式块" class="sidebar-link">（3）CSSStyleDeclaration.parentRule 返回当前规则所属的那个样式块</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_2-3-cssstyledeclaration-实例方法" class="sidebar-link">2.3 CSSStyleDeclaration 实例方法</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_1-cssstyledeclaration-getpropertypriority-指定样式有没有设置important优先级" class="sidebar-link">（1）CSSStyleDeclaration.getPropertyPriority() 指定样式有没有设置important优先级</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_2-cssstyledeclaration-getpropertyvalue-返回指定样式的值" class="sidebar-link">（2）CSSStyleDeclaration.getPropertyValue() 返回指定样式的值</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_3-cssstyledeclaration-item-返回指定位置的css属性名" class="sidebar-link">（3）CSSStyleDeclaration.item() 返回指定位置的CSS属性名</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_4-cssstyledeclaration-removeproperty-移除指定css属性-并返回原来的值" class="sidebar-link">（4）CSSStyleDeclaration.removeProperty() 移除指定CSS属性，并返回原来的值</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_5-cssstyledeclaration-setproperty-设置新的-css-属性" class="sidebar-link">（5）CSSStyleDeclaration.setProperty() 设置新的 CSS 属性</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_3、css-模块的侦测-判断浏览器是否支持某个样式" class="sidebar-link">3、CSS 模块的侦测（判断浏览器是否支持某个样式）</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_4、原生css-对象" class="sidebar-link">4、原生CSS 对象</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_4-1-css-escape-转义css选择器里的特殊字符" class="sidebar-link">4.1 CSS.escape() 转义CSS选择器里的特殊字符</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_4-2-css-supports-当前环境是否支持某一句-css-规则" class="sidebar-link">4.2 CSS.supports() 当前环境是否支持某一句 CSS 规则</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_5、window-getcomputedstyle-返回元素最终样式" class="sidebar-link">5、window.getComputedStyle() 返回元素最终样式</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_6、css-伪元素样式的获取" class="sidebar-link">6、CSS 伪元素样式的获取</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_7、stylesheet-接口" class="sidebar-link">7、StyleSheet 接口</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_7-1-概述" class="sidebar-link">7.1 概述</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_7-2-实例属性" class="sidebar-link">7.2 实例属性</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_1-stylesheet-disabled-样式表是否处于禁用状态-可读写" class="sidebar-link">（1）StyleSheet.disabled 样式表是否处于禁用状态，可读写</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_2-stylesheet-href-返回样式表的网址" class="sidebar-link">（2）Stylesheet.href  返回样式表的网址</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_3-stylesheet-media-返回一个媒介类数组" class="sidebar-link">（3）StyleSheet.media 返回一个媒介类数组</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_4-stylesheet-title-返回样式表的title属性" class="sidebar-link">（4）StyleSheet.title 返回样式表的title属性</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_5-stylesheet-type-返回样式表的type属性" class="sidebar-link">（5）StyleSheet.type 返回样式表的type属性</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_6-stylesheet-parentstylesheet-返回父样式表-当前样式表是通过-import加载才有值-否则null" class="sidebar-link">（6）StyleSheet.parentStyleSheet 返回父样式表，当前样式表是通过@import加载才有值，否则null</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_7-stylesheet-ownernode-返回样式表所在的dom节点" class="sidebar-link">（7）StyleSheet.ownerNode 返回样式表所在的DOM节点</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_8-cssstylesheet-cssrules-返回一个包含所有css规则的类数组" class="sidebar-link">（8）CSSStyleSheet.cssRules 返回一个包含所有css规则的类数组</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_9-cssstylesheet-ownerrule-规则所有者" class="sidebar-link">（9）CSSStyleSheet.ownerRule 规则所有者</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_7-3-实例方法" class="sidebar-link">7.3 实例方法</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_1-cssstylesheet-insertrule-插入css规则" class="sidebar-link">（1）CSSStyleSheet.insertRule() 插入css规则</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_2-cssstylesheet-deleterule-移除css规则" class="sidebar-link">（2）CSSStyleSheet.deleteRule() 移除css规则</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_8、实例-添加样式表" class="sidebar-link">8、实例：添加样式表</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_9、cssrulelist-接口" class="sidebar-link">9、CSSRuleList 接口</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_10、cssrule-接口" class="sidebar-link">10、CSSRule 接口</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_10-1-概述" class="sidebar-link">10.1 概述</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_10-2-cssrule-实例的属性" class="sidebar-link">10.2 CSSRule 实例的属性</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_1-cssrule-csstext" class="sidebar-link">（1）CSSRule.cssText</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_2-cssrule-parentstylesheet" class="sidebar-link">（2）CSSRule.parentStyleSheet</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_3-cssrule-parentrule" class="sidebar-link">（3）CSSRule.parentRule</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_4-cssrule-type" class="sidebar-link">（4）CSSRule.type</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_10-3-cssstylerule-接口" class="sidebar-link">10.3 CSSStyleRule 接口</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_1-cssstylerule-selectortext" class="sidebar-link">（1）CSSStyleRule.selectorText</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_2-cssstylerule-style" class="sidebar-link">（2）CSSStyleRule.style</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_10-4-cssmediarule-接口" class="sidebar-link">10.4 CSSMediaRule 接口</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_11、window-matchmedia" class="sidebar-link">11、window.matchMedia()</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_11-1-基本用法" class="sidebar-link">11.1 基本用法</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_11-2-mediaquerylist-接口的实例属性" class="sidebar-link">11.2 MediaQueryList 接口的实例属性</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_1-mediaquerylist-media" class="sidebar-link">（1）MediaQueryList.media</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_2-mediaquerylist-matches" class="sidebar-link">（2）MediaQueryList.matches</a></li><li class="sidebar-sub-header level5"><a href="/blog/pages/7d961b8030c6099e/#_3-mediaquerylist-onchange" class="sidebar-link">（3）MediaQueryList.onchange</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_11-3-mediaquerylist-接口的实例方法" class="sidebar-link">11.3 MediaQueryList 接口的实例方法</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_12、本章小结" class="sidebar-link">12、本章小结</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/blog/pages/7d961b8030c6099e/#九、mutation-observer-api-监视dom变动" class="sidebar-link">九、Mutation Observer API 监视DOM变动</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_1、概述-2" class="sidebar-link">1、概述</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_2、mutationobserver-构造函数-使用方式" class="sidebar-link">2、MutationObserver 构造函数 (使用方式)</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_3、mutationobserver-的实例方法" class="sidebar-link">3、MutationObserver 的实例方法</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-1-observe" class="sidebar-link">3.1 observe()</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_3-2-disconnect-takerecords" class="sidebar-link">3.2 disconnect()，takeRecords（）</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_4、mutationrecord-对象-变动记录" class="sidebar-link">4、MutationRecord 对象 (变动记录)</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/7d961b8030c6099e/#_5、应用示例" class="sidebar-link">5、应用示例</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_5-1-子元素的变动" class="sidebar-link">5.1 子元素的变动</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_5-2-属性的变动" class="sidebar-link">5.2 属性的变动</a></li><li class="sidebar-sub-header level4"><a href="/blog/pages/7d961b8030c6099e/#_5-3-取代-domcontentloaded-事件" class="sidebar-link">5.3 取代 DOMContentLoaded 事件</a></li><li class="sidebar-sub-header level6"><a href="/blog/pages/7d961b8030c6099e/#封装一个监听-dom-生成的函数" class="sidebar-link">封装一个监听 DOM 生成的函数</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/blog/pages/7d961b8030c6099e/#文档" class="sidebar-link">文档</a></li></ul></li><li><a href="/blog/pages/10b2761db5a8e089/" class="sidebar-link">事件</a></li><li><a href="/blog/pages/bab4930124ad2c10/" class="sidebar-link">浏览器模型</a></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06970110><div class="articleInfo" data-v-06970110><ul class="breadcrumbs" data-v-06970110><li data-v-06970110><a href="/blog/" title="首页" class="iconfont icon-home router-link-active" data-v-06970110></a></li> <li data-v-06970110><a href="/blog/note/javascript/#《JavaScript教程》笔记" data-v-06970110>《JavaScript教程》笔记</a></li></ul> <div class="info" data-v-06970110><div title="作者" class="author iconfont icon-touxiang" data-v-06970110><a href="https://github.com/heBody" target="_blank" title="作者" class="beLink" data-v-06970110>heBody</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06970110><a href="javascript:;" data-v-06970110>2020-01-12</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">DOM<!----></h1>  <div class="theme-vdoing-content content__default"><h1 id="dom"><a href="#dom" class="header-anchor">#</a> DOM</h1> <h2 id="一、概述"><a href="#一、概述" class="header-anchor">#</a> 一、概述</h2> <h3 id="_1、dom"><a href="#_1、dom" class="header-anchor">#</a> 1、DOM</h3> <p><strong>DOM 是 JavaScript 操作网页的接口</strong>，全称为“<strong>文档对象模型</strong>”（Document Object Model）。它的<strong>作用</strong>是<strong>将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作</strong>（比如增删内容）。</p> <p>浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。</p> <p>DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法。</p> <h3 id="_2、节点"><a href="#_2、节点" class="header-anchor">#</a> 2、节点</h3> <p><strong>DOM 的最小组成单位叫做节点（node）</strong>。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。</p> <p>节点的类型有七种。</p> <ul><li><code>Document</code>：整个文档树的顶层节点</li> <li><code>DocumentType</code>：<code>doctype</code>标签（比如<code>&lt;!DOCTYPE html&gt;</code>）</li> <li><code>Element</code>：网页的各种HTML标签（比如<code>&lt;body&gt;</code>、<code>&lt;a&gt;</code>等）</li> <li><code>Attribute</code>：网页元素的属性（比如<code>class=&quot;right&quot;</code>）</li> <li><code>Text</code>：标签之间或标签包含的文本</li> <li><code>Comment</code>：注释</li> <li><code>DocumentFragment</code>：文档的片段</li></ul> <p>浏览器提供一个原生的节点对象<code>Node</code>，上面这七种节点都继承了<code>Node</code>，因此具有一些共同的属性和方法。</p> <h3 id="_3、节点树"><a href="#_3、节点树" class="header-anchor">#</a> 3、节点树</h3> <p>一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树。</p> <p>浏览器原生提供<code>document</code>节点，代表整个文档。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document
    26. 

  26. <span class="token comment">// 整个文档树</span>
    27. 

  27. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>文档的第一层有两个节点，第一个是文档类型节点（<code>&lt;!doctype html&gt;</code>），第二个是 HTML 网页的顶层容器标签<code>&lt;html&gt;</code>。后者构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点。</p> <p>除了根节点，其他节点都有三种层级关系。</p> <ul><li>父节点关系（parentNode）：直接的那个上级节点</li> <li>子节点关系（childNodes）：直接的下级节点</li> <li>同级节点关系（sibling）：拥有同一个父节点的节点</li></ul> <p>DOM 提供操作接口，用来获取这三种关系的节点。比如，子节点接口包括<code>firstChild</code>（第一个子节点）和<code>lastChild</code>（最后一个子节点）等属性，同级节点接口包括<code>nextSibling</code>（紧邻在后的那个同级节点）和<code>previousSibling</code>（紧邻在前的那个同级节点）属性。</p> <h2 id="二、node接口"><a href="#二、node接口" class="header-anchor">#</a> 二、Node接口</h2> <p><strong>所有 DOM 节点对象都继承了 Node 接口，拥有一些共同的属性和方法</strong>。这是 DOM 操作的基础。</p> <h3 id="_1、属性"><a href="#_1、属性" class="header-anchor">#</a> 1、属性</h3> <h4 id="_1-1-node-prototype-nodetype节点类型"><a href="#_1-1-node-prototype-nodetype节点类型" class="header-anchor">#</a> 1.1 Node.prototype.nodeType节点类型</h4> <p><code>nodeType</code>属性<strong>返回一个整数值，表示节点的类型</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>nodeType <span class="token comment">// 9</span>
    28. 

  28. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码中，文档节点的类型值为9。</p> <p>Node 对象定义了几个常量，对应这些类型值。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>nodeType <span class="token operator">===</span> Node<span class="token punctuation">.</span><span class="token constant">DOCUMENT_NODE</span> <span class="token comment">// true</span>
    29. 

  29. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码中，文档节点的<code>nodeType</code>属性等于常量<code>Node.DOCUMENT_NODE</code>。</p> <p>不同节点的<code>nodeType</code>属性值和对应的常量如下。</p> <ul><li>文档节点（document）：9，对应常量<code>Node.DOCUMENT_NODE</code></li> <li>元素节点（element）：1，对应常量<code>Node.ELEMENT_NODE</code></li> <li>属性节点（attr）：2，对应常量<code>Node.ATTRIBUTE_NODE</code></li> <li>文本节点（text）：3，对应常量<code>Node.TEXT_NODE</code></li> <li>文档片断节点（DocumentFragment）：11，对应常量<code>Node.DOCUMENT_FRAGMENT_NODE</code></li> <li>文档类型节点（DocumentType）：10，对应常量<code>Node.DOCUMENT_TYPE_NODE</code></li> <li>注释节点（Comment）：8，对应常量<code>Node.COMMENT_NODE</code></li></ul> <p>确定节点类型时，使用<code>nodeType</code>属性是常用方法。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> node <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>firstChild<span class="token punctuation">;</span> <span class="token comment">// 获取到&lt;head&gt;节点</span>
    30. 

  30. <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>nodeType <span class="token operator">===</span> Node<span class="token punctuation">.</span><span class="token constant">ELEMENT_NODE</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    31. 

  31.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'该节点是元素节点'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    32. 

  32. <span class="token punctuation">}</span>
    33. 

  33. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="_1-2-node-prototype-nodename节点名称"><a href="#_1-2-node-prototype-nodename节点名称" class="header-anchor">#</a> 1.2 Node.prototype.nodeName节点名称</h4> <p><code>nodeName</code>属性<strong>返回节点的名称</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    34. 

  34. <span class="token comment">// &lt;div id=&quot;d1&quot;&gt;hello world&lt;/div&gt;</span>
    35. 

  35. <span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'d1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    36. 

  36. div<span class="token punctuation">.</span>nodeName <span class="token comment">// &quot;DIV&quot;</span>
    37. 

  37. 

  38. document<span class="token punctuation">.</span>nodeName <span class="token comment">// #document</span>
    39. 

  39. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>上面代码中，元素节点<code>&lt;div&gt;</code>的<code>nodeName</code>属性就是大写的标签名<code>DIV</code>。</p> <p>不同节点的<code>nodeName</code>属性值如下。</p> <ul><li>文档节点（document）：<code>#document</code></li> <li>元素节点（element）：大写的标签名，如DIV</li> <li>属性节点（attr）：属性的名称</li> <li>文本节点（text）：<code>#text</code></li> <li>文档片断节点（DocumentFragment）：<code>#document-fragment</code></li> <li>文档类型节点（DocumentType）：文档的类型</li> <li>注释节点（Comment）：<code>#comment</code></li></ul> <h4 id="_1-3-node-prototype-nodevalue当前节点文本"><a href="#_1-3-node-prototype-nodevalue当前节点文本" class="header-anchor">#</a> 1.3 Node.prototype.nodeValue当前节点文本</h4> <p><code>nodeValue</code>属性<strong>返回一个字符串，表示当前节点本身的文本值</strong>，该属性<strong>可读写</strong>。</p> <p>只有<strong>文本节点（text）、注释节点（comment）和属性节点（attr）有文本值</strong>，因此这三类节点的<code>nodeValue</code>可以返回结果，其他类型的节点一律返回<code>null</code>。同样的，也只有这三类节点可以设置<code>nodeValue</code>属性的值，其他类型的节点设置无效。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    40. 

  40. <span class="token comment">// &lt;div id=&quot;d1&quot;&gt;hello world&lt;/div&gt;</span>
    41. 

  41. <span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'d1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    42. 

  42. div<span class="token punctuation">.</span>nodeValue <span class="token comment">// null</span>
    43. 

  43. div<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>nodeValue <span class="token comment">// &quot;hello world&quot;</span>
    44. 

  44. 

  45. <span class="token keyword">var</span> textNode <span class="token operator">=</span> div<span class="token punctuation">.</span>firstChild<span class="token punctuation">;</span>
    46. 

  46. console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>textNode<span class="token punctuation">)</span> <span class="token comment">// 文本节点对象&quot;hello world&quot;</span>
    47. 

  47. console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> textNode<span class="token punctuation">)</span> <span class="token comment">// object</span>
    48. 

  48. console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>textNode<span class="token punctuation">.</span>nodeType<span class="token punctuation">)</span> <span class="token comment">// 3</span>
    49. 

  49. console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>textNode<span class="token punctuation">.</span>nodeName<span class="token punctuation">)</span> <span class="token comment">// #text</span>
    50. 

  50. console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>textNode<span class="token punctuation">.</span>nodeValue<span class="token punctuation">)</span> <span class="token comment">// 'hello world'</span>
    51. 

  51. 

  52. textNode<span class="token punctuation">.</span>nodeValue <span class="token operator">=</span> <span class="token string">'123'</span> <span class="token comment">// 修改文本</span>
    53. 

  53. console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>textNode<span class="token punctuation">.</span>nodeValue<span class="token punctuation">)</span> <span class="token comment">// '123'</span>
    54. 

  54. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>上面代码中，<code>div</code>是元素节点，<code>nodeValue</code>属性返回<code>null</code>。<code>div.firstChild</code>是文本节点，所以可以返回文本值。</p> <h4 id="_1-4-node-prototype-textcontent所有文本内容"><a href="#_1-4-node-prototype-textcontent所有文本内容" class="header-anchor">#</a> 1.4 Node.prototype.textContent所有文本内容</h4> <p><code>textContent</code>属性<strong>返回当前节点和它的所有后代节点的文本内容</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码为</span>
    55. 

  55. <span class="token comment">// &lt;div id=&quot;divA&quot;&gt;This is &lt;span&gt;some&lt;/span&gt; text&lt;/div&gt;</span>
    56. 

  56. 

  57. document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'divA'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent
    58. 

  58. <span class="token comment">// This is some text</span>
    59. 

  59. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><code>textContent</code>属性自动忽略当前节点内部的 HTML 标签，返回所有文本内容。</p> <p>该属性是<strong>可读写</strong>的，设置该属性的值，会用一个新的文本节点，替换所有原来的子节点。它还有一个好处，就是自动对 HTML 标签转义。这很适合用于用户提供的内容。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">'&lt;p&gt;GoodBye!&lt;/p&gt;'</span><span class="token punctuation">;</span> <span class="token comment">// 写入文本</span>
    60. 

  60. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码在插入文本时，<strong>会将<code>&lt;p&gt;</code>标签解释为文本</strong>，而不会当作标签处理。</p> <p>对于文本节点（text）、注释节点（comment）和属性节点（attr），<code>textContent</code>属性的值与<code>nodeValue</code>属性相同。对于其他类型的节点，该属性会将每个子节点（不包括注释节点）的内容连接在一起返回。如果一个节点没有子节点，则返回空字符串。</p> <p>文档节点（document）和文档类型节点（doctype）的<code>textContent</code>属性为<code>null</code>。如果要<strong>读取整个文档的内容</strong>，可以使用<code>document.documentElement.textContent</code>。</p> <h4 id="_1-5-node-prototype-baseuri-获取网页路径"><a href="#_1-5-node-prototype-baseuri-获取网页路径" class="header-anchor">#</a> 1.5 Node.prototype.baseURI 获取网页路径</h4> <p><code>baseURI</code>属性<strong>返回一个字符串，表示当前网页的绝对路径</strong>。浏览器根据这个属性，计算网页上的相对路径的 URL。该属性为<strong>只读</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 当前网页的网址为</span>
    61. 

  61. <span class="token comment">// http://www.example.com/index.html</span>
    62. 

  62. document<span class="token punctuation">.</span>baseURI
    63. 

  63. <span class="token comment">// &quot;http://www.example.com/index.html&quot;</span>
    64. 

  64. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>如果无法读到网页的 URL，<code>baseURI</code>属性返回<code>null</code>。</p> <p>该属性的值一般由当前网址的 URL（即<code>window.location</code>属性）决定，但是可以使用 HTML 的<code>&lt;base&gt;</code>标签，改变该属性的值。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    65. 

  65. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>base</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.example.com/page.html<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    66. 

  66. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
    67. 

  67. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    68. 

  68.     document<span class="token punctuation">.</span>baseURI <span class="token comment">// http://www.example.com/page.html   返回base标签的href值</span>
    69. 

  69. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    70. 

  70. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>设置了以后，<code>baseURI</code>属性就返回<code>&lt;base&gt;</code>标签设置的值。</p> <h4 id="_1-6-node-prototype-ownerdocument顶层文档对象"><a href="#_1-6-node-prototype-ownerdocument顶层文档对象" class="header-anchor">#</a> 1.6 Node.prototype.ownerDocument顶层文档对象</h4> <p><code>Node.ownerDocument</code>属性<strong>返回当前节点所在的顶层文档对象</strong>，即<code>document</code>对象。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> d <span class="token operator">=</span> p<span class="token punctuation">.</span>ownerDocument<span class="token punctuation">;</span>
    71. 

  71. d <span class="token operator">===</span> document <span class="token comment">// true</span>
    72. 

  72. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><code>document</code>对象本身的<code>ownerDocument</code>属性，返回<code>null</code>。</p> <h4 id="_1-7-node-prototype-nextsibling下一个同级节点"><a href="#_1-7-node-prototype-nextsibling下一个同级节点" class="header-anchor">#</a> 1.7 Node.prototype.nextSibling下一个同级节点</h4> <p><code>Node.nextSibling</code>属性<strong>返回紧跟在当前节点后面的第一个同级节点</strong>。如果当前节点后面没有同级节点，则返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    73. 

  73. <span class="token comment">// &lt;div id=&quot;d1&quot;&gt;hello&lt;/div&gt;&lt;div id=&quot;d2&quot;&gt;world&lt;/div&gt;</span>
    74. 

  74. <span class="token keyword">var</span> d1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'d1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    75. 

  75. <span class="token keyword">var</span> d2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'d2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    76. 

  76. 

  77. d1<span class="token punctuation">.</span>nextSibling <span class="token operator">===</span> d2 <span class="token comment">// true  // 如果d1和d2之间有空格，会返回文本节点，内容为空格</span>
    78. 

  78. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>上面代码中，<code>d1.nextSibling</code>就是紧跟在<code>d1</code>后面的同级节点<code>d2</code>。</p> <p><strong>注意</strong>，该属性还包括文本节点和注释节点（<code>&lt;!-- comment --&gt;</code>）。因此如果当前节点后面有空格，该属性会返回一个文本节点，内容为空格。</p> <p><code>nextSibling</code>属性可以用来遍历所有子节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'div1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>firstChild<span class="token punctuation">;</span>
    79. 

  79. 

  80. <span class="token keyword">while</span> <span class="token punctuation">(</span>el <span class="token operator">!==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    81. 

  81.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>el<span class="token punctuation">.</span>nodeName<span class="token punctuation">)</span><span class="token punctuation">;</span>
    82. 

  82.   el <span class="token operator">=</span> el<span class="token punctuation">.</span>nextSibling<span class="token punctuation">;</span>
    83. 

  83. <span class="token punctuation">}</span>
    84. 

  84. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>上面代码遍历<code>div1</code>节点的所有子节点。</p> <h4 id="_1-8-node-prototype-previoussibling上一个同级节点"><a href="#_1-8-node-prototype-previoussibling上一个同级节点" class="header-anchor">#</a> 1.8 Node.prototype.previousSibling上一个同级节点</h4> <p><code>previousSibling</code>属性<strong>返回当前节点前面的、距离最近的一个同级节点</strong>。如果当前节点前面没有同级节点，则返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    85. 

  85. <span class="token comment">// &lt;div id=&quot;d1&quot;&gt;hello&lt;/div&gt;&lt;div id=&quot;d2&quot;&gt;world&lt;/div&gt;</span>
    86. 

  86. <span class="token keyword">var</span> d1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'d1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    87. 

  87. <span class="token keyword">var</span> d2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'d2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    88. 

  88. 

  89. d2<span class="token punctuation">.</span>previousSibling <span class="token operator">===</span> d1 <span class="token comment">// true</span>
    90. 

  90. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>上面代码中，<code>d2.previousSibling</code>就是<code>d2</code>前面的同级节点<code>d1</code>。</p> <p><strong>注意</strong>，该属性还包括文本节点和注释节点。因此如果当前节点前面有空格，该属性会返回一个文本节点，内容为空格。</p> <h4 id="_1-9-node-prototype-parentnode父节点"><a href="#_1-9-node-prototype-parentnode父节点" class="header-anchor">#</a> 1.9 Node.prototype.parentNode父节点</h4> <p><code>parentNode</code>属性<strong>返回当前节点的父节点</strong>。对于一个节点来说，它的父节点只可能是三种类型：元素节点（element）、文档节点（document）和文档片段节点（documentfragment）。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>parentNode<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    91. 

  91.   node<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// node的父节点，然后删除子节点node</span>
    92. 

  92. <span class="token punctuation">}</span>
    93. 

  93. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码中，通过<code>node.parentNode</code>属性将<code>node</code>节点从文档里面移除。</p> <p>文档节点（document）和文档片段节点（documentfragment）的父节点都是<code>null</code>。另外，对于那些生成后还没插入 DOM 树的节点，父节点也是<code>null</code>。</p> <h4 id="_1-10-node-prototype-parentelement-父元素节点"><a href="#_1-10-node-prototype-parentelement-父元素节点" class="header-anchor">#</a> 1.10 Node.prototype.parentElement 父元素节点</h4> <p><code>parentElement</code>属性<strong>返回当前节点的父元素节点</strong>。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回<code>null</code>。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>if (node.parentElement) {
    94. 

  94.   node.parentElement.style.color = 'red';
    95. 

  95. }
    96. 

  96. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码中，父元素节点的样式设定了红色。</p> <p>由于父节点只可能是三种类型：元素节点、文档节点（document）和文档片段节点（documentfragment）。<code>parentElement</code>属性相当于把后两种父节点都排除了。</p> <h4 id="_1-11-node-prototype-firstchild-第一个子节点-node-prototype-lastchild-最后一个子节点"><a href="#_1-11-node-prototype-firstchild-第一个子节点-node-prototype-lastchild-最后一个子节点" class="header-anchor">#</a> 1.11 Node.prototype.firstChild 第一个子节点，Node.prototype.lastChild 最后一个子节点</h4> <p><code>firstChild</code>属性<strong>返回当前节点的第一个子节点</strong>，如果当前节点没有子节点，则返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    97. 

  97. <span class="token comment">// &lt;p id=&quot;p1&quot;&gt;&lt;span&gt;First span&lt;/span&gt;&lt;/p&gt;</span>
    98. 

  98. <span class="token keyword">var</span> p1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'p1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    99. 

  99. p1<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>nodeName <span class="token comment">// &quot;SPAN&quot;</span>
    100. 

  100. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>上面代码中，<code>p</code>元素的第一个子节点是<code>span</code>元素。</p> <p><strong>注意</strong>，<code>firstChild</code>返回的除了元素节点，<strong>还可能是文本节点或注释节点</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    101. 

  101. <span class="token comment">// &lt;p id=&quot;p1&quot;&gt;</span>
    102. 

  102. <span class="token comment">//   &lt;span&gt;First span&lt;/span&gt;</span>
    103. 

  103. <span class="token comment">//  &lt;/p&gt;</span>
    104. 

  104. <span class="token keyword">var</span> p1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'p1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    105. 

  105. p1<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>nodeName <span class="token comment">// &quot;#text&quot;</span>
    106. 

  106. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>上面代码中，<code>p</code>元素与<code>span</code>元素之间有空白字符，这导致<code>firstChild</code>返回的是文本节点。</p> <p><code>lastChild</code>属性<strong>返回当前节点的最后一个子节点</strong>，如果当前节点没有子节点，则返回<code>null</code>。用法与<code>firstChild</code>属性相同。</p> <h4 id="_1-12-node-prototype-childnodes-所有子节点-类数组对象-动态集合"><a href="#_1-12-node-prototype-childnodes-所有子节点-类数组对象-动态集合" class="header-anchor">#</a> 1.12 Node.prototype.childNodes 所有子节点，类数组对象，动态集合</h4> <p><code>childNodes</code>属性<strong>返回一个类似数组的对象</strong>（<code>NodeList</code>集合），<strong>成员包括当前节点的所有子节点</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> children <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'ul'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>childNodes<span class="token punctuation">;</span> <span class="token comment">// 包含元素节点、文本节点、注释节点</span>
    107. 

  107. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码中，<code>children</code>就是<code>ul</code>元素的所有子节点。</p> <p>使用该属性，可以遍历某个节点的所有子节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'div1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    108. 

  108. <span class="token keyword">var</span> children <span class="token operator">=</span> div<span class="token punctuation">.</span>childNodes<span class="token punctuation">;</span>
    109. 

  109. 

  110. <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> children<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    111. 

  111.   <span class="token comment">// ...</span>
    112. 

  112. <span class="token punctuation">}</span>
    113. 

  113. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>文档节点（document）就有两个子节点：文档类型节点（docType）和 HTML 根元素节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> children <span class="token operator">=</span> document<span class="token punctuation">.</span>childNodes<span class="token punctuation">;</span>
    114. 

  114. <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> children<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    115. 

  115.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>children<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>nodeType<span class="token punctuation">)</span><span class="token punctuation">;</span>
    116. 

  116. <span class="token punctuation">}</span>
    117. 

  117. <span class="token comment">// 10</span>
    118. 

  118. <span class="token comment">// 1</span>
    119. 

  119. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>上面代码中，文档节点的第一个子节点的类型是10（即文档类型节点），第二个子节点的类型是1（即元素节点）。</p> <p><strong>注意</strong>，除了元素节点，<code>childNodes</code>属性的返回值<strong>还包括文本节点和注释节点</strong>。如果当前节点不包括任何子节点，则返回一个空的<code>NodeList</code>集合。由于<code>NodeList</code>对象是一个<strong>动态集合</strong>，一旦子节点发生变化，立刻会反映在返回结果之中。</p> <h4 id="_1-13-node-prototype-isconnected-是否在文档中-布尔值"><a href="#_1-13-node-prototype-isconnected-是否在文档中-布尔值" class="header-anchor">#</a> 1.13 Node.prototype.isConnected 是否在文档中，布尔值</h4> <p><code>isConnected</code>属性<strong>返回一个布尔值，表示当前节点是否在文档之中</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> test <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    120. 

  120. test<span class="token punctuation">.</span>isConnected <span class="token comment">// false</span>
    121. 

  121. 

  122. document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>test<span class="token punctuation">)</span><span class="token punctuation">;</span>
    123. 

  123. test<span class="token punctuation">.</span>isConnected <span class="token comment">// true</span>
    124. 

  124. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面代码中，<code>test</code>节点是脚本生成的节点，没有插入文档之前，<code>isConnected</code>属性返回<code>false</code>，插入之后返回<code>true</code>。</p> <h3 id="_2、方法"><a href="#_2、方法" class="header-anchor">#</a> 2、方法</h3> <h4 id="_2-1-node-prototype-appendchild-插入子节点到最后"><a href="#_2-1-node-prototype-appendchild-插入子节点到最后" class="header-anchor">#</a> 2.1 Node.prototype.appendChild() 插入子节点到最后</h4> <p><code>appendChild()</code>方法<strong>接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点</strong>。该方法的<strong>返回值就是插入文档的子节点</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> p <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    125. 

  125. document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 有返回值，为已插入的p节点</span>
    126. 

  126. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码新建一个<code>&lt;p&gt;</code>节点，将其插入<code>document.body</code>的尾部。</p> <p>如果参数节点是 DOM 已经存在的节点，<code>appendChild()</code>方法会将其从原来的位置，移动到新位置。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myDiv'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// myDiv是已存在的元素</span>
    127. 

  127. document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>div<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 插入已存在元素，相当于移动位置</span>
    128. 

  128. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码中，插入的是一个已经存在的节点<code>myDiv</code>，结果就是该节点会从原来的位置，移动到<code>document.body</code>的尾部。</p> <p>如果<code>appendChild()</code>方法的参数是<code>DocumentFragment</code>节点，那么插入的是<code>DocumentFragment</code>的所有子节点，而不是<code>DocumentFragment</code>节点本身。返回值是一个空的<code>DocumentFragment</code>节点。</p> <h4 id="_2-2-node-prototype-haschildnodes-是否有子节点-布尔值"><a href="#_2-2-node-prototype-haschildnodes-是否有子节点-布尔值" class="header-anchor">#</a> 2.2 Node.prototype.hasChildNodes() 是否有子节点，布尔值</h4> <p><code>hasChildNodes</code>方法返回一个<strong>布尔值</strong>，<strong>表示当前节点是否有子节点</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> foo <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    129. 

  129. 

  130. <span class="token keyword">if</span> <span class="token punctuation">(</span>foo<span class="token punctuation">.</span><span class="token function">hasChildNodes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    131. 

  131.   foo<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span>childNodes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    132. 

  132. <span class="token punctuation">}</span>
    133. 

  133. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面代码表示，如果<code>foo</code>节点有子节点，就移除第一个子节点。</p> <p><strong>注意</strong>，<strong>子节点包括所有类型的节点</strong>，并不仅仅是元素节点。哪怕节点只包含一个空格，<code>hasChildNodes</code>方法也会返回<code>true</code>。</p> <p>判断一个节点有没有子节点，有许多种方法，下面是其中的三种。</p> <ul><li><code>node.hasChildNodes()</code></li> <li><code>node.firstChild !== null</code></li> <li><code>node.childNodes &amp;&amp; node.childNodes.length &gt; 0</code></li></ul> <p><code>hasChildNodes</code>方法结合<code>firstChild</code>属性和<code>nextSibling</code>属性，可以<strong>遍历当前节点的所有后代节点</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">DOMComb</span><span class="token punctuation">(</span><span class="token parameter">parent<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    134. 

  134.   <span class="token keyword">if</span> <span class="token punctuation">(</span>parent<span class="token punctuation">.</span><span class="token function">hasChildNodes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    135. 

  135.     <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> node <span class="token operator">=</span> parent<span class="token punctuation">.</span>firstChild<span class="token punctuation">;</span> node<span class="token punctuation">;</span> node <span class="token operator">=</span> node<span class="token punctuation">.</span>nextSibling<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    136. 

  136.       <span class="token function">DOMComb</span><span class="token punctuation">(</span>node<span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span>
    137. 

  137.     <span class="token punctuation">}</span>
    138. 

  138.   <span class="token punctuation">}</span>
    139. 

  139.   <span class="token function">callback</span><span class="token punctuation">(</span>parent<span class="token punctuation">)</span><span class="token punctuation">;</span>
    140. 

  140. <span class="token punctuation">}</span>
    141. 

  141. 

  142. <span class="token comment">// 用法</span>
    143. 

  143. <span class="token function">DOMComb</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> console<span class="token punctuation">.</span>log<span class="token punctuation">)</span>
    144. 

  144. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>上面代码中，<code>DOMComb</code>函数的第一个参数是某个指定的节点，第二个参数是回调函数。这个回调函数会依次作用于指定节点，以及指定节点的所有后代节点。</p> <h4 id="_2-3-node-prototype-clonenode-boolean-克隆节点"><a href="#_2-3-node-prototype-clonenode-boolean-克隆节点" class="header-anchor">#</a> 2.3 Node.prototype.cloneNode(Boolean) 克隆节点</h4> <p><code>cloneNode</code>方法用于<strong>克隆一个节点</strong>。<strong>它接受一个布尔值作为参数，表示是否同时克隆子节点</strong>。它的返回值是一个克隆出来的新节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> cloneUL <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'ul'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    145. 

  145. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>该方法有一些使用<strong>注意点</strong>。</p> <p>（1）克隆一个节点，会拷贝该节点的所有属性，但是会丧失<code>addEventListener</code>方法和<code>on-</code>属性（即<code>node.onclick = fn</code>），添加在这个节点上的事件回调函数。</p> <p>（2）该方法返回的节点不在文档之中，即没有任何父节点，必须使用诸如<code>Node.appendChild</code>这样的方法添加到文档之中。</p> <p>（3）克隆一个节点之后，DOM 有可能出现两个有相同<code>id</code>属性（即<code>id=&quot;xxx&quot;</code>）的网页元素，这时应该修改其中一个元素的<code>id</code>属性。如果原节点有<code>name</code>属性，可能也需要修改。</p> <h4 id="_2-4-node-prototype-insertbefore-插入节点到指定位置"><a href="#_2-4-node-prototype-insertbefore-插入节点到指定位置" class="header-anchor">#</a> 2.4 Node.prototype.insertBefore() 插入节点到指定位置</h4> <p><code>insertBefore</code>方法用于<strong>将某个节点插入父节点内部的指定位置</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> insertedNode <span class="token operator">=</span> parentNode<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>newNode<span class="token punctuation">,</span> referenceNode<span class="token punctuation">)</span><span class="token punctuation">;</span>
    146. 

  146. <span class="token comment">// newNode新节点将插入到parentNode内部的referenceNode节点前面，并返回新节点</span>
    147. 

  147. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><code>insertBefore</code>方法接受两个参数，第一个参数是所要插入的节点<code>newNode</code>，第二个参数是父节点<code>parentNode</code>内部的一个子节点<code>referenceNode</code>。<code>newNode</code>将插在<code>referenceNode</code>这个子节点的前面。返回值是插入的新节点<code>newNode</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> p <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    148. 

  148. document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>p<span class="token punctuation">,</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>firstChild<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 把p节点插入到body内部第一个元素的前面</span>
    149. 

  149. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码中，新建一个<code>&lt;p&gt;</code>节点，插在<code>document.body.firstChild</code>的前面，也就是成为<code>document.body</code>的第一个子节点。</p> <p>如果<code>insertBefore</code>方法的第二个参数为<code>null</code>，则新节点将插在当前节点内部的最后位置，即变成最后一个子节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> p <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    150. 

  150. document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>p<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    151. 

  151. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码中，<code>p</code>将成为<code>document.body</code>的最后一个子节点。这也说明<code>insertBefore</code>的第二个参数不能省略。</p> <p><strong>注意</strong>，如果所要插入的节点是当前 DOM 现有的节点，则该节点将从原有的位置移除，插入新的位置。</p> <p>由于不存在<code>insertAfter</code>方法，如果新节点要插在父节点的<strong>某个子节点后面</strong>，可以用<code>insertBefore</code>方法结合<code>nextSibling</code>属性模拟。</p> <p><strong>插入到某个子节点后面</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>parent<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>s1<span class="token punctuation">,</span> s2<span class="token punctuation">.</span>nextSibling<span class="token punctuation">)</span><span class="token punctuation">;</span>
    152. 

  152. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码中，<code>parent</code>是父节点，<code>s1</code>是一个全新的节点，<code>s2</code>是可以将<code>s1</code>节点，插在<code>s2</code>节点的后面。如果<code>s2</code>是当前节点的最后一个子节点，则<code>s2.nextSibling</code>返回<code>null</code>，这时<code>s1</code>节点会插在当前节点的最后，变成当前节点的最后一个子节点，等于紧跟在<code>s2</code>的后面。</p> <p>如果要插入的节点是<code>DocumentFragment</code>类型，那么插入的将是<code>DocumentFragment</code>的所有子节点，而不是<code>DocumentFragment</code>节点本身。返回值将是一个空的<code>DocumentFragment</code>节点。</p> <h4 id="_2-5-node-prototype-removechild-删除子节点-并返回"><a href="#_2-5-node-prototype-removechild-删除子节点-并返回" class="header-anchor">#</a> 2.5 Node.prototype.removeChild() 删除子节点，并返回</h4> <p><code>removeChild</code>方法<strong>接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> divA <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'A'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    153. 

  153. divA<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>divA<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 先获取父节点再调用删除子节点方法，并指定删除的子节点为divA</span>
    154. 

  154. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码移除了<code>divA</code>节点。<strong>注意，这个方法是在<code>divA</code>的父节点上调用的，不是在<code>divA</code>上调用的。</strong></p> <p>下面是如何<strong>移除当前节点的所有子节点</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'top'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    155. 

  155. <span class="token keyword">while</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>firstChild<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    156. 

  156.   element<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>element<span class="token punctuation">.</span>firstChild<span class="token punctuation">)</span><span class="token punctuation">;</span>
    157. 

  157. <span class="token punctuation">}</span>
    158. 

  158. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>被移除的节点依然存在于内存之中</strong>，但不再是 DOM 的一部分。所以，一个节点移除以后，依然可以使用它，比如插入到另一个节点下面。</p> <p>如果参数节点不是当前节点的子节点，<code>removeChild</code>方法将报错。</p> <h4 id="_2-6-node-prototype-replacechild-替换子节点-返回被替换的"><a href="#_2-6-node-prototype-replacechild-替换子节点-返回被替换的" class="header-anchor">#</a> 2.6 Node.prototype.replaceChild() 替换子节点，返回被替换的</h4> <p><code>replaceChild</code>方法<strong>用于将一个新的节点，替换当前节点的某一个子节点</strong>。<strong>返回被替换的子节点。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> replacedNode <span class="token operator">=</span> parentNode<span class="token punctuation">.</span><span class="token function">replaceChild</span><span class="token punctuation">(</span>newChild<span class="token punctuation">,</span> oldChild<span class="token punctuation">)</span><span class="token punctuation">;</span>
    159. 

  159. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码中，<code>replaceChild</code>方法接受两个参数，第一个参数<code>newChild</code>是用来替换的新节点，第二个参数<code>oldChild</code>是将要替换走的子节点。返回值是替换走的那个节点<code>oldChild</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> divA <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'divA'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    160. 

  160. <span class="token keyword">var</span> newSpan <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'span'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    161. 

  161. newSpan<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">'Hello World!'</span><span class="token punctuation">;</span>
    162. 

  162. divA<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">replaceChild</span><span class="token punctuation">(</span>newSpan<span class="token punctuation">,</span> divA<span class="token punctuation">)</span><span class="token punctuation">;</span>
    163. 

  163. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>上面代码是将指定节点<code>divA</code>替换为新节点<code>newSpan</code>。</p> <h4 id="_2-7-node-prototype-contains-参数节点是否为后代节点或当前节点-返回布尔值"><a href="#_2-7-node-prototype-contains-参数节点是否为后代节点或当前节点-返回布尔值" class="header-anchor">#</a> 2.7 Node.prototype.contains() 参数节点是否为后代节点或当前节点，返回布尔值</h4> <p><code>contains</code>方法<strong>返回一个布尔值，表示参数节点是否满足以下三个条件之一</strong>。</p> <ul><li>参数节点为当前节点。</li> <li>参数节点为当前节点的子节点。</li> <li>参数节点为当前节点的后代节点。</li></ul> <p><strong>当前节点中是否包含参数节点</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span>
    164. 

  164. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码检查参数节点<code>node</code>，是否包含在当前文档之中。</p> <p><strong>注意</strong>，当前节点传入<code>contains</code>方法，返回<code>true</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>nodeA<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span>nodeA<span class="token punctuation">)</span> <span class="token comment">// true</span>
    165. 

  165. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="_2-8-node-prototype-comparedocumentposition-和contains方法类似-返回值可算出位置关系"><a href="#_2-8-node-prototype-comparedocumentposition-和contains方法类似-返回值可算出位置关系" class="header-anchor">#</a> 2.8 Node.prototype.compareDocumentPosition() 和contains方法类似，返回值可算出位置关系</h4> <p><code>compareDocumentPosition</code>方法的用法，<strong>与<code>contains</code>方法完全一致，返回一个六个比特位的二进制值，表示参数节点与当前节点的关系</strong>。</p> <table><thead><tr><th style="text-align:left;">二进制值</th> <th style="text-align:left;">十进制值</th> <th style="text-align:left;">含义</th></tr></thead> <tbody><tr><td style="text-align:left;">000000</td> <td style="text-align:left;">0</td> <td style="text-align:left;">两个节点相同</td></tr> <tr><td style="text-align:left;">000001</td> <td style="text-align:left;">1</td> <td style="text-align:left;">两个节点不在同一个文档（即有一个节点不在当前文档）</td></tr> <tr><td style="text-align:left;">000010</td> <td style="text-align:left;">2</td> <td style="text-align:left;">参数节点在当前节点的前面</td></tr> <tr><td style="text-align:left;">000100</td> <td style="text-align:left;">4</td> <td style="text-align:left;">参数节点在当前节点的后面</td></tr> <tr><td style="text-align:left;">001000</td> <td style="text-align:left;">8</td> <td style="text-align:left;">参数节点包含当前节点</td></tr> <tr><td style="text-align:left;">010000</td> <td style="text-align:left;">16</td> <td style="text-align:left;">当前节点包含参数节点</td></tr> <tr><td style="text-align:left;">100000</td> <td style="text-align:left;">32</td> <td style="text-align:left;">浏览器内部使用</td></tr></tbody></table> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    166. 

  166. <span class="token comment">// &lt;div id=&quot;mydiv&quot;&gt;</span>
    167. 

  167. <span class="token comment">//   &lt;form&gt;&lt;input id=&quot;test&quot; /&gt;&lt;/form&gt;</span>
    168. 

  168. <span class="token comment">// &lt;/div&gt;</span>
    169. 

  169. 

  170. <span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'mydiv'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    171. 

  171. <span class="token keyword">var</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    172. 

  172. 

  173. div<span class="token punctuation">.</span><span class="token function">compareDocumentPosition</span><span class="token punctuation">(</span>input<span class="token punctuation">)</span> <span class="token comment">// 20 当前节点包含参数节点（16）+ 参数节点在当前节点的后面（4）</span>
    174. 

  174. input<span class="token punctuation">.</span><span class="token function">compareDocumentPosition</span><span class="token punctuation">(</span>div<span class="token punctuation">)</span> <span class="token comment">// 10 参数节点包含当前节点（8）+ 参数节点在当前节点的前面（2）</span>
    175. 

  175. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>上面代码中，节点<code>div</code>包含节点<code>input</code>（二进制<code>010000</code>），而且节点<code>input</code>在节点<code>div</code>的后面（二进制<code>000100</code>），所以第一个<code>compareDocumentPosition</code>方法返回<code>20</code>（二进制<code>010100</code>，即<code>010000 + 000100</code>），第二个<code>compareDocumentPosition</code>方法返回<code>10</code>（二进制<code>001010</code>）。</p> <p>由于<code>compareDocumentPosition</code>返回值的含义，定义在每一个比特位上，所以如果要检查某一种特定的含义，就需要使用比特位运算符。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> head <span class="token operator">=</span> document<span class="token punctuation">.</span>head<span class="token punctuation">;</span>
    176. 

  176. <span class="token keyword">var</span> body <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">;</span>
    177. 

  177. <span class="token keyword">if</span> <span class="token punctuation">(</span>head<span class="token punctuation">.</span><span class="token function">compareDocumentPosition</span><span class="token punctuation">(</span>body<span class="token punctuation">)</span> <span class="token operator">&amp;</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 4表示 参数节点在当前节点的后面</span>
    178. 

  178.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'文档结构正确'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    179. 

  179. <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    180. 

  180.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'&lt;body&gt; 不能在 &lt;head&gt; 前面'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    181. 

  181. <span class="token punctuation">}</span>
    182. 

  182. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>上面代码中，<code>compareDocumentPosition</code>的返回值与<code>4</code>（又称掩码）进行与运算（<code>&amp;</code>），得到一个布尔值，表示<code>是否在</code>前面。</p> <h4 id="_2-9-node-prototype-isequalnode-节点是否相等-node-prototype-issamenode-节点是否相同"><a href="#_2-9-node-prototype-isequalnode-节点是否相等-node-prototype-issamenode-节点是否相同" class="header-anchor">#</a> 2.9 Node.prototype.isEqualNode() 节点是否相等 Node.prototype.isSameNode() 节点是否相同</h4> <p><code>isEqualNode</code>方法<strong>返回一个布尔值，用于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> p1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    183. 

  183. <span class="token keyword">var</span> p2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    184. 

  184. 

  185. p1<span class="token punctuation">.</span><span class="token function">isEqualNode</span><span class="token punctuation">(</span>p2<span class="token punctuation">)</span> <span class="token comment">// true</span>
    186. 

  186. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><code>isSameNode</code>方法<strong>返回一个布尔值，表示两个节点是否为同一个节点</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> p1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    187. 

  187. <span class="token keyword">var</span> p2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    188. 

  188. 

  189. p1<span class="token punctuation">.</span><span class="token function">isSameNode</span><span class="token punctuation">(</span>p2<span class="token punctuation">)</span> <span class="token comment">// false</span>
    190. 

  190. p1<span class="token punctuation">.</span><span class="token function">isSameNode</span><span class="token punctuation">(</span>p1<span class="token punctuation">)</span> <span class="token comment">// true</span>
    191. 

  191. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="_2-10-node-prototype-normalize-将当前节点和它的后代节点-规范化"><a href="#_2-10-node-prototype-normalize-将当前节点和它的后代节点-规范化" class="header-anchor">#</a> 2.10 Node.prototype.normalize()  将当前节点和它的后代节点”规范化“</h4> <p><code>normalize</code>方法 <strong>将当前节点和它的后代节点”规范化“</strong> 。在一个&quot;规范化&quot;后的DOM树中，不存在一个空的文本节点，或者两个相邻的文本节点。</p> <p>注1：“空的文本节点”并不包括空白字符(空格，换行等)构成的文本节点。</p> <p>注2：两个以上相邻文本节点的产生原因包括：</p> <ol><li>通过脚本调用有关的DOM接口进行了文本节点的插入和分割等。</li> <li>HTML中超长的文本节点会被浏览器自动分割为多个相邻文本节点。</li></ol> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> wrapper <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;div&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    192. 

  192. 

  193. wrapper<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span><span class="token string">&quot;Part 1 &quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    194. 

  194. wrapper<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span><span class="token string">&quot;Part 2 &quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    195. 

  195. 

  196. <span class="token comment">// 这时(规范化之前),wrapper.childNodes.length === 2</span>
    197. 

  197. <span class="token comment">// wrapper.childNodes[0].textContent === &quot;Part 1 &quot;</span>
    198. 

  198. <span class="token comment">// wrapper.childNodes[1].textContent === &quot;Part 2 &quot;</span>
    199. 

  199. 

  200. wrapper<span class="token punctuation">.</span><span class="token function">normalize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    201. 

  201. <span class="token comment">// 现在(规范化之后), wrapper.childNodes.length === 1</span>
    202. 

  202. <span class="token comment">// wrapper.childNodes[0].textContent === &quot;Part 1 Part 2&quot;</span>
    203. 

  203. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>上面代码使用<code>normalize</code>方法之前，<code>wrapper</code>节点有两个毗邻的文本子节点。使用<code>normalize</code>方法之后，两个文本子节点被合并成一个。</p> <p>该方法是<code>Text.splitText</code>的逆方法，可以查看《Text 节点对象》一章，了解更多内容。</p> <h4 id="_2-11-node-prototype-getrootnode-获取根节点-document"><a href="#_2-11-node-prototype-getrootnode-获取根节点-document" class="header-anchor">#</a> 2.11 Node.prototype.getRootNode() 获取根节点（document）</h4> <p><code>getRootNode()</code>方法<strong>返回当前节点所在文档的根节点<code>document</code>，与<code>ownerDocument</code>属性的作用相同</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span><span class="token function">getRootNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> document
    204. 

  204. <span class="token comment">// true</span>
    205. 

  205. document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span><span class="token function">getRootNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>ownerDocument
    206. 

  206. <span class="token comment">// true</span>
    207. 

  207. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>该方法可用于<code>document</code>节点自身，这一点与<code>document.ownerDocument</code>不同。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token function">getRootNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// document</span>
    208. 

  208. document<span class="token punctuation">.</span>ownerDocument <span class="token comment">// null</span>
    209. 

  209. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="三、nodelist-接口-与-htmlcollection-接口-节点的集合"><a href="#三、nodelist-接口-与-htmlcollection-接口-节点的集合" class="header-anchor">#</a> 三、NodeList 接口 与 HTMLCollection 接口 （节点的集合）</h2> <p>节点都是单个对象，有时需要一种数据结构，能够容纳多个节点。DOM 提供两种<strong>节点集合</strong>，用于容纳多个节点：<code>NodeList</code>和<code>HTMLCollection</code>。</p> <p>这两种集合都属于接口规范。许多 DOM 属性和方法，返回的结果是<code>NodeList</code>实例或<code>HTMLCollection</code>实例。主要区别是，<strong><code>NodeList</code>可以包含各种类型的节点，<code>HTMLCollection</code>只能包含 HTML 元素节点</strong>。</p> <h3 id="_1、nodelist-接口-各类节点的集合"><a href="#_1、nodelist-接口-各类节点的集合" class="header-anchor">#</a> 1、NodeList 接口 （各类节点的集合）</h3> <h4 id="_1-1-概述"><a href="#_1-1-概述" class="header-anchor">#</a> 1.1 概述</h4> <p><code>NodeList</code>实例是一个<strong>类似数组的对象，它的成员是节点对象</strong>。通过以下方法可以得到<code>NodeList</code>实例。</p> <ul><li><strong><code>Node.childNodes</code> 属性</strong></li> <li><strong><code>document.querySelectorAll()</code>等节点搜索方法</strong></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>childNodes <span class="token keyword">instanceof</span> <span class="token class-name">NodeList</span> <span class="token comment">// true</span>
    210. 

  210. 

  211. <span class="token comment">/*
    212. 

  212. &lt;ul&gt;
    213. 

  213.     &lt;li&gt;&lt;/li&gt;
    214. 

  214.     &lt;li&gt;&lt;/li&gt;
    215. 

  215.     &lt;li&gt;&lt;/li&gt;
    216. 

  216. &lt;/ul&gt;*/</span>
    217. 

  217. 

  218. <span class="token keyword">var</span> $li <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    219. 

  219. console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>$li<span class="token punctuation">)</span> <span class="token comment">// NodeList(3) [li, li, li]</span>
    220. 

  220. console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>$li <span class="token keyword">instanceof</span> <span class="token class-name">NodeList</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
    221. 

  221. 

  222. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><code>NodeList</code>实例很像数组，<strong>可以使用<code>length</code>属性和<code>forEach</code>方法</strong>。但是，它不是数组，不能使用<code>pop</code>或<code>push</code>之类数组特有的方法。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> children <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>childNodes<span class="token punctuation">;</span>
    223. 

  223. 

  224. Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>children<span class="token punctuation">)</span> <span class="token comment">// false</span>
    225. 

  225. 

  226. children<span class="token punctuation">.</span>length <span class="token comment">// 34</span>
    227. 

  227. children<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">)</span>
    228. 

  228. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>上面代码中，NodeList 实例<code>children</code>不是数组，但是具有<code>length</code>属性和<code>forEach</code>方法。</p> <p>如果<code>NodeList</code>实例要使用数组方法，<strong>可以将其转为真正的数组</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> children <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>childNodes<span class="token punctuation">;</span>
    229. 

  229. <span class="token keyword">var</span> nodeArr <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>children<span class="token punctuation">)</span><span class="token punctuation">;</span>
    230. 

  230. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>除了使用<code>forEach</code>方法遍历 NodeList 实例，<strong>还可以使用<code>for</code>循环</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> children <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>childNodes<span class="token punctuation">;</span>
    231. 

  231. 

  232. <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> children<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    233. 

  233.   <span class="token keyword">var</span> item <span class="token operator">=</span> children<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
    234. 

  234. <span class="token punctuation">}</span>
    235. 

  235. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>注意，NodeList 实例<strong>可能是动态集合，也可能是静态集合</strong>。所谓动态集合就是一个活的集合，DOM 删除或新增一个相关节点，都会立刻反映在 NodeList 实例。<strong>目前，只有<code>Node.childNodes</code>返回的是一个动态集合，其他的 NodeList 都是静态集合。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> children <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>childNodes<span class="token punctuation">;</span>
    236. 

  236. children<span class="token punctuation">.</span>length <span class="token comment">// 18</span>
    237. 

  237. document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    238. 

  238. children<span class="token punctuation">.</span>length <span class="token comment">// 19</span>
    239. 

  239. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>上面代码中，文档增加一个子节点，NodeList 实例<code>children</code>的<code>length</code>属性就增加了1。</p> <h4 id="_1-2-nodelist-prototype-length"><a href="#_1-2-nodelist-prototype-length" class="header-anchor">#</a> 1.2 NodeList.prototype.length</h4> <p><code>length</code>属性返回 NodeList 实例包含的节点数量。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'xxx'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length
    240. 

  240. <span class="token comment">// 0</span>
    241. 

  241. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码中，<code>document.querySelectorAll</code>返回一个 NodeList 集合。对于那些不存在的 HTML 标签，<code>length</code>属性返回<code>0</code>。</p> <h4 id="_1-3-nodelist-prototype-foreach"><a href="#_1-3-nodelist-prototype-foreach" class="header-anchor">#</a> 1.3 NodeList.prototype.forEach()</h4> <p><code>forEach</code>方法用于遍历 NodeList 的所有成员。它接受一个回调函数作为参数，每一轮遍历就执行一次这个回调函数，用法与数组实例的<code>forEach</code>方法完全一致。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> children <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>childNodes<span class="token punctuation">;</span>
    242. 

  242. children<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">f</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> i<span class="token punctuation">,</span> list</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 参数：当前成员、当前索引、NodeList实例</span>
    243. 

  243.   <span class="token comment">// ...</span>
    244. 

  244. <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// forEach参数二： 绑定回调函数内部的this，可省略</span>
    245. 

  245. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>上面代码中，回调函数<code>f</code>的三个参数依次是<strong>当前成员、位置和当前 NodeList 实例</strong>。<code>forEach</code>方法的第二个参数，用于绑定回调函数内部的<code>this</code>，该参数可省略。</p> <h4 id="_1-4-nodelist-prototype-item-接受一个索引参数-返回该索引上的成员-节点"><a href="#_1-4-nodelist-prototype-item-接受一个索引参数-返回该索引上的成员-节点" class="header-anchor">#</a> 1.4 NodeList.prototype.item() 接受一个索引参数，返回该索引上的成员（节点）</h4> <p><code>item</code>方法<strong>接受一个整数值作为参数，表示成员的位置，返回该位置上的成员。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>childNodes<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
    246. 

  246. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码中，<code>item(0)</code>返回第一个成员。</p> <p>如果参数值大于实际长度，或者索引不合法（比如负数），<code>item</code>方法返回<code>null</code>。如果省略参数，<code>item</code>方法会报错。</p> <p>所有类似数组的对象，都可以使用方括号运算符取出成员。<strong>一般情况下，都是使用方括号运算符，而不使用<code>item</code>方法。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>childNodes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
    247. 

  247. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="_1-5-nodelist-prototype-keys-nodelist-prototype-values-nodelist-prototype-entries-遍历器对象-结合for-of遍历每一个成员的信息"><a href="#_1-5-nodelist-prototype-keys-nodelist-prototype-values-nodelist-prototype-entries-遍历器对象-结合for-of遍历每一个成员的信息" class="header-anchor">#</a> 1.5 NodeList.prototype.keys()，NodeList.prototype.values()，NodeList.prototype.entries()  遍历器对象，结合for...of遍历每一个成员的信息</h4> <p>这三个方法都返回一个 ES6 的遍历器对象，可以通过<code>for...of</code>循环遍历获取每一个成员的信息。区别在于，<code>keys()</code>返回<strong>键名</strong>的遍历器，<code>values()</code>返回<strong>键值</strong>的遍历器，<code>entries()</code>返回的遍历器<strong>同时包含键名和键值的数组</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> children <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>childNodes<span class="token punctuation">;</span>
    248. 

  248. 

  249. <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> key <span class="token keyword">of</span> children<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    250. 

  250.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回键名</span>
    251. 

  251. <span class="token punctuation">}</span>
    252. 

  252. <span class="token comment">// 0</span>
    253. 

  253. <span class="token comment">// 1</span>
    254. 

  254. <span class="token comment">// 2</span>
    255. 

  255. <span class="token comment">// ...</span>
    256. 

  256. 

  257. <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> value <span class="token keyword">of</span> children<span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    258. 

  258.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回键值 (即节点名)</span>
    259. 

  259. <span class="token punctuation">}</span>
    260. 

  260. <span class="token comment">// #text</span>
    261. 

  261. <span class="token comment">// &lt;script&gt;</span>
    262. 

  262. <span class="token comment">// ...</span>
    263. 

  263. 

  264. <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> entry <span class="token keyword">of</span> children<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    265. 

  265.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>entry<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回键名和键值的数组</span>
    266. 

  266. <span class="token punctuation">}</span>
    267. 

  267. <span class="token comment">// Array [ 0, #text ]</span>
    268. 

  268. <span class="token comment">// Array [ 1, &lt;script&gt; ]</span>
    269. 

  269. <span class="token comment">// ...</span>
    270. 

  270. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h3 id="_2、htmlcollection-接口-html元素节点的集合"><a href="#_2、htmlcollection-接口-html元素节点的集合" class="header-anchor">#</a> 2、HTMLCollection 接口 （HTML元素节点的集合）</h3> <h4 id="_2-1-概述"><a href="#_2-1-概述" class="header-anchor">#</a> 2.1 概述</h4> <p><code>HTMLCollection</code>是一个<strong>节点对象的集合，只能包含元素节点</strong>（element），不能包含其他类型的节点。它的返回值是一个<strong>类似数组的对象</strong>，但是与<code>NodeList</code>接口不同，<code>HTMLCollection</code><strong>没有<code>forEach</code>方法，只能使用<code>for</code>循环遍历。</strong></p> <p>返回<code>HTMLCollection</code>实例的，主要是一些<code>Document</code>对象的集合属性，比如<code>document.links</code>、<code>document.forms</code>、<code>document.images</code>等。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>links <span class="token keyword">instanceof</span> <span class="token class-name">HTMLCollection</span> <span class="token comment">// true</span>
    271. 

  271. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><code>HTMLCollection</code>实例都是<strong>动态集合</strong>，节点的变化会实时反映在集合中。</p> <p>如果元素节点有<code>id</code>或<code>name</code>属性，那么<code>HTMLCollection</code>实例上面，可以使用<code>id</code>属性或<code>name</code>属性引用该节点元素。如果没有对应的节点，则返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    272. 

  272. <span class="token comment">// &lt;img id=&quot;pic&quot; src=&quot;http://example.com/foo.jpg&quot;&gt;</span>
    273. 

  273. 

  274. <span class="token keyword">var</span> pic <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'pic'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    275. 

  275. document<span class="token punctuation">.</span>images<span class="token punctuation">.</span>pic <span class="token operator">===</span> pic <span class="token comment">// true</span>
    276. 

  276. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面代码中，<code>document.images</code>是一个<code>HTMLCollection</code>实例，可以通过<code>&lt;img&gt;</code>元素的<code>id</code>属性值，从<code>HTMLCollection</code>实例上取到这个元素。</p> <h6 id="各js选择器返回的数据对比"><a href="#各js选择器返回的数据对比" class="header-anchor">#</a> 各js选择器返回的数据对比</h6> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    277. 

  277.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>li1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    278. 

  278.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>li2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    279. 

  279.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>liName<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    280. 

  280.  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    281. 

  281. 

  282. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    283. 

  283.     <span class="token keyword">var</span> li1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'li1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    284. 

  284.     <span class="token keyword">var</span> li2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#li1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    285. 

  285. 

  286.     <span class="token keyword">var</span> li3 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">'li2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    287. 

  287.     <span class="token keyword">var</span> li4 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    288. 

  288. 

  289.     <span class="token keyword">var</span> li5 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByName</span><span class="token punctuation">(</span><span class="token string">'liName'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    290. 

  290.     <span class="token keyword">var</span> li6 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    291. 

  291. 

  292.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>li1<span class="token punctuation">)</span> <span class="token comment">// &lt;li id=&quot;li1&quot;&gt;&lt;/li&gt;</span>
    293. 

  293.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>li2<span class="token punctuation">)</span> <span class="token comment">// &lt;li id=&quot;li1&quot;&gt;&lt;/li&gt;</span>
    294. 

  294. 

  295.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>li3<span class="token punctuation">)</span> <span class="token comment">// HTMLCollection [li.li2]</span>
    296. 

  296.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>li4<span class="token punctuation">)</span> <span class="token comment">// HTMLCollection(3) [li#li1, li.li2, li, li1: li#li1, liName: li]</span>
    297. 

  297. 

  298.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>li5<span class="token punctuation">)</span> <span class="token comment">// NodeList [li]</span>
    299. 

  299.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>li6<span class="token punctuation">)</span> <span class="token comment">// NodeList(3) [li#li1, li.li2, li]</span>
    300. 

  300. 

  301. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    302. 

  302. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h4 id="_2-2-htmlcollection-prototype-length"><a href="#_2-2-htmlcollection-prototype-length" class="header-anchor">#</a> 2.2 HTMLCollection.prototype.length</h4> <p><code>length</code>属性返回<code>HTMLCollection</code>实例包含的成员数量。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>links<span class="token punctuation">.</span>length <span class="token comment">// 18</span>
    303. 

  303. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="_2-3-htmlcollection-prototype-item-和方括号访问一样"><a href="#_2-3-htmlcollection-prototype-item-和方括号访问一样" class="header-anchor">#</a> 2.3 HTMLCollection.prototype.item() 和方括号访问一样</h4> <p><code>item</code>方法接受一个整数值作为参数，表示成员的位置，返回该位置上的成员。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> c <span class="token operator">=</span> document<span class="token punctuation">.</span>images<span class="token punctuation">;</span>
    304. 

  304. <span class="token keyword">var</span> img0 <span class="token operator">=</span> c<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    305. 

  305. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码中，<code>item(0)</code>表示返回0号位置的成员。由于方<strong>括号运算符也具有同样作用，而且使用更方便，所以一般情况下，总是使用方括号运算符</strong>。</p> <p>如果参数值超出成员数量或者不合法（比如小于0），那么<code>item</code>方法返回<code>null</code>。</p> <h4 id="_2-4-htmlcollection-prototype-nameditem-参数为id或name-返回元素节点"><a href="#_2-4-htmlcollection-prototype-nameditem-参数为id或name-返回元素节点" class="header-anchor">#</a> 2.4 HTMLCollection.prototype.namedItem() 参数为id或name，返回元素节点</h4> <p><code>namedItem</code>方法的<strong>参数是一个字符串，表示<code>id</code>属性或<code>name</code>属性的值，返回对应的元素节点</strong>。如果没有对应的节点，则返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    306. 

  306. <span class="token comment">// &lt;img id=&quot;pic&quot; src=&quot;http://example.com/foo.jpg&quot;&gt;</span>
    307. 

  307. 

  308. <span class="token keyword">var</span> pic <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'pic'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    309. 

  309. document<span class="token punctuation">.</span>images<span class="token punctuation">.</span><span class="token function">namedItem</span><span class="token punctuation">(</span><span class="token string">'pic'</span><span class="token punctuation">)</span> <span class="token operator">===</span> pic <span class="token comment">// true</span>
    310. 

  310. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="四、parentnode-接口-父节点接口-childnode-接口-子节点接口"><a href="#四、parentnode-接口-父节点接口-childnode-接口-子节点接口" class="header-anchor">#</a> 四、ParentNode 接口（父节点接口），ChildNode 接口（子节点接口）</h2> <p>节点对象除了继承 Node 接口以外，还会继承其他接口。<code>ParentNode</code>接口<strong>表示当前节点是一个父节点，提供一些处理子节点的方法</strong>。<code>ChildNode</code>接口<strong>表示当前节点是一个子节点，提供一些相关方法。</strong></p> <h3 id="_1、parentnode-接口"><a href="#_1、parentnode-接口" class="header-anchor">#</a> 1、ParentNode 接口</h3> <p><strong>如果当前节点是父节点，就会继承<code>ParentNode</code>接口</strong>。由于只有<strong>元素节点</strong>（element）、<strong>文档节点</strong>（document）和<strong>文档片段节点</strong>（documentFragment）拥有子节点，因此只有这三类节点会继承<code>ParentNode</code>接口。</p> <h4 id="_1-1-属性"><a href="#_1-1-属性" class="header-anchor">#</a> 1.1 属性</h4> <h4 id="_1-parentnode-children-返回htmlcollection实例-当前节点的所有元素子节点"><a href="#_1-parentnode-children-返回htmlcollection实例-当前节点的所有元素子节点" class="header-anchor">#</a> （1）ParentNode.children  （返回HTMLCollection实例，当前节点的所有元素子节点）</h4> <p><code>children</code>属性<strong>返回一个<code>HTMLCollection</code>实例，成员是当前节点的所有元素子节点</strong>。该属性<strong>只读</strong>。</p> <p>下面是遍历某个节点的所有元素子节点的示例。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> el<span class="token punctuation">.</span>children<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    311. 

  311.   <span class="token comment">// ...</span>
    312. 

  312. <span class="token punctuation">}</span>
    313. 

  313. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>注意，<code>children</code>属性<strong>只包括元素子节点</strong>，不包括其他类型的子节点（比如文本子节点）。如果没有元素类型的子节点，返回值<code>HTMLCollection</code>实例的<code>length</code>属性为<code>0</code>。</p> <p>另外，<code>HTMLCollection</code>是动态集合，会实时反映 DOM 的任何变化。</p> <h4 id="_2-parentnode-firstelementchild-第一个元素子节点"><a href="#_2-parentnode-firstelementchild-第一个元素子节点" class="header-anchor">#</a> （2）ParentNode.firstElementChild 第一个元素子节点</h4> <p><code>firstElementChild</code>属性<strong>返回当前节点的第一个元素子节点</strong>。如果没有任何元素子节点，则返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>firstElementChild<span class="token punctuation">.</span>nodeName
    314. 

  314. <span class="token comment">// &quot;HTML&quot;</span>
    315. 

  315. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码中，<code>document</code>节点的第一个元素子节点是``。</p> <h4 id="_3-parentnode-lastelementchild-最后一个元素子节点"><a href="#_3-parentnode-lastelementchild-最后一个元素子节点" class="header-anchor">#</a> （3）ParentNode.lastElementChild 最后一个元素子节点</h4> <p><code>lastElementChild</code>属性<strong>返回当前节点的最后一个元素子节点</strong>，如果不存在任何元素子节点，则返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>lastElementChild<span class="token punctuation">.</span>nodeName
    316. 

  316. <span class="token comment">// &quot;HTML&quot;</span>
    317. 

  317. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码中，<code>document</code>节点的最后一个元素子节点是``（因为<code>document</code>只包含这一个元素子节点）。</p> <h4 id="_4-parentnode-childelementcount-所有元素子节点的数量"><a href="#_4-parentnode-childelementcount-所有元素子节点的数量" class="header-anchor">#</a> （4）ParentNode.childElementCount 所有元素子节点的数量</h4> <p><code>childElementCount</code>属性<strong>返回一个整数，表示当前节点的所有元素子节点的数目</strong>。如果不包含任何元素子节点，则返回<code>0</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>childElementCount <span class="token comment">// 13</span>
    318. 

  318. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="_1-2-方法"><a href="#_1-2-方法" class="header-anchor">#</a> 1.2 方法</h4> <h5 id="parentnode-append-插入子节点于后-parentnode-prepend-插入子节点于前"><a href="#parentnode-append-插入子节点于后-parentnode-prepend-插入子节点于前" class="header-anchor">#</a> ParentNode.append() 插入子节点于后，ParentNode.prepend()  插入子节点于前</h5> <p><code>append</code>方法<strong>为当前节点追加一个或多个子节点，位置是最后一个元素子节点的后面</strong>。</p> <p>该方法不仅可以添加元素子节点，还可以添加文本子节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> parent <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">;</span>
    319. 

  319. 

  320. <span class="token comment">// 添加元素子节点</span>
    321. 

  321. <span class="token keyword">var</span> p <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    322. 

  322. parent<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span>
    323. 

  323. 

  324. <span class="token comment">// 添加文本子节点</span>
    325. 

  325. parent<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    326. 

  326. 

  327. <span class="token comment">// 添加多个元素子节点</span>
    328. 

  328. <span class="token keyword">var</span> p1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    329. 

  329. <span class="token keyword">var</span> p2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    330. 

  330. parent<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>p1<span class="token punctuation">,</span> p2<span class="token punctuation">)</span><span class="token punctuation">;</span>
    331. 

  331. 

  332. <span class="token comment">// 添加元素子节点和文本子节点</span>
    333. 

  333. <span class="token keyword">var</span> p <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    334. 

  334. parent<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">,</span> p<span class="token punctuation">)</span><span class="token punctuation">;</span>
    335. 

  335. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>注意，该方法<strong>没有返回值</strong>。</p> <p><code>prepend</code>方法为<strong>当前节点追加一个或多个子节点，位置是第一个元素子节点的前面</strong>。它的用法与<code>append</code>方法完全一致，也是<strong>没有返回值</strong>。</p> <h3 id="_2、childnode-接口"><a href="#_2、childnode-接口" class="header-anchor">#</a> 2、ChildNode 接口</h3> <p><strong>如果一个节点有父节点，那么该节点就继承了<code>ChildNode</code>接口。</strong></p> <h4 id="_2-1-childnode-remove-移除当前节点"><a href="#_2-1-childnode-remove-移除当前节点" class="header-anchor">#</a> 2.1 ChildNode.remove() 移除当前节点</h4> <p><code>remove</code>方法用于从父节点<strong>移除当前节点</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>el<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    336. 

  336. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码在 DOM 里面移除了<code>el</code>节点。</p> <h4 id="_2-2-childnode-before-插入同级节点于前-childnode-after-插入同级节点于后"><a href="#_2-2-childnode-before-插入同级节点于前-childnode-after-插入同级节点于后" class="header-anchor">#</a> 2.2 ChildNode.before() 插入同级节点于前，ChildNode.after() 插入同级节点于后</h4> <p><code>before</code>方法用于<strong>在当前节点的前面，插入一个或多个同级节点</strong>。两者拥有相同的父节点。</p> <p>注意，该方法不仅可以插入元素节点，还可以插入文本节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> p <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    337. 

  337. <span class="token keyword">var</span> p1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    338. 

  338. 

  339. <span class="token comment">// 插入元素节点</span>
    340. 

  340. el<span class="token punctuation">.</span><span class="token function">before</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span>
    341. 

  341. 

  342. <span class="token comment">// 插入文本节点</span>
    343. 

  343. el<span class="token punctuation">.</span><span class="token function">before</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    344. 

  344. 

  345. <span class="token comment">// 插入多个元素节点</span>
    346. 

  346. el<span class="token punctuation">.</span><span class="token function">before</span><span class="token punctuation">(</span>p<span class="token punctuation">,</span> p1<span class="token punctuation">)</span><span class="token punctuation">;</span>
    347. 

  347. 

  348. <span class="token comment">// 插入元素节点和文本节点</span>
    349. 

  349. el<span class="token punctuation">.</span><span class="token function">before</span><span class="token punctuation">(</span>p<span class="token punctuation">,</span> <span class="token string">'Hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    350. 

  350. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p><code>after</code>方法用于<strong>在当前节点的后面，插入一个或多个同级节点</strong>，两者拥有相同的父节点。用法与<code>before</code>方法完全相同。</p> <h4 id="_2-3-childnode-replacewith-用参数节点替换当前节点"><a href="#_2-3-childnode-replacewith-用参数节点替换当前节点" class="header-anchor">#</a> 2.3 ChildNode.replaceWith() 用参数节点替换当前节点</h4> <p><code>replaceWith</code>方法**使用参数节点，替换当前节点。**参数可以是元素节点，也可以是文本节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> span <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'span'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    351. 

  351. el<span class="token punctuation">.</span><span class="token function">replaceWith</span><span class="token punctuation">(</span>span<span class="token punctuation">)</span><span class="token punctuation">;</span>
    352. 

  352. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码中，<code>el</code>节点将被<code>span</code>节点替换。</p> <h2 id="五、document节点"><a href="#五、document节点" class="header-anchor">#</a> 五、Document节点</h2> <h3 id="_1、概述"><a href="#_1、概述" class="header-anchor">#</a> 1、概述</h3> <p><code>document</code>节点对象<strong>代表整个文档</strong>，每张网页都有自己的<code>document</code>对象。<code>window.document</code>属性就指向这个对象。只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。</p> <p><code>document</code>对象有不同的办法可以获取。</p> <ul><li>正常的网页，直接使用<code>document</code>或<code>window.document</code>。</li> <li><code>iframe</code>框架里面的网页，使用<code>iframe</code>节点的<code>contentDocument</code>属性。</li> <li>Ajax 操作返回的文档，使用<code>XMLHttpRequest</code>对象的<code>responseXML</code>属性。</li> <li>内部节点的<code>ownerDocument</code>属性。</li></ul> <p><code>document</code>对象<strong>继承了<code>EventTarget</code>接口、<code>Node</code>接口、<code>ParentNode</code>接口</strong>。这意味着，这些接口的方法都可以在<code>document</code>对象上调用。除此之外，<code>document</code>对象还有很多自己的属性和方法。</p> <h3 id="_2、属性"><a href="#_2、属性" class="header-anchor">#</a> 2、属性</h3> <h4 id="_2-1-快捷方式属性-指向文档内部某个节点的快捷方式"><a href="#_2-1-快捷方式属性-指向文档内部某个节点的快捷方式" class="header-anchor">#</a> 2.1 快捷方式属性 （指向文档内部某个节点的快捷方式）</h4> <p><strong>以下属性是指向文档内部的某个节点的快捷方式。</strong></p> <h5 id="_1-document-defaultview-返回window对象"><a href="#_1-document-defaultview-返回window对象" class="header-anchor">#</a> （1）document.defaultView  返回window对象</h5> <p><code>document.defaultView</code>属性<strong>返回<code>document</code>对象所属的<code>window</code>对象</strong>。如果当前文档不属于<code>window</code>对象，该属性返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>defaultView <span class="token operator">===</span> window <span class="token comment">// true</span>
    353. 

  353. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h5 id="_2-document-doctype-指向-doctype-html"><a href="#_2-document-doctype-指向-doctype-html" class="header-anchor">#</a> （2）document.doctype 指向<code>&lt;!DOCTYPE html&gt;</code></h5> <p>对于 HTML 文档来说，<code>document</code>对象<strong>一般有两个子节点</strong>。第一个子节点是<code>document.doctype</code>，指向<code>&lt;DOCTYPE&gt;</code>节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成<code>&lt;!DOCTYPE html&gt;</code>。如果网页没有声明 DTD，该属性返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> doctype <span class="token operator">=</span> document<span class="token punctuation">.</span>doctype<span class="token punctuation">;</span>
    354. 

  354. doctype <span class="token comment">// &quot;&lt;!DOCTYPE html&gt;&quot;</span>
    355. 

  355. doctype<span class="token punctuation">.</span>name <span class="token comment">// &quot;html&quot;</span>
    356. 

  356. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><code>document.firstChild</code>通常就返回这个节点。</p> <h5 id="_3-document-documentelement-返回当前文档的根元素节点-即-html-节点"><a href="#_3-document-documentelement-返回当前文档的根元素节点-即-html-节点" class="header-anchor">#</a> （3）document.documentElement 返回当前文档的根元素节点，即&lt;html&gt;节点</h5> <p><code>document.documentElement</code>属性<strong>返回当前文档的根元素节点</strong>（root）。它通常是<code>document</code>节点的第二个子节点，紧跟在<code>document.doctype</code>节点后面。HTML网页的该属性，一般是<code>&lt;html&gt;</code>节点。</p> <h5 id="_4-document-body-指向-body-document-head-指向-head"><a href="#_4-document-body-指向-body-document-head-指向-head" class="header-anchor">#</a> （4）document.body 指向&lt;body&gt;，document.head 指向 &lt;head&gt;</h5> <p><code>document.body</code>属性指向<code>&lt;body&gt;</code>节点，<code>document.head</code>属性指向<code>&lt;head&gt;</code>节点。</p> <p>这两个属性<strong>总是存在的</strong>，如果网页源码里面省略了<code>&lt;head&gt;</code>或<code>&lt;body&gt;</code>，浏览器会自动创建。另外，这两个属性是<strong>可写的</strong>，如果改写它们的值，相当于移除所有子节点。</p> <h5 id="_5-document-scrollingelement-返回文档的滚动元素-标准模式-html-兼容模式-body"><a href="#_5-document-scrollingelement-返回文档的滚动元素-标准模式-html-兼容模式-body" class="header-anchor">#</a> （5）document.scrollingElement 返回文档的滚动元素（标准模式&lt;html&gt;,兼容模式&lt;body&gt;）</h5> <p><code>document.scrollingElement</code>属性<strong>返回文档的滚动元素</strong>。也就是说，当文档整体滚动时，到底是哪个元素在滚动。</p> <p><strong>标准模式下</strong>，这个属性<strong>返回的文档的根元素<code>document.documentElement</code>（即<code>&lt;html&gt;</code>）</strong>。</p> <p><strong>兼容（quirk）模式下</strong>，<strong>返回的是<code>&lt;body&gt;</code>元素</strong>，如果该元素不存在，返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 页面滚动到浏览器顶部</span>
    357. 

  357. document<span class="token punctuation">.</span>scrollingElement<span class="token punctuation">.</span>scrollTop <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    358. 

  358. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h5 id="_6-document-activeelement-返回文档中获取焦点的元素-一般为表单元素-如没有则返回-body-或null"><a href="#_6-document-activeelement-返回文档中获取焦点的元素-一般为表单元素-如没有则返回-body-或null" class="header-anchor">#</a> （6）document.activeElement 返回文档中获取焦点的元素，一般为表单元素，如没有则返回&lt;body&gt;或null</h5> <p><code>document.activeElement</code>属性<strong>返回获得当前焦点（focus）的 DOM 元素</strong>。通常，这个属性返回的是<code>&lt;input&gt;</code>、<code>&lt;textarea&gt;</code>、<code>&lt;select&gt;</code>等表单元素，如果当前没有焦点元素，返回<code>&lt;body&gt;</code>元素或<code>null</code>。</p> <h5 id="_7-document-fullscreenelement-返回当前以全屏状态展示的-dom-元素"><a href="#_7-document-fullscreenelement-返回当前以全屏状态展示的-dom-元素" class="header-anchor">#</a> （7）document.fullscreenElement 返回当前以全屏状态展示的 DOM 元素</h5> <p><code>document.fullscreenElement</code>属性<strong>返回当前以全屏状态展示的 DOM 元素</strong>。如果不是全屏状态，该属性返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>fullscreenElement<span class="token punctuation">.</span>nodeName <span class="token operator">==</span> <span class="token string">'VIDEO'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    359. 

  359.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'全屏播放视频'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    360. 

  360. <span class="token punctuation">}</span>
    361. 

  361. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码中，通过<code>document.fullscreenElement</code>可以知道<code>&lt;video&gt;</code>元素有没有处在全屏状态，从而判断用户行为。</p> <h4 id="_2-2-节点集合属性-文档内部特定元素的集合-返htmlcollection实例"><a href="#_2-2-节点集合属性-文档内部特定元素的集合-返htmlcollection实例" class="header-anchor">#</a> 2.2 节点集合属性 （文档内部特定元素的集合，返HTMLCollection实例）</h4> <p>以下属性<strong>返回一个<code>HTMLCollection</code>实例</strong>，表示文档内部特定元素的集合。这些集合都是<strong>动态的</strong>，原节点有任何变化，立刻会反映在集合中。</p> <h5 id="_1-document-links-返回所有含href属性的-a-和-area"><a href="#_1-document-links-返回所有含href属性的-a-和-area" class="header-anchor">#</a> （1）document.links 返回所有含href属性的&lt;a&gt;和&lt;area&gt;</h5> <p><code>document.links</code>属性<strong>返回当前文档所有设定了<code>href</code>属性的<code>&lt;a&gt;</code>及<code>&lt;area&gt;</code>节点。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 打印文档所有的链接</span>
    362. 

  362. <span class="token keyword">var</span> links <span class="token operator">=</span> document<span class="token punctuation">.</span>links<span class="token punctuation">;</span>
    363. 

  363. <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> links<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    364. 

  364.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>links<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    365. 

  365. <span class="token punctuation">}</span>
    366. 

  366. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h5 id="_2-document-forms-返回所有-form-表单节点"><a href="#_2-document-forms-返回所有-form-表单节点" class="header-anchor">#</a> （2）document.forms 返回所有&lt;form&gt; 表单节点</h5> <p><code>document.forms</code>属性<strong>返回所有<code>&lt;form&gt;</code>表单节点</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> selectForm <span class="token operator">=</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    367. 

  367. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码获取文档第一个表单。</p> <p>除了使用位置序号，<code>id</code>属性和<code>name</code>属性也可以用来引用表单。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* HTML 代码如下
    368. 

  368.   &lt;form name=&quot;foo&quot; id=&quot;bar&quot;&gt;&lt;/form&gt;
    369. 

  369. */</span>
    370. 

  370. document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">===</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>foo <span class="token comment">// true</span>
    371. 

  371. document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>bar <span class="token operator">===</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>foo <span class="token comment">// true</span>
    372. 

  372. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h5 id="_3-document-images-返回页面所有-img-图片节点"><a href="#_3-document-images-返回页面所有-img-图片节点" class="header-anchor">#</a> （3）document.images 返回页面所有<code>&lt;img&gt;</code>图片节点</h5> <p><code>document.images</code>属性<strong>返回页面所有<code>&lt;img&gt;</code>图片节点</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> imglist <span class="token operator">=</span> document<span class="token punctuation">.</span>images<span class="token punctuation">;</span>
    373. 

  373. 

  374. <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> imglist<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    375. 

  375.   <span class="token keyword">if</span> <span class="token punctuation">(</span>imglist<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>src <span class="token operator">===</span> <span class="token string">'banner.gif'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    376. 

  376.     <span class="token comment">// ...</span>
    377. 

  377.   <span class="token punctuation">}</span>
    378. 

  378. <span class="token punctuation">}</span>
    379. 

  379. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>上面代码在所有<code>img</code>标签中，寻找某张图片。</p> <h5 id="_4-document-embeds-document-plugins-返回所有-embed-嵌入节点"><a href="#_4-document-embeds-document-plugins-返回所有-embed-嵌入节点" class="header-anchor">#</a> （4）document.embeds，document.plugins 返回所有<code>&lt;embed&gt;</code>嵌入节点</h5> <p><code>document.embeds</code>属性和<code>document.plugins</code>属性，都<strong>返回所有<code>&lt;embed&gt;</code>节点</strong>。</p> <h5 id="_5-document-scripts-返回所有-script-节点"><a href="#_5-document-scripts-返回所有-script-节点" class="header-anchor">#</a> （5）document.scripts  返回所有<code>&lt;script&gt;</code>节点</h5> <p><code>document.scripts</code>属性<strong>返回所有<code>&lt;script&gt;</code>节点</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> scripts <span class="token operator">=</span> document<span class="token punctuation">.</span>scripts<span class="token punctuation">;</span>
    380. 

  380. <span class="token keyword">if</span> <span class="token punctuation">(</span>scripts<span class="token punctuation">.</span>length <span class="token operator">!==</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    381. 

  381.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'当前网页有脚本'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    382. 

  382. <span class="token punctuation">}</span>
    383. 

  383. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h5 id="_6-document-stylesheets-返回文档内嵌或引入的样式表集合"><a href="#_6-document-stylesheets-返回文档内嵌或引入的样式表集合" class="header-anchor">#</a> （6）document.styleSheets 返回文档内嵌或引入的样式表集合</h5> <p><code>document.styleSheets</code>属性<strong>返回文档内嵌或引入的样式表集合</strong>，详细介绍请看《CSS 操作》一章。</p> <h5 id="_7-小结-除了stylesheets属性-其他返回都是htmlcollection实例"><a href="#_7-小结-除了stylesheets属性-其他返回都是htmlcollection实例" class="header-anchor">#</a> （7）小结（除了styleSheets属性，其他返回都是HTMLCollection实例）</h5> <p>除了<code>document.styleSheets</code>，以上的集合属性返回的都是<code>HTMLCollection</code>实例。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>links <span class="token keyword">instanceof</span> <span class="token class-name">HTMLCollection</span> <span class="token comment">// true</span>
    384. 

  384. document<span class="token punctuation">.</span>images <span class="token keyword">instanceof</span> <span class="token class-name">HTMLCollection</span> <span class="token comment">// true</span>
    385. 

  385. document<span class="token punctuation">.</span>forms <span class="token keyword">instanceof</span> <span class="token class-name">HTMLCollection</span> <span class="token comment">// true</span>
    386. 

  386. document<span class="token punctuation">.</span>embeds <span class="token keyword">instanceof</span> <span class="token class-name">HTMLCollection</span> <span class="token comment">// true</span>
    387. 

  387. document<span class="token punctuation">.</span>scripts <span class="token keyword">instanceof</span> <span class="token class-name">HTMLCollection</span> <span class="token comment">// true</span>
    388. 

  388. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><code>HTMLCollection</code>实例是<strong>类似数组的对象</strong>，所以这些属性都有<code>length</code>属性，<strong>都可以使用方括号运算符引用成员</strong>。如果成员有<code>id</code>或<code>name</code>属性，还可以用这两个属性的值，在<code>HTMLCollection</code>实例上引用到这个成员。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    389. 

  389. <span class="token comment">// &lt;form name=&quot;myForm&quot;&gt;</span>
    390. 

  390. document<span class="token punctuation">.</span>myForm <span class="token operator">===</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>myForm <span class="token comment">// true</span>
    391. 

  391. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h4 id="_2-3-文档静态信息属性"><a href="#_2-3-文档静态信息属性" class="header-anchor">#</a> 2.3 文档静态信息属性</h4> <p>以下属性<strong>返回文档信息</strong>。</p> <h5 id="_1-document-documenturi-document-url-返回网址字符串"><a href="#_1-document-documenturi-document-url-返回网址字符串" class="header-anchor">#</a> （1）document.documentURI，document.URL 返回网址字符串</h5> <p><code>document.documentURI</code>属性和<code>document.URL</code>属性都<strong>返回一个字符串，表示当前文档的网址</strong>。不同之处是它们继承自不同的接口，<code>documentURI</code>继承自<code>Document</code>接口，可用于所有文档；<code>URL</code>继承自<code>HTMLDocument</code>接口，只能用于 HTML 文档。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token constant">URL</span>
    392. 

  392. <span class="token comment">// http://www.example.com/about</span>
    393. 

  393. 

  394. document<span class="token punctuation">.</span>documentURI <span class="token operator">===</span> document<span class="token punctuation">.</span><span class="token constant">URL</span>
    395. 

  395. <span class="token comment">// true</span>
    396. 

  396. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>如果<strong>文档的锚点（<code>#anchor</code>）变化，这两个属性都会跟着变化</strong>。</p> <h5 id="_2-document-domain-返回域名"><a href="#_2-document-domain-返回域名" class="header-anchor">#</a> （2）document.domain 返回域名</h5> <p><code>document.domain</code>属性<strong>返回当前文档的域名，不包含协议和端口</strong>。比如，网页的网址是<code>http://www.example.com:80/hello.html</code>，那么<code>document.domain</code>属性就等于<code>www.example.com</code>。如果无法获取域名，该属性返回<code>null</code>。</p> <p><code>document.domain</code>基本上是一个只读属性，只有一种情况除外。次级域名的网页，可以把<code>document.domain</code>设为对应的上级域名。比如，当前域名是<code>a.sub.example.com</code>，则<code>document.domain</code>属性可以设置为<code>sub.example.com</code>，也可以设为<code>example.com</code>。修改后，<code>document.domain</code>相同的两个网页，可以读取对方的资源，比如设置的 Cookie。</p> <p>另外，设置<code>document.domain</code>会导致端口被改成<code>null</code>。因此，如果通过设置<code>document.domain</code>来进行通信，双方网页都必须设置这个值，才能保证端口相同。</p> <h5 id="_3-document-location-提供-url-相关的信息和操作方法"><a href="#_3-document-location-提供-url-相关的信息和操作方法" class="header-anchor">#</a> （3）document.location 提供 URL 相关的信息和操作方法</h5> <p><code>Location</code>对象是浏览器提供的原生对象，提供 URL 相关的信息和操作方法。通过<code>window.location</code>和<code>document.location</code>属性，可以拿到这个对象。</p> <p>关于这个对象的详细介绍，请看《浏览器模型》部分的《Location 对象》章节。</p> <h5 id="_4-document-lastmodified-返回当前文档最后修改的时间"><a href="#_4-document-lastmodified-返回当前文档最后修改的时间" class="header-anchor">#</a> （4）document.lastModified  返回当前文档最后修改的时间</h5> <p><code>document.lastModified</code>属性返回一个<strong>字符串</strong>，表示<strong>当前文档最后修改的时间</strong>。不同浏览器的返回值，日期格式是不一样的。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>lastModified
    397. 

  397. <span class="token comment">// &quot;03/07/2018 11:18:27&quot;</span>
    398. 

  398. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>注意，<code>document.lastModified</code>属性的值是字符串，所以不能直接用来比较。<code>Date.parse</code>方法将其转为<code>Date</code>实例，才能比较两个网页。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> lastVisitedDate <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token string">'01/01/2018'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    399. 

  399. <span class="token keyword">if</span> <span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>lastModified<span class="token punctuation">)</span> <span class="token operator">&gt;</span> lastVisitedDate<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    400. 

  400.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'网页已经变更'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    401. 

  401. <span class="token punctuation">}</span>
    402. 

  402. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>如果页面上有 JavaScript 生成的内容，<code>document.lastModified</code>属性返回的总是当前时间。</p> <h5 id="_5-document-title-返回当前文档的标题"><a href="#_5-document-title-返回当前文档的标题" class="header-anchor">#</a> （5）document.title  返回当前文档的标题</h5> <p><code>document.title</code>属性<strong>返回当前文档的标题</strong>。默认情况下，返回<code>&lt;title&gt;</code>节点的值。但是该属性是可写的，一旦被修改，就返回修改后的值。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'新标题'</span><span class="token punctuation">;</span>
    403. 

  403. document<span class="token punctuation">.</span>title <span class="token comment">// &quot;新标题&quot;</span>
    404. 

  404. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h5 id="_6-document-characterset-返回当前文档的编码-如utf-8等"><a href="#_6-document-characterset-返回当前文档的编码-如utf-8等" class="header-anchor">#</a> （6）document.characterSet 返回当前文档的编码，如UTF-8等</h5> <p><code>document.characterSet</code>属性<strong>返回当前文档的编码</strong>，比如<code>UTF-8</code>、<code>ISO-8859-1</code>等等。</p> <h5 id="_7-document-referrer-当前文档的访问者来自哪里-如通过百度进入的"><a href="#_7-document-referrer-当前文档的访问者来自哪里-如通过百度进入的" class="header-anchor">#</a> （7）document.referrer 当前文档的访问者来自哪里（如通过百度进入的）</h5> <p><code>document.referrer</code>属性<strong>返回一个字符串，表示当前文档的访问者来自哪里</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>referrer
    405. 

  405. <span class="token comment">// &quot;https://example.com/path&quot;</span>
    406. 

  406. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>如果无法获取来源，或者用户直接键入网址而不是从其他网页点击进入，<code>document.referrer</code>返回一个空字符串。</p> <p><code>document.referrer</code>的值，总是与 HTTP 头信息的<code>Referer</code>字段保持一致。但是，<code>document.referrer</code>的拼写有两个<code>r</code>，而头信息的<code>Referer</code>字段只有一个<code>r</code>。</p> <h5 id="_8-document-dir-返回文字方向-rtl从右到左-ltr从左到右"><a href="#_8-document-dir-返回文字方向-rtl从右到左-ltr从左到右" class="header-anchor">#</a> （8）document.dir 返回文字方向（rtl从右到左，ltr从左到右）</h5> <p><code>document.dir</code>返回<strong>一个字符串，表示文字方向</strong>。它<strong>只有两个可能</strong>的值：<code>rtl</code>表示文字从右到左，阿拉伯文是这种方式；<code>ltr</code>表示文字从左到右，包括英语和汉语在内的大多数文字采用这种方式。</p> <blockquote><p>注： 第一次调用该属性时，可能返回空字符串&quot;&quot;</p></blockquote> <h5 id="_9-document-compatmode-返回浏览器处理文档的模式-向后兼容与严格模式"><a href="#_9-document-compatmode-返回浏览器处理文档的模式-向后兼容与严格模式" class="header-anchor">#</a> （9）document.compatMode 返回浏览器处理文档的模式（向后兼容与严格模式）</h5> <p><code>compatMode</code>属性返回浏览器处理文档的模式，可能的值为<code>BackCompat</code>（向后兼容模式）和<code>CSS1Compat</code>（严格模式）。</p> <p>一般来说，如果网页代码的第一行设置了明确的<code>DOCTYPE</code>（比如``），<code>document.compatMode</code>的值都为<code>CSS1Compat</code>。</p> <h4 id="_2-4-文档状态属性"><a href="#_2-4-文档状态属性" class="header-anchor">#</a> 2.4 文档状态属性</h4> <h5 id="_1-document-hidden-当前页面是否可见-返布尔值。"><a href="#_1-document-hidden-当前页面是否可见-返布尔值。" class="header-anchor">#</a> （1）document.hidden 当前页面是否可见，返布尔值。</h5> <p><code>document.hidden</code>属性<strong>返回一个布尔值，表示当前页面是否可见</strong>。如果<strong>窗口最小化、浏览器切换了 Tab，都会导致导致页面不可见，使得<code>document.hidden</code>返回<code>true</code>。</strong></p> <p>这个属性是 Page Visibility API 引入的，一般都是配合这个 API 使用。</p> <h5 id="_2-document-visibilitystate-返回文档可见状态-visible、hidden、prerender、unloaded"><a href="#_2-document-visibilitystate-返回文档可见状态-visible、hidden、prerender、unloaded" class="header-anchor">#</a> （2）document.visibilityState 返回文档可见状态（visible、hidden、prerender、unloaded）</h5> <p><code>document.visibilityState</code><strong>返回文档的可见状态</strong>。</p> <p>它的值有<strong>四种状态</strong>。</p> <blockquote><ul><li><code>visible</code>：页面可见。注意，页面可能是部分可见，即不是焦点窗口，前面被其他窗口部分挡住了。</li> <li><code>hidden</code>：页面不可见，有可能窗口最小化，或者浏览器切换到了另一个 Tab。</li> <li><code>prerender</code>：页面处于正在渲染状态，对于用户来说，该页面不可见。</li> <li><code>unloaded</code>：页面从内存里面卸载了。</li></ul></blockquote> <p><strong>这个属性可以用在页面加载时，防止加载某些资源；或者页面不可见时，停掉一些页面功能。</strong></p> <h5 id="_3-document-readystate-返回当前文档的状态-loading、interactive、complete"><a href="#_3-document-readystate-返回当前文档的状态-loading、interactive、complete" class="header-anchor">#</a> （3）document.readyState 返回当前文档的状态（loading、interactive、complete）</h5> <p><code>document.readyState</code>属性<strong>返回当前文档的状态</strong>，共有<strong>三种可能</strong>的值。</p> <ul><li><code>loading</code>：加载 HTML 代码阶段（尚未完成解析）</li> <li><code>interactive</code>：加载外部资源阶段</li> <li><code>complete</code>：加载完成</li></ul> <p>这个属性变化的过程如下。</p> <ol><li>浏览器开始解析 HTML 文档，<code>document.readyState</code>属性等于<code>loading</code>。</li> <li>浏览器遇到 HTML 文档中的<code>&lt;script&gt;</code>元素，并且没有<code>async</code>或<code>defer</code>属性，就暂停解析，开始执行脚本，这时<code>document.readyState</code>属性还是等于<code>loading</code>。</li> <li>HTML 文档解析完成，<code>document.readyState</code>属性变成<code>interactive</code>。</li> <li>浏览器等待图片、样式表、字体文件等外部资源加载完成，一旦全部加载完成，<code>document.readyState</code>属性变成<code>complete</code>。</li></ol> <p>下面的代码用来检查网页是否加载成功。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 基本检查</span>
    407. 

  407. <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>readyState <span class="token operator">===</span> <span class="token string">'complete'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    408. 

  408.   <span class="token comment">// ...</span>
    409. 

  409. <span class="token punctuation">}</span>
    410. 

  410. 

  411. <span class="token comment">// 轮询检查</span>
    412. 

  412. <span class="token keyword">var</span> interval <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    413. 

  413.   <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>readyState <span class="token operator">===</span> <span class="token string">'complete'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    414. 

  414.     <span class="token function">clearInterval</span><span class="token punctuation">(</span>interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
    415. 

  415.     <span class="token comment">// ...</span>
    416. 

  416.   <span class="token punctuation">}</span>
    417. 

  417. <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    418. 

  418. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>另外，<strong>每次状态变化都会触发一个<code>readystatechange</code>事件。</strong></p> <h4 id="_2-5-document-cookie-用来操作浏览器-cookie"><a href="#_2-5-document-cookie-用来操作浏览器-cookie" class="header-anchor">#</a> 2.5 document.cookie 用来操作浏览器 Cookie</h4> <p><code>document.cookie</code>属性用来操作浏览器 Cookie，详见《浏览器模型》部分的《Cookie》章节。</p> <h4 id="_2-6-document-designmode-控制当前文档是否可编辑-on、off"><a href="#_2-6-document-designmode-控制当前文档是否可编辑-on、off" class="header-anchor">#</a> 2.6 document.designMode 控制当前文档是否可编辑（on、off）</h4> <p><code>document.designMode</code>属性<strong>控制当前文档是否可编辑。该属性只有两个值<code>on</code>和<code>off</code>，默认值为<code>off</code></strong>。一旦设为<code>on</code>，用户就可以编辑整个文档的内容。</p> <p>下面代码打开<code>iframe</code>元素内部文档的<code>designMode</code>属性，就能将其变为一个所见即所得的编辑器。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    419. 

  419. <span class="token comment">// &lt;iframe id=&quot;editor&quot; src=&quot;about:blank&quot;&gt;&lt;/iframe&gt;</span>
    420. 

  420. <span class="token keyword">var</span> editor <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'editor'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    421. 

  421. editor<span class="token punctuation">.</span>contentDocument<span class="token punctuation">.</span>designMode <span class="token operator">=</span> <span class="token string">'on'</span><span class="token punctuation">;</span>
    422. 

  422. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="_2-7-document-implementation-返回一个domimplementation对象"><a href="#_2-7-document-implementation-返回一个domimplementation对象" class="header-anchor">#</a> 2.7 document.implementation 返回一个<code>DOMImplementation</code>对象</h4> <p><code>document.implementation</code>属性<strong>返回一个<code>DOMImplementation</code>对象</strong>。该对象有三个方法，<strong>主要用于创建独立于当前文档的新的 Document 对象</strong>。</p> <ul><li><code>DOMImplementation.createDocument()</code>：创建一个 XML 文档。</li> <li><code>DOMImplementation.createHTMLDocument()</code>：创建一个 HTML 文档。</li> <li><code>DOMImplementation.createDocumentType()</code>：创建一个 DocumentType 对象。</li></ul> <p>下面是创建 HTML 文档的例子。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> doc <span class="token operator">=</span> document<span class="token punctuation">.</span>implementation<span class="token punctuation">.</span><span class="token function">createHTMLDocument</span><span class="token punctuation">(</span><span class="token string">'Title'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    423. 

  423. <span class="token keyword">var</span> p <span class="token operator">=</span> doc<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    424. 

  424. p<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'hello world'</span><span class="token punctuation">;</span>
    425. 

  425. doc<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span>
    426. 

  426. 

  427. document<span class="token punctuation">.</span><span class="token function">replaceChild</span><span class="token punctuation">(</span>
    428. 

  428.   doc<span class="token punctuation">.</span>documentElement<span class="token punctuation">,</span>
    429. 

  429.   document<span class="token punctuation">.</span>documentElement
    430. 

  430. <span class="token punctuation">)</span><span class="token punctuation">;</span>
    431. 

  431. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>上面代码中，第一步生成一个新的 HTML 文档<code>doc</code>，然后用它的根元素<code>document.documentElement</code>替换掉<code>document.documentElement</code>。这会使得当前文档的内容全部消失，变成<code>hello world</code>。</p> <h3 id="_3、方法"><a href="#_3、方法" class="header-anchor">#</a> 3、方法</h3> <h4 id="_3-1-document-open-document-close-打开和关闭文档可写状态"><a href="#_3-1-document-open-document-close-打开和关闭文档可写状态" class="header-anchor">#</a> 3.1 document.open()，document.close() 打开和关闭文档可写状态</h4> <p><code>document.open</code>方法<strong>清除当前文档所有内容，使得文档处于可写状态，供<code>document.write</code>方法写入内容</strong>。</p> <p><code>document.close</code>方法用来<strong>关闭<code>document.open()</code>打开的文档</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    432. 

  432. document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'hello world'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    433. 

  433. document<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    434. 

  434. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h4 id="_3-2-document-write-向当前文档写入内容-document-writeln-写入内容并换行"><a href="#_3-2-document-write-向当前文档写入内容-document-writeln-写入内容并换行" class="header-anchor">#</a> 3.2 document.write() 向当前文档写入内容，document.writeln() 写入内容并换行</h4> <p><code>document.write</code>方法<strong>用于向当前文档写入内容</strong>。</p> <p>在网页的首次渲染阶段，只要页面没有关闭写入（即没有执行<code>document.close()</code>），<code>document.write</code>写入的内容就会追加在已有内容的后面。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 页面显示“helloworld”</span>
    435. 

  435. document<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    436. 

  436. document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    437. 

  437. document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'world'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    438. 

  438. document<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    439. 

  439. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>注意，<code>document.write</code>会当作 HTML 代码解析，不会转义。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'&lt;p&gt;hello world&lt;/p&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    440. 

  440. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码中，<code>document.write</code>会将<code>&lt;p&gt;</code>当作 HTML 标签解释。</p> <p>如果页面已经解析完成（<code>DOMContentLoaded</code>事件发生之后），再调用<code>write</code>方法，它会先调用<code>open</code>方法，擦除当前文档所有内容，然后再写入。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    441. 

  441.   document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'&lt;p&gt;Hello World!&lt;/p&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    442. 

  442. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    443. 

  443. 

  444. <span class="token comment">// 等同于</span>
    445. 

  445. document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    446. 

  446.   document<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    447. 

  447.   document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'&lt;p&gt;Hello World!&lt;/p&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    448. 

  448.   document<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    449. 

  449. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    450. 

  450. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>如果在页面渲染过程中调用<code>write</code>方法，并不会自动调用<code>open</code>方法。（可以理解成，<code>open</code>方法已调用，但<code>close</code>方法还未调用。）</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>html<span class="token operator">&gt;</span>
    451. 

  451. <span class="token operator">&lt;</span>body<span class="token operator">&gt;</span>
    452. 

  452. hello
    453. 

  453. <span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;text/javascript&quot;</span><span class="token operator">&gt;</span>
    454. 

  454.   document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">&quot;world&quot;</span><span class="token punctuation">)</span>
    455. 

  455. <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
    456. 

  456. <span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>
    457. 

  457. <span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">&gt;</span>
    458. 

  458. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>在浏览器打开上面网页，将会显示<code>hello world</code>。</p> <p><code>document.write</code>是 JavaScript 语言标准化之前就存在的方法，现在完全有更符合标准的方法向文档写入内容（比如对<code>innerHTML</code>属性赋值）。所以，<strong>除了某些特殊情况，应该尽量避免使用<code>document.write</code>这个方法。</strong></p> <p><code>document.writeln</code>方法与<code>write</code>方法完全一致，除了会在输出内容的尾部添加换行符。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    459. 

  459. document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    460. 

  460. <span class="token comment">// 12</span>
    461. 

  461. 

  462. document<span class="token punctuation">.</span><span class="token function">writeln</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    463. 

  463. document<span class="token punctuation">.</span><span class="token function">writeln</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    464. 

  464. <span class="token comment">// 1</span>
    465. 

  465. <span class="token comment">// 2</span>
    466. 

  466. <span class="token comment">//</span>
    467. 

  467. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>注意，<code>writeln</code>方法添加的是 ASCII 码的换行符，渲染成 HTML 网页时不起作用，即在网页上显示不出换行。网页上的换行，必须显式写入<code></code>。</p> <h4 id="_3-3-document-queryselector-返回匹配该选择器的元素节点-document-queryselectorall-返回一个nodelist对象-包含所有匹配给定选择器的节点"><a href="#_3-3-document-queryselector-返回匹配该选择器的元素节点-document-queryselectorall-返回一个nodelist对象-包含所有匹配给定选择器的节点" class="header-anchor">#</a> 3.3 document.querySelector() 返回匹配该选择器的元素节点，document.querySelectorAll() 返回一个<code>NodeList</code>对象，包含所有匹配给定选择器的节点</h4> <p><code>document.querySelector</code>方法接受一个 CSS 选择器作为参数，<strong>返回匹配该选择器的元素节点</strong>。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> el1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.myclass'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    468. 

  468. <span class="token keyword">var</span> el2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#myParent &gt; [ng-click]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    469. 

  469. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><code>document.querySelectorAll</code>方法与<code>querySelector</code>用法类似，区别是<strong>返回一个<code>NodeList</code>对象，包含所有匹配给定选择器的节点</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>elementList <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'.myclass'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    470. 

  470. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>这两个方法的参数，可以是逗号分隔的多个 CSS 选择器，返回匹配其中一个选择器的元素节点，这与 CSS 选择器的规则是一致的。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> matches <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'div.note, div.alert'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    471. 

  471. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码返回<code>class</code>属性是<code>note</code>或<code>alert</code>的<code>div</code>元素。</p> <p>这两个方法都<strong>支持复杂的 CSS 选择器</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 选中 data-foo-bar 属性等于 someval 的元素</span>
    472. 

  472. document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'[data-foo-bar=&quot;someval&quot;]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    473. 

  473. 

  474. <span class="token comment">// 选中 myForm 表单中所有不通过验证的元素</span>
    475. 

  475. document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'#myForm :invalid'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    476. 

  476. 

  477. <span class="token comment">// 选中div元素，那些 class 含 ignore 的除外</span>
    478. 

  478. document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'DIV:not(.ignore)'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    479. 

  479. 

  480. <span class="token comment">// 同时选中 div，a，script 三类元素</span>
    481. 

  481. document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'DIV, A, SCRIPT'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    482. 

  482. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>但是，它们<strong>不支持 CSS 伪元素的选择器</strong>（比如<code>:first-line</code>和<code>:first-letter</code>）和<strong>伪类的选择器</strong>（比如<code>:link</code>和<code>:visited</code>），即无法选中伪元素和伪类。</p> <p>如果<code>querySelectorAll</code>方法的参数是字符串<code>*</code>，则会返回文档中的所有元素节点。另外，<code>querySelectorAll</code>的返回结果不是动态集合，不会实时反映元素节点的变化。</p> <p>最后，这两个方法除了定义在<code>document</code>对象上，还定义在元素节点上，即<strong>在元素节点上也可以调用</strong>。</p> <h4 id="_3-4-document-getelementsbytagname-搜索-html-标签名-返回符合条件的元素"><a href="#_3-4-document-getelementsbytagname-搜索-html-标签名-返回符合条件的元素" class="header-anchor">#</a> 3.4 document.getElementsByTagName() 搜索 HTML 标签名，返回符合条件的元素</h4> <p><code>document.getElementsByTagName</code>方法<strong>搜索 HTML 标签名，返回符合条件的元素</strong>。它的返回值是一个类似数组对象（<strong><code>HTMLCollection</code>实例</strong>），可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> paras <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    483. 

  483. paras <span class="token keyword">instanceof</span> <span class="token class-name">HTMLCollection</span> <span class="token comment">// true</span>
    484. 

  484. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码返回当前文档的所有<code>p</code>元素节点。</p> <p>HTML 标签名是大小写不敏感的，因此<code>getElementsByTagName</code>方法也是大小写不敏感的。另外，返回结果中，各个成员的顺序就是它们在文档中出现的顺序。</p> <p>如果传入<code>*</code>，就可以返回文档中所有 HTML 元素。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> allElements <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    485. 

  485. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>注意</strong>，元素节点本身也定义了<code>getElementsByTagName</code>方法，返回该元素的后代元素中符合条件的元素。也就是说，这个方法不仅可以在<code>document</code>对象上调用，也可以在任何元素节点上调用。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> firstPara <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    486. 

  486. <span class="token keyword">var</span> spans <span class="token operator">=</span> firstPara<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'span'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    487. 

  487. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码选中第一个<code>p</code>元素内部的所有<code>span</code>元素。</p> <h4 id="_3-5-document-getelementsbyclassname-返回class符合条件的元素"><a href="#_3-5-document-getelementsbyclassname-返回class符合条件的元素" class="header-anchor">#</a> 3.5 document.getElementsByClassName() 返回class符合条件的元素</h4> <p><code>document.getElementsByClassName</code>方法返回一个类似数组的对象（<strong><code>HTMLCollection</code>实例</strong>），<strong>包括了所有<code>class</code>名字符合指定条件的元素，元素的变化实时反映在返回结果中</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> elements <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span>names<span class="token punctuation">)</span><span class="token punctuation">;</span>
    488. 

  488. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>由于<code>class</code>是保留字，所以 JavaScript 一律使用<code>className</code>表示 CSS 的<code>class</code>。</strong></p> <p>参数可以是多个<code>class</code>，它们之间使用空格分隔。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> elements <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">'foo bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    489. 

  489. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码返回<strong>同时具有<code>foo</code>和<code>bar</code>两个<code>class</code>的元素</strong>，<code>foo</code>和<code>bar</code>的顺序不重要。</p> <p>注意，正常模式下，CSS 的<code>class</code>是大小写敏感的。（<code>quirks mode</code>下，大小写不敏感。）</p> <p>与<code>getElementsByTagName</code>方法一样，<code>getElementsByClassName</code>方法不仅可以在<code>document</code>对象上调用，也可以在任何元素节点上调用。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 非document对象上调用</span>
    490. 

  490. <span class="token keyword">var</span> elements <span class="token operator">=</span> rootElement<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span>names<span class="token punctuation">)</span><span class="token punctuation">;</span>
    491. 

  491. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="_3-6-document-getelementsbyname-返回拥有相应name值的元素"><a href="#_3-6-document-getelementsbyname-返回拥有相应name值的元素" class="header-anchor">#</a> 3.6 document.getElementsByName() 返回拥有相应name值的元素</h4> <p><code>document.getElementsByName</code>方法用于选择拥有<code>name</code>属性的 HTML 元素（比如<code>&lt;form&gt;</code>、<code>&lt;radio&gt;</code>、<code>&lt;img&gt;</code>、<code>&lt;frame&gt;</code>、<code>&lt;embed&gt;</code>和<code>&lt;object&gt;</code>等），返回一个类似数组的的对象（<strong><code>NodeList</code>实例</strong>），因为<code>name</code>属性相同的元素可能不止一个。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 表单为 &lt;form name=&quot;x&quot;&gt;&lt;/form&gt;</span>
    492. 

  492. <span class="token keyword">var</span> forms <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByName</span><span class="token punctuation">(</span><span class="token string">'x'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    493. 

  493. forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>tagName <span class="token comment">// &quot;FORM&quot;</span>
    494. 

  494. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h4 id="_3-7-document-getelementbyid-返回匹配指定id属性的元素节点"><a href="#_3-7-document-getelementbyid-返回匹配指定id属性的元素节点" class="header-anchor">#</a> 3.7 document.getElementById() 返回匹配指定<code>id</code>属性的元素节点</h4> <p><code>document.getElementById</code>方法<strong>返回匹配指定<code>id</code>属性的元素节点</strong>。如果没有发现匹配的节点，则返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> elem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'para1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    495. 

  495. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>注意，该方法的参数是大小写敏感的。比如，如果某个节点的<code>id</code>属性是<code>main</code>，那么<code>document.getElementById('Main')</code>将返回<code>null</code>。</p> <p>**<code>document.getElementById</code>方法与<code>document.querySelector</code>方法都能获取元素节点，**不同之处是<code>document.querySelector</code>方法的参数使用 CSS 选择器语法，<code>document.getElementById</code>方法的参数是元素的<code>id</code>属性。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myElement'</span><span class="token punctuation">)</span>
    496. 

  496. document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#myElement'</span><span class="token punctuation">)</span>
    497. 

  497. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码中，两个方法都能选中<code>id</code>为<code>myElement</code>的元素，但是<code>document.getElementById()</code>比<code>document.querySelector()</code>效率高得多。</p> <p>另外，<strong>这个方法只能在<code>document</code>对象上使用，不能在其他元素节点上使用</strong>。</p> <h4 id="_3-8-document-elementfrompoint-x-y-返回位于页面指定坐标最上层的元素节点-document-elementsfrompoint-x-y-返回一个数组-成员是位于指定坐标的所有元素"><a href="#_3-8-document-elementfrompoint-x-y-返回位于页面指定坐标最上层的元素节点-document-elementsfrompoint-x-y-返回一个数组-成员是位于指定坐标的所有元素" class="header-anchor">#</a> 3.8 document.elementFromPoint(x, y) 返回位于页面指定坐标最上层的元素节点，document.elementsFromPoint(x, y) 返回一个数组，成员是位于指定坐标的所有元素</h4> <p><code>document.elementFromPoint</code>方法<strong>返回位于页面指定位置最上层的元素节点</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">elementFromPoint</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    498. 

  498. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码选中在<code>(50, 50)</code>这个坐标位置的最上层的那个 HTML 元素。</p> <p><code>elementFromPoint</code>方法的<strong>两个参数</strong>，依次<strong>是相对于当前视口左上角的横坐标和纵坐标</strong>，单位是像素。如果位于该位置的 HTML 元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值或超过视口大小），则返回<code>null</code>。</p> <p><code>document.elementsFromPoint()</code><strong>返回一个数组，成员是位于指定坐标（相对于视口）的所有元素</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> elements <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">elementsFromPoint</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
    499. 

  499. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>注意：这两个方法的坐标都是相对于视口，就是说当滚动条滚动时，选中的元素可能会跟着变化。</strong></p> <h4 id="_3-9-document-createelement-创建元素节点-并返回"><a href="#_3-9-document-createelement-创建元素节点-并返回" class="header-anchor">#</a> 3.9 document.createElement() 创建元素节点，并返回</h4> <p><code>document.createElement</code>方法<strong>用来生成元素节点，并返回该节点。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> newDiv <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    500. 

  500. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><code>createElement</code>方法的参数为元素的标签名，即元素节点的<code>tagName</code>属性，对于 HTML 网页大小写不敏感，即参数为<code>div</code>或<code>DIV</code>返回的是同一种节点。如果参数里面包含尖括号（即<code>&lt;</code>和<code>&gt;</code>）会报错。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'&lt;div&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    501. 

  501. <span class="token comment">// DOMException: The tag name provided ('&lt;div&gt;') is not a valid name</span>
    502. 

  502. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>注意</strong>，<code>document.createElement</code>的参数可以是自定义的标签名。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    503. 

  503. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="_3-10-document-createtextnode-创建文本节点-并返回"><a href="#_3-10-document-createtextnode-创建文本节点-并返回" class="header-anchor">#</a> 3.10 document.createTextNode() 创建文本节点，并返回</h4> <p><code>document.createTextNode</code>方法<strong>用来生成文本节点（<code>Text</code>实例），并返回该节点</strong>。它的<strong>参数是文本节点的内容</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> newDiv <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    504. 

  504. <span class="token keyword">var</span> newContent <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    505. 

  505. newDiv<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>newContent<span class="token punctuation">)</span><span class="token punctuation">;</span>
    506. 

  506. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码新建一个<code>div</code>节点和一个文本节点，然后将文本节点插入<code>div</code>节点。</p> <p><strong>这个方法可以确保返回的节点，被浏览器当作文本渲染，而不是当作 HTML 代码渲染。因此，可以用来展示用户的输入，避免 XSS 攻击。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    507. 

  507. div<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span><span class="token string">'&lt;span&gt;Foo &amp; bar&lt;/span&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    508. 

  508. console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span>
    509. 

  509. <span class="token comment">// &amp;lt;span&amp;gt;Foo &amp;amp; bar&amp;lt;/span&amp;gt;</span>
    510. 

  510. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>上面代码中，<code>createTextNode</code>方法对大于号和小于号进行转义，从而保证即使用户输入的内容包含恶意代码，也能正确显示。</p> <p>需要注意的是，该方法不对单引号和双引号转义，所以不能用来对 HTML 属性赋值。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">escapeHtml</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    511. 

  511.   <span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    512. 

  512.   div<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    513. 

  513.   <span class="token keyword">return</span> div<span class="token punctuation">.</span>innerHTML<span class="token punctuation">;</span>
    514. 

  514. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    515. 

  515. 

  516. <span class="token keyword">var</span> userWebsite <span class="token operator">=</span> <span class="token string">'&quot; onmouseover=&quot;alert(\'derp\')&quot; &quot;'</span><span class="token punctuation">;</span>
    517. 

  517. <span class="token keyword">var</span> profileLink <span class="token operator">=</span> <span class="token string">'&lt;a href=&quot;'</span> <span class="token operator">+</span> <span class="token function">escapeHtml</span><span class="token punctuation">(</span>userWebsite<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'&quot;&gt;Bob&lt;/a&gt;'</span><span class="token punctuation">;</span>
    518. 

  518. <span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'target'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    519. 

  519. div<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> profileLink<span class="token punctuation">;</span>
    520. 

  520. <span class="token comment">// &lt;a href=&quot;&quot; onmouseover=&quot;alert('derp')&quot; &quot;&quot;&gt;Bob&lt;/a&gt;</span>
    521. 

  521. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>上面代码中，由于<code>createTextNode</code>方法不转义双引号，导致<code>onmouseover</code>方法被注入了代码。</p> <h4 id="_3-11-document-createattribute-创建属性节点-并返回"><a href="#_3-11-document-createattribute-创建属性节点-并返回" class="header-anchor">#</a> 3.11 document.createAttribute() 创建属性节点，并返回</h4> <p><code>document.createAttribute</code>方法<strong>生成一个新的属性节点（<code>Attr</code>实例），并返回它</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> attribute <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createAttribute</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
    522. 

  522. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><code>document.createAttribute</code>方法的参数<code>name</code>，是属性的名称。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> node <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'div1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    523. 

  523. 

  524. <span class="token keyword">var</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createAttribute</span><span class="token punctuation">(</span><span class="token string">'my_attrib'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    525. 

  525. a<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'newVal'</span><span class="token punctuation">;</span>
    526. 

  526. 

  527. node<span class="token punctuation">.</span><span class="token function">setAttributeNode</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
    528. 

  528. <span class="token comment">// 或者</span>
    529. 

  529. node<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'my_attrib'</span><span class="token punctuation">,</span> <span class="token string">'newVal'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    530. 

  530. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>上面代码为<code>div1</code>节点，插入一个值为<code>newVal</code>的<code>my_attrib</code>属性。</p> <h4 id="_3-12-document-createcomment-创建注释节点-并返回"><a href="#_3-12-document-createcomment-创建注释节点-并返回" class="header-anchor">#</a> 3.12 document.createComment() 创建注释节点，并返回</h4> <p><code>document.createComment</code>方法<strong>生成一个新的注释节点，并返回该节点。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> CommentNode <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createComment</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    531. 

  531. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><code>document.createComment</code>方法的参数是一个字符串，会成为注释节点的内容。</p> <h4 id="_3-13-document-createdocumentfragment-创建空文档片段对象"><a href="#_3-13-document-createdocumentfragment-创建空文档片段对象" class="header-anchor">#</a> 3.13 document.createDocumentFragment() 创建空文档片段对象</h4> <p><code>document.createDocumentFragment</code>方法<strong>生成一个空的文档片段对象（<code>DocumentFragment</code>实例）</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> docFragment <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createDocumentFragment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    532. 

  532. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><code>DocumentFragment</code><strong>是一个存在于内存的 DOM 片段，不属于当前文档，常常用来生成一段较复杂的 DOM 结构，然后再插入当前文档</strong>。这样做的好处在于，因为<code>DocumentFragment</code>不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，<strong>比直接修改当前文档的 DOM 有更好的性能表现。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> docfrag <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createDocumentFragment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    533. 

  533. 

  534. <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    535. 

  535.   <span class="token keyword">var</span> li <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    536. 

  536.   li<span class="token punctuation">.</span>textContent <span class="token operator">=</span> e<span class="token punctuation">;</span>
    537. 

  537.   docfrag<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>li<span class="token punctuation">)</span><span class="token punctuation">;</span>
    538. 

  538. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    539. 

  539. 

  540. <span class="token keyword">var</span> element  <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'ul'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    541. 

  541. element<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>docfrag<span class="token punctuation">)</span><span class="token punctuation">;</span>
    542. 

  542. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>上面代码中，文档片断<code>docfrag</code>包含四个<code>&lt;li&gt;</code>节点，这些子节点被一次性插入了当前文档。</p> <h4 id="_3-14-document-createevent-创建事件对象-event实例"><a href="#_3-14-document-createevent-创建事件对象-event实例" class="header-anchor">#</a> 3.14 document.createEvent() 创建事件对象（Event实例）</h4> <p><code>document.createEvent</code>方法<strong>生成一个事件对象（<code>Event</code>实例）</strong>，该对象可以被<code>element.dispatchEvent</code>方法使用，触发指定事件。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> event <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createEvent</span><span class="token punctuation">(</span>type<span class="token punctuation">)</span><span class="token punctuation">;</span>
    543. 

  543. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><code>document.createEvent</code>方法的<strong>参数是事件类型，比如<code>UIEvents</code>、<code>MouseEvents</code>、<code>MutationEvents</code>、<code>HTMLEvents</code>。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> event <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createEvent</span><span class="token punctuation">(</span><span class="token string">'Event'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    544. 

  544. event<span class="token punctuation">.</span><span class="token function">initEvent</span><span class="token punctuation">(</span><span class="token string">'build'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    545. 

  545. document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'build'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    546. 

  546.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>type<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;build&quot;</span>
    547. 

  547. <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    548. 

  548. document<span class="token punctuation">.</span><span class="token function">dispatchEvent</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span>
    549. 

  549. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>上面代码新建了一个名为<code>build</code>的事件实例，然后触发该事件。</p> <h4 id="_3-15-document-addeventlistener-添加事件监听-document-removeeventlistener-移除事件监听-document-dispatchevent-触发事件"><a href="#_3-15-document-addeventlistener-添加事件监听-document-removeeventlistener-移除事件监听-document-dispatchevent-触发事件" class="header-anchor">#</a> 3.15 document.addEventListener() 添加事件监听，document.removeEventListener() 移除事件监听，document.dispatchEvent() 触发事件</h4> <p>这三个方法用于处理<code>document</code>节点的事件。它们都继承自<code>EventTarget</code>接口，详细介绍参见《EventTarget 接口》一章。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 添加事件监听函数</span>
    550. 

  550. document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> listener<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    551. 

  551. 

  552. <span class="token comment">// 移除事件监听函数</span>
    553. 

  553. document<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> listener<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    554. 

  554. 

  555. <span class="token comment">// 触发事件</span>
    556. 

  556. <span class="token keyword">var</span> event <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Event</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    557. 

  557. document<span class="token punctuation">.</span><span class="token function">dispatchEvent</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span>
    558. 

  558. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h4 id="_3-16-document-hasfocus-判断当前文档是否有元素被激活或获取焦点"><a href="#_3-16-document-hasfocus-判断当前文档是否有元素被激活或获取焦点" class="header-anchor">#</a> 3.16 document.hasFocus() 判断当前文档是否有元素被激活或获取焦点</h4> <p><code>document.hasFocus</code>方法<strong>返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> focused <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">hasFocus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    559. 

  559. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>注意，有焦点的文档必定被激活（active），反之不成立，激活的文档未必有焦点。比如，用户点击按钮，从当前窗口跳出一个新窗口，该新窗口就是激活的，但是不拥有焦点。</strong></p> <h4 id="_3-17-document-adoptnode-采用外部节点-document-importnode-输入-拷贝-外部节点"><a href="#_3-17-document-adoptnode-采用外部节点-document-importnode-输入-拷贝-外部节点" class="header-anchor">#</a> 3.17 document.adoptNode() 采用外部节点，document.importNode() 输入（拷贝）外部节点</h4> <p><code>document.adoptNode</code>方法<strong>将某个节点及其子节点，从原来所在的文档或<code>DocumentFragment</code>里面移除，归属当前<code>document</code>对象，返回插入后的新节点</strong>。插入的节点对象的<code>ownerDocument</code>属性，会变成当前的<code>document</code>对象，而<code>parentNode</code>属性是<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> node <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">adoptNode</span><span class="token punctuation">(</span>externalNode<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// externalNode 外部节点</span>
    560. 

  560. document<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">;</span>
    561. 

  561. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>注意，<code>document.adoptNode</code>方法只是<strong>改变了节点的归属</strong>，并没有将这个节点插入新的文档树。所以，还要再用<code>appendChild</code>方法或<code>insertBefore</code>方法，将新节点插入当前文档树。</p> <p><code>document.importNode</code>方法则是<strong>从原来所在的文档或<code>DocumentFragment</code>里面，拷贝某个节点及其子节点，让它们归属当前<code>document</code>对象</strong>。拷贝的节点对象的<code>ownerDocument</code>属性，会变成当前的<code>document</code>对象，而<code>parentNode</code>属性是<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> node <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">importNode</span><span class="token punctuation">(</span>externalNode<span class="token punctuation">,</span> deep<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// externalNode 外部节点 deep是否深拷贝</span>
    562. 

  562. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><code>document.importNode</code>方法的<strong>第一个参数是外部节点</strong>，<strong>第二个参数是一个布尔值，表示对外部节点是深拷贝还是浅拷贝</strong>，默认是浅拷贝（false）。虽然第二个参数是可选的，但是建议总是保留这个参数，并设为<code>true</code>。</p> <p>注意，<code>document.importNode</code>方法只是拷贝外部节点，这时该节点的父节点是<code>null</code>。下一步还必须将这个节点插入当前文档树。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> iframe <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'iframe'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    563. 

  563. <span class="token keyword">var</span> oldNode <span class="token operator">=</span> iframe<span class="token punctuation">.</span>contentWindow<span class="token punctuation">.</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myNode'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    564. 

  564. <span class="token keyword">var</span> newNode <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">importNode</span><span class="token punctuation">(</span>oldNode<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    565. 

  565. document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;container&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>newNode<span class="token punctuation">)</span><span class="token punctuation">;</span>
    566. 

  566. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>上面代码从<code>iframe</code>窗口，拷贝一个指定节点<code>myNode</code>，插入当前文档。</strong></p> <h4 id="_3-18-document-createnodeiterator-返回一个子节点遍历器-nodefilter实例"><a href="#_3-18-document-createnodeiterator-返回一个子节点遍历器-nodefilter实例" class="header-anchor">#</a> 3.18 document.createNodeIterator() 返回一个子节点遍历器（NodeFilter实例）</h4> <p><code>document.createNodeIterator</code>方法<strong>返回一个子节点遍历器（NodeFilter实例）</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> nodeIterator <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createNodeIterator</span><span class="token punctuation">(</span>
    567. 

  567.   document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> <span class="token comment">// 所要遍历的根节点</span>
    568. 

  568.   NodeFilter<span class="token punctuation">.</span><span class="token constant">SHOW_ELEMENT</span> <span class="token comment">// 所要遍历的节点类型</span>
    569. 

  569. <span class="token punctuation">)</span><span class="token punctuation">;</span>
    570. 

  570. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>上面代码返回<code>&lt;body&gt;</code>元素子节点的遍历器。</p> <p><code>document.createNodeIterator</code>方法<strong>第一个参数为所要遍历的根节点</strong>，<strong>第二个参数为所要遍历的节点类型</strong>，这里指定为元素节点（<code>NodeFilter.SHOW_ELEMENT</code>）。几种主要的节点类型写法如下。</p> <ul><li><strong>所有节点：NodeFilter.SHOW_ALL</strong></li> <li><strong>元素节点：NodeFilter.SHOW_ELEMENT</strong></li> <li><strong>文本节点：NodeFilter.SHOW_TEXT</strong></li> <li><strong>评论节点：NodeFilter.SHOW_COMMENT</strong></li></ul> <p><code>document.createNodeIterator</code>方法返回一个“遍历器”对象（<code>NodeFilter</code>实例）。该实例的<code>nextNode()</code>方法和<code>previousNode()</code>方法，可以用来遍历所有子节点。</p> <p><strong>每次调用NodeFilter实例的nextNode() / previousNode()方法都会把当前指针往 下一个 / 上一个节点移动。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> nodeIterator <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createNodeIterator</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">;</span>
    571. 

  571. <span class="token keyword">var</span> pars <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    572. 

  572. <span class="token keyword">var</span> currentNode<span class="token punctuation">;</span>
    573. 

  573. 

  574. <span class="token keyword">while</span> <span class="token punctuation">(</span>currentNode <span class="token operator">=</span> nodeIterator<span class="token punctuation">.</span><span class="token function">nextNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    575. 

  575.     <span class="token comment">// js中所有运算符都有返回值，为运算结果。这里面即给currentNode赋值了，还会自动调用Boolean()进行布尔运算。</span>
    576. 

  576.     <span class="token comment">// 每次调用NodeFilter实例的nextNode()方法都会返回下一个节点</span>
    577. 

  577. 

  578.   pars<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>currentNode<span class="token punctuation">)</span><span class="token punctuation">;</span>
    579. 

  579. <span class="token punctuation">}</span>
    580. 

  580. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>上面代码中，使用遍历器的<code>nextNode</code>方法，将根节点的所有子节点，依次读入一个数组。<code>nextNode</code>方法先返回遍历器的内部指针所在的节点，然后会将指针移向下一个节点。所有成员遍历完成后，返回<code>null</code>。<code>previousNode</code>方法则是先将指针移向上一个节点，然后返回该节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> nodeIterator <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createNodeIterator</span><span class="token punctuation">(</span>
    581. 

  581.   document<span class="token punctuation">.</span>body<span class="token punctuation">,</span>
    582. 

  582.   NodeFilter<span class="token punctuation">.</span><span class="token constant">SHOW_ELEMENT</span>
    583. 

  583. <span class="token punctuation">)</span><span class="token punctuation">;</span>
    584. 

  584. 

  585. <span class="token keyword">var</span> currentNode <span class="token operator">=</span> nodeIterator<span class="token punctuation">.</span><span class="token function">nextNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    586. 

  586. <span class="token keyword">var</span> previousNode <span class="token operator">=</span> nodeIterator<span class="token punctuation">.</span><span class="token function">previousNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    587. 

  587. 

  588. currentNode <span class="token operator">===</span> previousNode <span class="token comment">// true</span>
    589. 

  589. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>上面代码中，<code>currentNode</code>和<code>previousNode</code>都指向同一个的节点。</p> <p>注意，遍历器返回的<strong>第一个节点，总是根节点</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>pars<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">===</span> document<span class="token punctuation">.</span>body <span class="token comment">// true</span>
    590. 

  590. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="_3-19-document-createtreewalker-返回一个dom的子树遍历器-treewalker实例"><a href="#_3-19-document-createtreewalker-返回一个dom的子树遍历器-treewalker实例" class="header-anchor">#</a> 3.19 document.createTreeWalker() 返回一个DOM的子树遍历器（TreeWalker实例）</h4> <p><code>document.createTreeWalker</code>方法<strong>返回一个 DOM 的子树遍历器</strong>。它与<code>document.createNodeIterator</code>方法基本是类似的，区别在于它返回的是<code>TreeWalker</code>实例，后者返回的是<code>NodeIterator</code>实例。另外，它的<strong>第一个节点不是根节点</strong>。</p> <p><code>document.createTreeWalker</code>方法的<strong>第一个参数是所要遍历的根节点</strong>，<strong>第二个参数指定所要遍历的节点类型</strong>（与<code>document.createNodeIterator</code>方法的第二个参数相同）。</p> <p><strong>和<code>document.createNodeIterator</code>方法区别二是：<code>TreeWalker</code>实例有<code>currentNode</code>属性。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> treeWalker <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createTreeWalker</span><span class="token punctuation">(</span>
    591. 

  591.   document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> <span class="token comment">// 所要遍历的根节点</span>
    592. 

  592.   NodeFilter<span class="token punctuation">.</span><span class="token constant">SHOW_ELEMENT</span> <span class="token comment">// 所要遍历的节点类型</span>
    593. 

  593. <span class="token punctuation">)</span><span class="token punctuation">;</span>
    594. 

  594. 

  595. <span class="token keyword">var</span> nodeList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    596. 

  596. <span class="token comment">// 每调用一次nextNode()，currentNode属性的值将改为下一个节点</span>
    597. 

  597. <span class="token keyword">while</span><span class="token punctuation">(</span>treeWalker<span class="token punctuation">.</span><span class="token function">nextNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    598. 

  598.   nodeList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>treeWalker<span class="token punctuation">.</span>currentNode<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// TreeWalker实例有currentNode属性</span>
    599. 

  599. <span class="token punctuation">}</span>
    600. 

  600. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>上面代码遍历<code>&lt;body&gt;</code>节点下属的所有元素节点，将它们插入<code>nodeList</code>数组。</p> <h4 id="_3-20-document-execcommand-document-querycommandsupported-document-querycommandenabled"><a href="#_3-20-document-execcommand-document-querycommandsupported-document-querycommandenabled" class="header-anchor">#</a> 3.20 document.execCommand()，document.queryCommandSupported()，document.queryCommandEnabled()</h4> <h5 id="_1-document-execcommand-执行命令-实现复制文本等功能-富文本编辑器大量使用此方法"><a href="#_1-document-execcommand-执行命令-实现复制文本等功能-富文本编辑器大量使用此方法" class="header-anchor">#</a> （1）document.execCommand() 执行命令（实现复制文本等功能，富文本编辑器大量使用此方法）</h5> <p>概念一： <strong>当一个HTML文档切换到设计模式时，<code>document</code>暴露 <code>execCommand</code> 方法，该方法允许运行命令来操纵<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/contenteditable" target="_blank" rel="noopener noreferrer">可编辑内容区域<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>的元素。</strong></p> <p>概念二： <strong>execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令。处理Html数据时常用</strong></p> <p>概念三：如果<code>document.designMode</code>属性设为<code>on</code>，那么整个文档用户可编辑；如果元素的<code>contenteditable</code>属性设为<code>true</code>，那么该元素可编辑。这两种情况下，可以使用<code>document.execCommand()</code>方法，改变内容的样式，比如<code>document.execCommand('bold')</code>会使得字体加粗。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token function">execCommand</span><span class="token punctuation">(</span>command<span class="token punctuation">,</span> showDefaultUI<span class="token punctuation">,</span> input<span class="token punctuation">)</span>
    601. 

  601. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>该方法接受三个参数。</p> <ul><li><code>command</code>：字符串，表示所要实施的样式。</li> <li><code>showDefaultUI</code>：布尔值，表示是否要使用默认的用户界面，建议总是设为<code>false</code>。</li> <li><code>input</code>：字符串，表示该样式的辅助内容，比如生成超级链接时，这个参数就是所要链接的网址。如果第二个参数设为<code>true</code>，那么浏览器会弹出提示框，要求用户在提示框输入该参数。但是，不是所有浏览器都支持这样做，为了兼容性，还是需要自己部署获取这个参数的方式。</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> url <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token string">'请输入网址'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    602. 

  602. 

  603. <span class="token keyword">if</span> <span class="token punctuation">(</span>url<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    604. 

  604.   document<span class="token punctuation">.</span><span class="token function">execCommand</span><span class="token punctuation">(</span><span class="token string">'createlink'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">,</span> url<span class="token punctuation">)</span><span class="token punctuation">;</span>
    605. 

  605. <span class="token punctuation">}</span>
    606. 

  606. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面代码中，先提示用户输入所要链接的网址，然后手动生成超级链接。注意，第二个参数是<code>false</code>，表示此时不需要自动弹出提示框。</p> <p><code>document.execCommand()</code>的返回值是一个布尔值。如果为<code>false</code>，表示这个方法无法生效。</p> <p>这个方法大部分情况下，只对选中的内容生效。如果有多个内容可编辑区域，那么只对当前焦点所在的元素生效。</p> <p><code>document.execCommand()</code>方法可以执行的样式改变有很多种，下面是其中的一些：bold、insertLineBreak、selectAll、createLink、insertOrderedList、subscript、delete、insertUnorderedList、superscript、formatBlock、insertParagraph、undo、forwardDelete、insertText、unlink、insertImage、italic、unselect、insertHTML、redo。这些值都可以用作第一个参数，它们的含义不难从字面上看出来。</p> <h6 id="命令列表"><a href="#命令列表" class="header-anchor">#</a> 命令列表</h6> <div class="language-css line-numbers-mode"><pre class="language-css"><code>1. 2D-Position 允许通过拖曳移动绝对定位的对象。
    607. 

  607. 

  608. 2. AbsolutePosition 设定元素的 position 属性为“absolute”<span class="token punctuation">(</span>绝对<span class="token punctuation">)</span>。
    609. 

  609. 

  610. 3. BackColor 设置或获取当前选中区的背景颜色。
    611. 

  611. 

  612. 4. BlockDirLTR 目前尚未支持。
    613. 

  613. 

  614. 5. BlockDirRTL 目前尚未支持。
    615. 

  615. 

  616. 6. Bold 切换当前选中区的粗体显示与否。
    617. 

  617. 

  618. 7. BrowseMode 目前尚未支持。
    619. 

  619. 

  620. 8. Copy 将当前选中区复制到剪贴板。
    621. 

  621. 

  622. 9. CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。
    623. 

  623. 

  624. 10.CreateLink 在当前选中区上插入超级链接，或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。
    625. 

  625. 

  626. 11.Cut 将当前选中区复制到剪贴板并删除之。
    627. 

  627. 

  628. 12.Delete 删除当前选中区。
    629. 

  629. 

  630. 13.DirLTR 目前尚未支持。
    631. 

  631. 

  632. 14.DirRTL 目前尚未支持。
    633. 

  633. 

  634. 15.EditMode 目前尚未支持。
    635. 

  635. 

  636. 16.FontName 设置或获取当前选中区的字体。
    637. 

  637. 

  638. 17.FontSize 设置或获取当前选中区的字体大小。
    639. 

  639. 

  640. 18.ForeColor 设置或获取当前选中区的前景<span class="token punctuation">(</span>文本<span class="token punctuation">)</span>颜色。
    641. 

  641. 

  642. 19.FormatBlock 设置当前块格式化标签。
    643. 

  643. 

  644. 20.Indent 增加选中文本的缩进。
    645. 

  645. 

  646. 21.InlineDirLTR 目前尚未支持。
    647. 

  647. 

  648. 22.InlineDirRTL 目前尚未支持。
    649. 

  649. 

  650. 23.InsertButton 用按钮控件覆盖当前选中区。
    651. 

  651. 

  652. 24.InsertFieldset 用方框覆盖当前选中区。
    653. 

  653. 

  654. 25.InsertHorizontalRule 用水平线覆盖当前选中区。
    655. 

  655. 

  656. 26.InsertIFrame 用内嵌框架覆盖当前选中区。
    657. 

  657. 

  658. 27.InsertImage 用图像覆盖当前选中区。
    659. 

  659. 

  660. 28.InsertInputButton 用按钮控件覆盖当前选中区。
    661. 

  661. 

  662. 29.InsertInputCheckbox 用复选框控件覆盖当前选中区。
    663. 

  663. 

  664. 30.InsertInputFileUpload 用文件上载控件覆盖当前选中区。
    665. 

  665. 

  666. 31.InsertInputHidden 插入隐藏控件覆盖当前选中区。
    667. 

  667. 

  668. 32.InsertInputImage 用图像控件覆盖当前选中区。
    669. 

  669. 

  670. 33.InsertInputPassword 用密码控件覆盖当前选中区。
    671. 

  671. 

  672. 34.InsertInputRadio 用单选钮控件覆盖当前选中区。
    673. 

  673. 

  674. 35.InsertInputReset 用重置控件覆盖当前选中区。
    675. 

  675. 

  676. 36.InsertInputSubmit 用提交控件覆盖当前选中区。
    677. 

  677. 

  678. 37.InsertInputText 用文本控件覆盖当前选中区。
    679. 

  679. 

  680. 38.InsertMarquee 用空字幕覆盖当前选中区。
    681. 

  681. 

  682. 39.InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。
    683. 

  683. 

  684. 40.InsertParagraph 用换行覆盖当前选中区。
    685. 

  685. 

  686. 41.InsertSelectDropdown 用下拉框控件覆盖当前选中区。
    687. 

  687. 

  688. 42.InsertSelectListbox 用列表框控件覆盖当前选中区。
    689. 

  689. 

  690. 43.InsertTextArea 用多行文本输入控件覆盖当前选中区。
    691. 

  691. 

  692. 44.InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。
    693. 

  693. 

  694. 45.Italic 切换当前选中区斜体显示与否。
    695. 

  695. 

  696. 46.JustifyCenter 将当前选中区在所在格式化块置中。
    697. 

  697. 

  698. 47.JustifyFull 目前尚未支持。
    699. 

  699. 

  700. 48.JustifyLeft 将当前选中区所在格式化块左对齐。
    701. 

  701. 

  702. 49.JustifyNone 目前尚未支持。
    703. 

  703. 

  704. 50.JustifyRight 将当前选中区所在格式化块右对齐。
    705. 

  705. 

  706. 51.LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观，而不是只在移动或缩放完成后更新。
    707. 

  707. 

  708. 52.MultipleSelection 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素。
    709. 

  709. 

  710. 53.Open 打开。
    711. 

  711. 

  712. 54.Outdent 减少选中区所在格式化块的缩进。
    713. 

  713. 

  714. 55.OverWrite 切换文本状态的插入和覆盖。
    715. 

  715. 

  716. 56.Paste 用剪贴板内容覆盖当前选中区。
    717. 

  717. 

  718. 57.PlayImage 目前尚未支持。
    719. 

  719. 

  720. 58.Print 打开打印对话框以便用户可以打印当前页。
    721. 

  721. 

  722. 59.Redo 重做。
    723. 

  723. 

  724. 60.Refresh 刷新当前文档。
    725. 

  725. 

  726. 61.RemoveFormat 从当前选中区中删除格式化标签。
    727. 

  727. 

  728. 62.RemoveParaFormat 目前尚未支持。
    729. 

  729. 

  730. 63.SaveAs 将当前 Web 页面保存为文件。
    731. 

  731. 

  732. 64.SelectAll 选中整个文档。
    733. 

  733. 

  734. 65.SizeToControl 目前尚未支持。
    735. 

  735. 

  736. 66.SizeToControlHeight 目前尚未支持。
    737. 

  737. 

  738. 67.SizeToControlWidth 目前尚未支持。
    739. 

  739. 

  740. 68.Stop 停止。
    741. 

  741. 

  742. 69.StopImage 目前尚未支持。
    743. 

  743. 

  744. 70.StrikeThrough 目前尚未支持。
    745. 

  745. 

  746. 71.Subscript 目前尚未支持。
    747. 

  747. 

  748. 72.Superscript 目前尚未支持。
    749. 

  749. 

  750. 73.UnBookmark 从当前选中区中删除全部书签。
    751. 

  751. 

  752. 74.Underline 切换当前选中区的下划线显示与否。
    753. 

  753. 

  754. 75.Undo 撤消。
    755. 

  755. 

  756. 76.Unlink 从当前选中区中删除全部超级链接。
    757. 

  757. 

  758. 77.Unselect 清除当前选中区的选中状态。
    759. 

  759. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br></div></div><h5 id="_2-document-querycommandsupported-浏览器是否支持execcommand的某个命令"><a href="#_2-document-querycommandsupported-浏览器是否支持execcommand的某个命令" class="header-anchor">#</a> （2）document.queryCommandSupported() 浏览器是否支持execCommand的某个命令</h5> <p><code>document.queryCommandSupported()</code>方法返回一个布尔值，表示浏览器是否支持<code>document.execCommand()</code>的某个命令。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">queryCommandSupported</span><span class="token punctuation">(</span><span class="token string">'SelectAll'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    760. 

  760.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'浏览器支持选中可编辑区域的所有内容'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    761. 

  761. <span class="token punctuation">}</span>
    762. 

  762. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h5 id="_3-document-querycommandenabled-当前是否可用execcommand的某个命令"><a href="#_3-document-querycommandenabled-当前是否可用execcommand的某个命令" class="header-anchor">#</a> （3）document.queryCommandEnabled() 当前是否可用execCommand的某个命令</h5> <p><code>document.queryCommandEnabled()</code>方法返回一个布尔值，表示当前是否可用<code>document.execCommand()</code>的某个命令。比如，<code>bold</code>（加粗）命令只有存在文本选中时才可用，如果没有选中文本，就不可用。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码为</span>
    763. 

  763. <span class="token comment">// &lt;input type=&quot;button&quot; value=&quot;Copy&quot; onclick=&quot;doCopy()&quot;&gt;</span>
    764. 

  764. 

  765. <span class="token keyword">function</span> <span class="token function">doCopy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    766. 

  766.   <span class="token comment">// 浏览器是否支持 copy 命令（选中内容复制到剪贴板）</span>
    767. 

  767.   <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">queryCommandSupported</span><span class="token punctuation">(</span><span class="token string">'copy'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    768. 

  768.     <span class="token function">copyText</span><span class="token punctuation">(</span><span class="token string">'你好'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    769. 

  769.   <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
    770. 

  770.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'浏览器不支持'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    771. 

  771.   <span class="token punctuation">}</span>
    772. 

  772. <span class="token punctuation">}</span>
    773. 

  773. 

  774. <span class="token keyword">function</span> <span class="token function">copyText</span><span class="token punctuation">(</span><span class="token parameter">text</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    775. 

  775.   <span class="token keyword">var</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'textarea'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    776. 

  776.   document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>input<span class="token punctuation">)</span><span class="token punctuation">;</span>
    777. 

  777.   input<span class="token punctuation">.</span>value <span class="token operator">=</span> text<span class="token punctuation">;</span>
    778. 

  778.   input<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    779. 

  779.   input<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    780. 

  780. 

  781.   <span class="token comment">// 当前是否有选中文字</span>
    782. 

  782.   <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">queryCommandEnabled</span><span class="token punctuation">(</span><span class="token string">'copy'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    783. 

  783.     <span class="token keyword">var</span> success <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">execCommand</span><span class="token punctuation">(</span><span class="token string">'copy'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    784. 

  784.     input<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    785. 

  785.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Copy Ok'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    786. 

  786.   <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    787. 

  787.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'queryCommandEnabled is false'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    788. 

  788.   <span class="token punctuation">}</span>
    789. 

  789. <span class="token punctuation">}</span>
    790. 

  790. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><p>上面代码中，先判断浏览器是否支持<code>copy</code>命令（允许可编辑区域的选中内容，复制到剪贴板），如果支持，就新建一个临时文本框，里面写入内容“你好”，并将其选中。然后，判断是否选中成功，如果成功，就将“你好”复制到剪贴板，再删除那个临时文本框。</p> <h4 id="_3-21-document-getselection"><a href="#_3-21-document-getselection" class="header-anchor">#</a> 3.21 document.getSelection()</h4> <p>这个方法指向<code>window.getSelection()</code>，参见<code>window</code>对象一节的介绍。</p> <h2 id="六、element节点"><a href="#六、element节点" class="header-anchor">#</a> 六、Element节点</h2> <p><strong><code>Element</code>节点对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个<code>Element</code>节点对象（以下简称元素节点）。</strong></p> <p>元素节点的<code>nodeType</code>属性都是<code>1</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> p <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    791. 

  791. p<span class="token punctuation">.</span>nodeName <span class="token comment">// &quot;P&quot;</span>
    792. 

  792. p<span class="token punctuation">.</span>nodeType <span class="token comment">// 1  节点类型 1代表元素节点</span>
    793. 

  793. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><code>Element</code>对象继承了<code>Node</code>接口，因此**<code>Node</code>的属性和方法在<code>Element</code>对象都存在**。此外，<strong>不同的 HTML 元素对应的元素节点是不一样的，浏览器使用不同的构造函数，生成不同的元素节点</strong>，比如<code>&lt;a&gt;</code>元素的节点对象由<code>HTMLAnchorElement</code>构造函数生成，<code>&lt;button&gt;</code>元素的节点对象由<code>HTMLButtonElement</code>构造函数生成。因此，元素节点不是一种对象，而是一组对象，这些对象除了继承<code>Element</code>的属性和方法，还有各自构造函数的属性和方法。</p> <p><strong>元素节点拥有 各自构造函数 的属性和方法，继承<code>Element</code>的属性和方法，同时继承<code>Node</code>的属性和方法。</strong></p> <h3 id="_1、实例属性"><a href="#_1、实例属性" class="header-anchor">#</a> 1、实例属性</h3> <h4 id="_1-1-元素特性的相关属性"><a href="#_1-1-元素特性的相关属性" class="header-anchor">#</a> 1.1 元素特性的相关属性</h4> <h5 id="_1-element-id-返回元素id属性-可读写"><a href="#_1-element-id-返回元素id属性-可读写" class="header-anchor">#</a> （1）Element.id 返回元素ID属性，可读写</h5> <p><code>Element.id</code>属性<strong>返回指定元素的<code>id</code>属性，该属性可读写。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码为 &lt;p id=&quot;foo&quot;&gt;</span>
    794. 

  794. <span class="token keyword">var</span> p <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    795. 

  795. p<span class="token punctuation">.</span>id <span class="token comment">// &quot;foo&quot;</span>
    796. 

  796. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>注意，<code>id</code>属性的值是<strong>大小写敏感</strong>，即浏览器能正确识别<code>&lt;p id=&quot;foo&quot;&gt;</code>和<code>&lt;p id=&quot;FOO&quot;&gt;</code>这两个元素的<code>id</code>属性，但是最好不要这样命名。</p> <h5 id="_2-element-tagname-返回元素的大写标签"><a href="#_2-element-tagname-返回元素的大写标签" class="header-anchor">#</a> （2）Element.tagName 返回元素的大写标签</h5> <p><code>Element.tagName</code>属性<strong>返回指定元素的大写标签名，与<code>nodeName</code>属性的值相等。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML代码为</span>
    797. 

  797. <span class="token comment">// &lt;span id=&quot;myspan&quot;&gt;Hello&lt;/span&gt;</span>
    798. 

  798. <span class="token keyword">var</span> span <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myspan'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    799. 

  799. span<span class="token punctuation">.</span>id <span class="token comment">// &quot;myspan&quot;</span>
    800. 

  800. span<span class="token punctuation">.</span>tagName <span class="token comment">// &quot;SPAN&quot;</span>
    801. 

  801. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h5 id="_3-element-dir-元素的文字方向-可读写-ltr、rtl"><a href="#_3-element-dir-元素的文字方向-可读写-ltr、rtl" class="header-anchor">#</a> （3）Element.dir 元素的文字方向，可读写（ltr、rtl）</h5> <p><code>Element.dir</code>属性<strong>用于读写当前元素的文字方向</strong>，可能是从左到右（<code>&quot;ltr&quot;</code>），也可能是从右到左（<code>&quot;rtl&quot;</code>）。</p> <h5 id="_4-element-accesskey-分配给当前元素的快捷键-可读写"><a href="#_4-element-accesskey-分配给当前元素的快捷键-可读写" class="header-anchor">#</a> （4）Element.accessKey 分配给当前元素的快捷键，可读写</h5> <p><code>Element.accessKey</code>属性<strong>用于读写分配给当前元素的快捷键</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    802. 

  802. <span class="token comment">// &lt;button accesskey=&quot;h&quot; id=&quot;btn&quot;&gt;点击&lt;/button&gt;</span>
    803. 

  803. <span class="token keyword">var</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'btn'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    804. 

  804. btn<span class="token punctuation">.</span>accessKey <span class="token comment">// &quot;h&quot;</span>
    805. 

  805. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>上面代码中，<code>btn</code>元素的快捷键是<code>h</code>，按下<code>Alt + h</code>就能将焦点转移到它上面。</p> <h5 id="_5-element-draggable-当前元素是否可拖动-布尔值-可读写"><a href="#_5-element-draggable-当前元素是否可拖动-布尔值-可读写" class="header-anchor">#</a> （5）Element.draggable 当前元素是否可拖动，布尔值，可读写</h5> <p><code>Element.draggable</code>属性<strong>返回一个布尔值，表示当前元素是否可拖动。该属性可读写。</strong></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">draggable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ondragstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>drag(this)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>这是一段可移动的段落。<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    806. 

  806. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    807. 

  807.     <span class="token keyword">function</span> <span class="token function">drag</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    808. 

  808.       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>el<span class="token punctuation">.</span>draggable<span class="token punctuation">)</span> <span class="token comment">// true</span>
    809. 

  809.     <span class="token punctuation">}</span>
    810. 

  810. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    811. 

  811. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h5 id="_6-element-lang-返回当前元素的语言设置-可读写"><a href="#_6-element-lang-返回当前元素的语言设置-可读写" class="header-anchor">#</a> （6）Element.lang 返回当前元素的语言设置，可读写</h5> <p><code>Element.lang</code>属性<strong>返回当前元素的语言设置。该属性可读写。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    812. 

  812. <span class="token comment">// &lt;html lang=&quot;en&quot;&gt;</span>
    813. 

  813. document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>lang <span class="token comment">// &quot;en&quot;</span>
    814. 

  814. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h5 id="_7-element-tabindex-当前元素在-tab-键遍历时的顺序-整数-可读写"><a href="#_7-element-tabindex-当前元素在-tab-键遍历时的顺序-整数-可读写" class="header-anchor">#</a> （7）Element.tabIndex 当前元素在 Tab 键遍历时的顺序，整数，可读写</h5> <p><code>Element.tabIndex</code>属性<strong>返回一个整数，表示当前元素在 Tab 键遍历时的顺序。该属性可读写。</strong></p> <p><code>tabIndex</code>属性值<strong>如果是负值（通常是<code>-1</code>），则 Tab 键不会遍历到该元素</strong>。如果是正整数，则按照顺序，从小到大遍历。如果两个元素的<code>tabIndex</code>属性的正整数值相同，则按照出现的顺序遍历。遍历完所有<code>tabIndex</code>为正整数的元素以后，再遍历所有<code>tabIndex</code>等于<code>0</code>、或者属性值是非法值、或者没有<code>tabIndex</code>属性的元素，顺序为它们在网页中出现的顺序。</p> <h5 id="_8-element-title-当前元素的-html-属性title-可读写"><a href="#_8-element-title-当前元素的-html-属性title-可读写" class="header-anchor">#</a> （8）Element.title 当前元素的 HTML 属性<code>title</code>，可读写</h5> <p><code>Element.title</code>属性<strong>用来读写当前元素的 HTML 属性<code>title</code>。该属性通常用来指定，鼠标悬浮时弹出的文字提示框。</strong></p> <h4 id="_1-2-元素状态的相关属性"><a href="#_1-2-元素状态的相关属性" class="header-anchor">#</a> 1.2 元素状态的相关属性</h4> <h5 id="_1-element-hidden-当前元素的hidden属性-控制是否可见-布尔值-可读写"><a href="#_1-element-hidden-当前元素的hidden属性-控制是否可见-布尔值-可读写" class="header-anchor">#</a> （1）Element.hidden 当前元素的hidden属性，控制是否可见，布尔值，可读写</h5> <p><code>Element.hidden</code>属性<strong>返回一个布尔值，表示当前元素的<code>hidden</code>属性，用来控制当前元素是否可见。该属性可读写。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'btn'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    815. 

  815. <span class="token keyword">var</span> mydiv <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'mydiv'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    816. 

  816. 

  817. btn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    818. 

  818.   mydiv<span class="token punctuation">.</span>hidden <span class="token operator">=</span> <span class="token operator">!</span>mydiv<span class="token punctuation">.</span>hidden<span class="token punctuation">;</span>
    819. 

  819. <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    820. 

  820. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong>注意，该属性与 CSS 设置是互相独立的</strong>。CSS 对这个元素可见性的设置，<code>Element.hidden</code>并不能反映出来。也就是说，这个属性并不能用来判断当前元素的实际可见性。</p> <p>**CSS 的设置高于<code>Element.hidden</code>。**如果 CSS 指定了该元素不可见（<code>display: none</code>）或可见（<code>display: hidden</code>），那么<code>Element.hidden</code>并不能改变该元素实际的可见性。换言之，<strong>这个属性只在 CSS 没有明确设定当前元素的可见性时才有效。</strong></p> <h5 id="_2-element-contenteditable元素内容的可编辑性-字符串-可读写"><a href="#_2-element-contenteditable元素内容的可编辑性-字符串-可读写" class="header-anchor">#</a> （2）Element.contentEditable元素内容的可编辑性，字符串，可读写，</h5> <h5 id="element-iscontenteditable-元素内容是否可编辑-布尔值-只读"><a href="#element-iscontenteditable-元素内容是否可编辑-布尔值-只读" class="header-anchor">#</a> Element.isContentEditable 元素内容是否可编辑，布尔值，只读</h5> <p>HTML 元素可以设置<code>contentEditable</code>属性，使得元素的内容可以编辑。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">contenteditable</span><span class="token punctuation">&gt;</span></span>123<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    821. 

  821. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码中，<code>&lt;div&gt;</code>元素有<code>contenteditable</code>属性，因此用户可以在网页上编辑这个区块的内容。</p> <p><code>Element.contentEditable</code>属性返回一个字符串，表示是否设置了<code>contenteditable</code>属性，有三种可能的值。该属性可写。</p> <ul><li><code>&quot;true&quot;</code>：元素内容可编辑</li> <li><code>&quot;false&quot;</code>：元素内容不可编辑</li> <li><code>&quot;inherit&quot;</code>：元素是否可编辑，继承了父元素的设置</li></ul> <p><code>Element.isContentEditable</code>属性返回一个布尔值，同样表示是否设置了<code>contenteditable</code>属性。该属性只读。</p> <h4 id="_1-3-element-attributes-类数组-成员是元素的所有html属性节点"><a href="#_1-3-element-attributes-类数组-成员是元素的所有html属性节点" class="header-anchor">#</a> 1.3 Element.attributes 类数组，成员是元素的所有HTML属性节点</h4> <p><code>Element.attributes</code>属性<strong>返回一个类似数组的对象，成员是当前元素节点的所有属性节点</strong>，详见《属性的操作》一章。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> p <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    822. 

  822. <span class="token keyword">var</span> attrs <span class="token operator">=</span> p<span class="token punctuation">.</span>attributes<span class="token punctuation">;</span>
    823. 

  823. 

  824. <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> attrs<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&gt;=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    825. 

  825.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>attrs<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">'-&gt;'</span> <span class="token operator">+</span> attrs<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    826. 

  826. <span class="token punctuation">}</span>
    827. 

  827. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>上面代码遍历<code>p</code>元素的所有属性。</p> <h4 id="_1-4-element-classname-元素的class-element-classlist-类数组-成员是各class-有自身方法"><a href="#_1-4-element-classname-元素的class-element-classlist-类数组-成员是各class-有自身方法" class="header-anchor">#</a> 1.4 Element.className 元素的class，Element.classList 类数组，成员是各class，有自身方法</h4> <p><code>className</code>属性**用来读写当前元素节点的<code>class</code>属性。**它的值是一个字符串，每个<code>class</code>之间用空格分割。</p> <p><code>classList</code>属性<strong>返回一个类似数组的对象，当前元素节点的每个<code>class</code>就是这个对象的一个成员。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码 &lt;div class=&quot;one two three&quot; id=&quot;myDiv&quot;&gt;&lt;/div&gt;</span>
    828. 

  828. <span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myDiv'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    829. 

  829. 

  830. div<span class="token punctuation">.</span>className
    831. 

  831. <span class="token comment">// &quot;one two three&quot;</span>
    832. 

  832. 

  833. div<span class="token punctuation">.</span>classList
    834. 

  834. <span class="token comment">// {</span>
    835. 

  835. <span class="token comment">//   0: &quot;one&quot;</span>
    836. 

  836. <span class="token comment">//   1: &quot;two&quot;</span>
    837. 

  837. <span class="token comment">//   2: &quot;three&quot;</span>
    838. 

  838. <span class="token comment">//   length: 3</span>
    839. 

  839. <span class="token comment">// }</span>
    840. 

  840. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>上面代码中，<code>className</code>属性返回一个空格分隔的字符串，而<code>classList</code>属性指向一个类似数组的对象，该对象的<code>length</code>属性（只读）返回当前元素的<code>class</code>数量。</p> <h6 id="classlist对象有下列方法。"><a href="#classlist对象有下列方法。" class="header-anchor">#</a> <code>classList</code>对象有下列方法。</h6> <ul><li><strong><code>add()</code>：增加一个 class。</strong></li> <li><strong><code>remove()</code>：移除一个 class。</strong></li> <li><strong><code>contains()</code>：检查当前元素是否包含某个 class。</strong></li> <li><strong><code>toggle()</code>：将某个 class 移入或移出当前元素。</strong></li> <li><strong><code>item()</code>：返回指定索引位置的 class。</strong></li> <li><strong><code>toString()</code>：将 class 的列表转为字符串。</strong></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myDiv'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    841. 

  841. 

  842. div<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'myCssClass'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    843. 

  843. div<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token string">'bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    844. 

  844. div<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'myCssClass'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    845. 

  845. div<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">'myCssClass'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 如果 myCssClass 不存在就加入，否则移除</span>
    846. 

  846. div<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">'myCssClass'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回 true 或者 false</span>
    847. 

  847. div<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回第一个 Class</span>
    848. 

  848. div<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    849. 

  849. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>下面比较一下，<code>className</code>和<code>classList</code>在添加和删除某个 class 时的写法。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> foo <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    850. 

  850. 

  851. <span class="token comment">// 添加class</span>
    852. 

  852. foo<span class="token punctuation">.</span>className <span class="token operator">+=</span> <span class="token string">'bold'</span><span class="token punctuation">;</span>
    853. 

  853. foo<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'bold'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    854. 

  854. 

  855. <span class="token comment">// 删除class</span>
    856. 

  856. foo<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'bold'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    857. 

  857. foo<span class="token punctuation">.</span>className <span class="token operator">=</span> foo<span class="token punctuation">.</span>className<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^bold$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    858. 

  858. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>**<code>toggle</code>方法可以接受一个布尔值，作为第二个参数。**如果为<code>true</code>，则添加该属性；如果为<code>false</code>，则去除该属性。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>el<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">'abc'</span><span class="token punctuation">,</span> boolValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
    859. 

  859. 

  860. <span class="token comment">// 等同于</span>
    861. 

  861. <span class="token keyword">if</span> <span class="token punctuation">(</span>boolValue<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    862. 

  862.   el<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'abc'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    863. 

  863. <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    864. 

  864.   el<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'abc'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    865. 

  865. <span class="token punctuation">}</span>
    866. 

  866. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h4 id="_1-5-element-dataset-返回一个对象-读写元素的data-属性"><a href="#_1-5-element-dataset-返回一个对象-读写元素的data-属性" class="header-anchor">#</a> 1.5 Element.dataset 返回一个对象，读写元素的data-属性</h4> <p>网页元素可以自定义<code>data-</code>属性，用来添加数据。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>div data<span class="token operator">-</span>timestamp<span class="token operator">=</span><span class="token string">&quot;1522907809292&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    867. 

  867. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码中，<code>&lt;div&gt;</code>元素有一个自定义的<code>data-timestamp</code>属性，用来为该元素添加一个时间戳。</p> <p><code>Element.dataset</code>属性<strong>返回一个对象，可以从这个对象读写<code>data-</code>属性。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// &lt;article</span>
    868. 

  868. <span class="token comment">//   id=&quot;foo&quot;</span>
    869. 

  869. <span class="token comment">//   data-columns=&quot;3&quot;</span>
    870. 

  870. <span class="token comment">//   data-index-number=&quot;12314&quot;</span>
    871. 

  871. <span class="token comment">//   data-parent=&quot;cars&quot;&gt;</span>
    872. 

  872. <span class="token comment">//   ...</span>
    873. 

  873. <span class="token comment">// &lt;/article&gt;</span>
    874. 

  874. <span class="token keyword">var</span> article <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    875. 

  875. article<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>columns <span class="token comment">// &quot;3&quot;</span>
    876. 

  876. article<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>indexNumber <span class="token comment">// &quot;12314&quot;</span>
    877. 

  877. article<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>parent <span class="token comment">// &quot;cars&quot;</span>
    878. 

  878. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>注意，<code>dataset</code>上面的各个属性返回都是字符串。</p> <p>HTML 代码中，<code>data-</code>属性的属性名，只能包含英文字母、数字、连词线（<code>-</code>）、点（<code>.</code>）、冒号（<code>:</code>）和下划线（<code>_</code>）。它们转成 JavaScript 对应的<code>dataset</code>属性名，<strong>规则如下</strong>。</p> <ul><li><strong>开头的<code>data-</code>会省略。</strong></li> <li><strong>如果连词线后面跟了一个英文字母，那么连词线会取消，该字母变成大写。</strong></li> <li><strong>其他字符不变。</strong></li></ul> <p>因此，<code>data-abc-def</code>对应<code>dataset.abcDef</code>，<code>data-abc-1</code>对应<code>dataset[&quot;abc-1&quot;]</code>。</p> <p>除了使用<code>dataset</code>读写<code>data-</code>属性，也<strong>可以使用<code>Element.getAttribute()</code>和<code>Element.setAttribute()</code>，通过完整的属性名读写这些属性。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> mydiv <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'mydiv'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    879. 

  879. 

  880. mydiv<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>foo <span class="token operator">=</span> <span class="token string">'bar'</span><span class="token punctuation">;</span>
    881. 

  881. mydiv<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'data-foo'</span><span class="token punctuation">)</span> <span class="token comment">// &quot;bar&quot;</span>
    882. 

  882. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="_1-6-element-innerhtml-返回一个字符串-是元素包含的所有-html-代码-可读写"><a href="#_1-6-element-innerhtml-返回一个字符串-是元素包含的所有-html-代码-可读写" class="header-anchor">#</a> 1.6 Element.innerHTML 返回一个字符串，是元素包含的所有 HTML 代码，可读写</h4> <p><code>Element.innerHTML</code>属性<strong>返回一个字符串，等同于该元素包含的所有 HTML 代码</strong>。该属性<strong>可读写</strong>，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<code>&lt;HTML&gt;</code>和<code>&lt;body&gt;</code>元素。</p> <p>如果将<code>innerHTML</code>属性设为空，等于删除所有它包含的所有节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>el<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
    883. 

  883. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码等于将<code>el</code>节点变成了一个空节点，<code>el</code>原来包含的节点被全部删除。</p> <p>注意，读取属性值的时候，如果文本节点包含<code>&amp;</code>、小于号（<code>&lt;</code>）和大于号（<code>&gt;</code>），<code>innerHTML</code>属性会将它们转为实体形式 <code>&amp; amp;</code>、<code>&amp; lt;</code>、<code>&amp; gt;</code> 。如果想得到原文，建议使用<code>element.textContent</code>属性。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML代码如下 &lt;p id=&quot;para&quot;&gt; 5 &gt; 3 &lt; 6 &amp;&lt;/p&gt;</span>
    884. 

  884. document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'para'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML
    885. 

  885. <span class="token comment">// 5 &amp;gt; 3 &amp;lt; &amp;amp;</span>
    886. 

  886. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>写入的时候，如果插入的<strong>文本包含 HTML 标签，会被解析成为节点对象插入 DOM</strong>。注意，如果文本之中含有<code>&lt;script&gt;</code>标签，虽然可以生成<code>script</code>节点，但是插入的代码不会执行。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">&quot;&lt;script&gt;alert('haha')&lt;/script&gt;&quot;</span><span class="token punctuation">;</span> <span class="token comment">// 插入包含js代码字符串，插入后js不会执行</span>
    887. 

  887. el<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> name<span class="token punctuation">;</span>
    888. 

  888. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码将脚本插入内容，脚本并不会执行。但是，<code>innerHTML</code>还是有安全风险的。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">&quot;&lt;img src=x onerror=alert(1)&gt;&quot;</span><span class="token punctuation">;</span>
    889. 

  889. el<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> name<span class="token punctuation">;</span>
    890. 

  890. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码中，<code>alert</code>方法是会执行的。<strong>因此为了安全考虑，如果插入的是文本，最好用<code>textContent</code>属性代替<code>innerHTML</code>。</strong></p> <h4 id="_1-7-element-outerhtml-返回一个字符串-包含元素本身和所有子元素的html代码-可读写"><a href="#_1-7-element-outerhtml-返回一个字符串-包含元素本身和所有子元素的html代码-可读写" class="header-anchor">#</a> 1.7 Element.outerHTML 返回一个字符串，包含元素本身和所有子元素的HTML代码，可读写</h4> <p><code>Element.outerHTML</code>属性<strong>返回一个字符串，表示当前元素节点的所有 HTML 代码，包括该元素本身和所有子元素。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    891. 

  891. <span class="token comment">// &lt;div id=&quot;d&quot;&gt;&lt;p&gt;Hello&lt;/p&gt;&lt;/div&gt;</span>
    892. 

  892. <span class="token keyword">var</span> d <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'d'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    893. 

  893. d<span class="token punctuation">.</span>outerHTML
    894. 

  894. <span class="token comment">// '&lt;div id=&quot;d&quot;&gt;&lt;p&gt;Hello&lt;/p&gt;&lt;/div&gt;'</span>
    895. 

  895. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><code>outerHTML</code>属性是<strong>可读写</strong>的，<strong>对它进行赋值，等于替换掉当前元素。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    896. 

  896. <span class="token comment">// &lt;div id=&quot;container&quot;&gt;&lt;div id=&quot;d&quot;&gt;Hello&lt;/div&gt;&lt;/div&gt;</span>
    897. 

  897. <span class="token keyword">var</span> container <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'container'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    898. 

  898. <span class="token keyword">var</span> d <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'d'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    899. 

  899. container<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>nodeName <span class="token comment">// &quot;DIV&quot;</span>
    900. 

  900. d<span class="token punctuation">.</span>nodeName <span class="token comment">// &quot;DIV&quot;</span>
    901. 

  901. 

  902. d<span class="token punctuation">.</span>outerHTML <span class="token operator">=</span> <span class="token string">'&lt;p&gt;Hello&lt;/p&gt;'</span><span class="token punctuation">;</span> <span class="token comment">//div替换成p标签</span>
    903. 

  903. container<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>nodeName <span class="token comment">// &quot;P&quot;</span>
    904. 

  904. d<span class="token punctuation">.</span>nodeName <span class="token comment">// &quot;DIV&quot;  但是变量b依旧指向原来的div元素，还存在于内存中</span>
    905. 

  905. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>上面代码中，变量<code>d</code>代表子节点，它的<code>outerHTML</code>属性重新赋值以后，内层的<code>div</code>元素就不存在了，被<code>p</code>元素替换了。但是，<strong>变量<code>d</code>依然指向原来的<code>div</code>元素，这表示被替换的<code>DIV</code>元素还存在于内存中。</strong></p> <p>注意，如果一个<strong>节点没有父节点，设置<code>outerHTML</code>属性会报错</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    906. 

  906. div<span class="token punctuation">.</span>outerHTML <span class="token operator">=</span> <span class="token string">'&lt;p&gt;test&lt;/p&gt;'</span><span class="token punctuation">;</span>
    907. 

  907. <span class="token comment">// DOMException: This element has no parent node.</span>
    908. 

  908. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码中，<code>div</code>元素没有父节点，设置<code>outerHTML</code>属性会报错。</p> <h4 id="_1-8-element-clientheight-元素高度-element-clientwidth元素宽度"><a href="#_1-8-element-clientheight-元素高度-element-clientwidth元素宽度" class="header-anchor">#</a> 1.8 Element.clientHeight 元素高度，Element.clientWidth元素宽度</h4> <p><code>Element.clientHeight</code>属性返回一个整数值，表示<strong>元素节点的 CSS 高度</strong>（单位像素），<strong>只对块级元素生效，对于行内元素返回<code>0</code></strong>。如果块级元素没有设置 CSS 高度，则返回实际高度。</p> <p>除了元素本身的高度，它还<strong>包括<code>padding</code>部分</strong>，但是不包括<code>border</code>、<code>margin</code>。如果有水平滚动条，还要减去水平滚动条的高度。注意，这个值始终是整数，如果是小数会被四舍五入。</p> <p><code>Element.clientWidth</code>属性返回<strong>元素节点的 CSS 宽度，同样只对块级元素有效</strong>，也是只包括元素本身的宽度和<code>padding</code>，如果有垂直滚动条，还要减去垂直滚动条的宽度。</p> <p><code>document.documentElement</code>的<code>clientHeight</code>属性，返回当前视口的高度（即浏览器窗口的高度），等同于<code>window.innerHeight</code>属性减去水平滚动条的高度（如果有的话）。<code>document.body</code>的高度则是网页的实际高度。一般来说，<code>document.body.clientHeight</code>大于<code>document.documentElement.clientHeight</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 视口高度  不包括不可见的部分</span>
    909. 

  909. document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight
    910. 

  910. 

  911. <span class="token comment">// 网页总高度</span>
    912. 

  912. document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>clientHeight
    913. 

  913. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="_1-9-element-clientleft-左边框宽度-element-clienttop上边框宽"><a href="#_1-9-element-clientleft-左边框宽度-element-clienttop上边框宽" class="header-anchor">#</a> 1.9 Element.clientLeft 左边框宽度，Element.clientTop上边框宽</h4> <p><code>Element.clientLeft</code>属性等于元素节点<strong>左边框（left border）的宽度</strong>（单位像素），不包括左侧的<code>padding</code>和<code>margin</code>。如果没有设置左边框，或者是行内元素（<code>display: inline</code>），该属性返回<code>0</code>。该属性总是返回整数值，如果是小数，会四舍五入。</p> <p><code>Element.clientTop</code>属性等于网页元素<strong>顶部边框的宽度</strong>（单位像素），其他特点都与<code>clientLeft</code>相同。</p> <h4 id="_1-10-element-scrollheight-元素总高度-element-scrollwidth-元素总宽度"><a href="#_1-10-element-scrollheight-元素总高度-element-scrollwidth-元素总宽度" class="header-anchor">#</a> 1.10 Element.scrollHeight 元素总高度，Element.scrollWidth 元素总宽度</h4> <p><code>Element.scrollHeight</code>属性返回一个整数值（小数会四舍五入），表示当前<strong>元素的总高度</strong>（单位像素），<strong>包括溢出容器、当前不可见的部分。它包括<code>padding</code></strong>，但是不包括<code>border</code>、<code>margin</code>以及水平滚动条的高度（如果有水平滚动条的话），还包括伪元素（<code>::before</code>或<code>::after</code>）的高度。</p> <p><code>Element.scrollWidth</code>属性表示当前<strong>元素的总宽度</strong>（单位像素），其他地方都与<code>scrollHeight</code>属性类似。这两个属性只读。</p> <p><strong>整张网页的总高度</strong>可以从<code>document.documentElement</code>或<code>document.body</code>上读取。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 返回网页的总高度</span>
    914. 

  914. document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollHeight
    915. 

  915. document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollHeight
    916. 

  916. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>注意，如果元素节点的内容出现溢出，即使溢出的内容是隐藏的，<code>scrollHeight</code>属性仍然返回元素的总高度。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    917. 

  917. <span class="token comment">// &lt;div id=&quot;myDiv&quot; style=&quot;height: 200px; overflow: hidden;&quot;&gt;...&lt;div&gt;</span>
    918. 

  918. document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myDiv'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>scrollHeight <span class="token comment">// 356</span>
    919. 

  919. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码中，即使<code>myDiv</code>元素的 CSS 高度只有200像素，且溢出部分不可见，但是<code>scrollHeight</code>仍然会返回该元素的原始高度。</p> <h4 id="_1-11-element-scrollleft-元素水平滚动条右侧滚动的像素量-element-scrolltop-元素垂直滚动条向下滚动的像素量"><a href="#_1-11-element-scrollleft-元素水平滚动条右侧滚动的像素量-element-scrolltop-元素垂直滚动条向下滚动的像素量" class="header-anchor">#</a> 1.11 Element.scrollLeft 元素水平滚动条右侧滚动的像素量，Element.scrollTop 元素垂直滚动条向下滚动的像素量</h4> <p><code>Element.scrollLeft</code>属性表示<strong>当前元素的水平滚动条向右侧滚动的像素数量</strong>，<code>Element.scrollTop</code>属性表示<strong>当前元素的垂直滚动条向下滚动的像素数量</strong>。对于那些没有滚动条的网页元素，这两个属性总是等于0。</p> <p>如果要查看整张网页的水平的和垂直的滚动距离，要从<code>document.documentElement</code>元素上读取。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollLeft
    920. 

  920. document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop
    921. 

  921. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>这两个属性都<strong>可读写</strong>，设置该属性的值，会导致浏览器将当前元素自动滚动到相应的位置。</p> <h4 id="_1-12-element-offsetparent-返回最靠近当前元素的、并且-css-的position属性不等于static的上层元素"><a href="#_1-12-element-offsetparent-返回最靠近当前元素的、并且-css-的position属性不等于static的上层元素" class="header-anchor">#</a> 1.12 Element.offsetParent 返回最靠近当前元素的、并且 CSS 的<code>position</code>属性不等于<code>static</code>的上层元素</h4> <p><code>Element.offsetParent</code>属性<strong>返回最靠近当前元素的、并且 CSS 的<code>position</code>属性不等于<code>static</code>的上层元素</strong>。</p> <blockquote><p>position:static; 即默认没有定位的样式。</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>div style<span class="token operator">=</span><span class="token string">&quot;position: absolute;&quot;</span><span class="token operator">&gt;</span>
    922. 

  922.   <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span>
    923. 

  923.     <span class="token operator">&lt;</span>span<span class="token operator">&gt;</span>Hello<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
    924. 

  924.   <span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
    925. 

  925. <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    926. 

  926. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面代码中，<code>span</code>元素的<code>offsetParent</code>属性就是<code>div</code>元素。</p> <p><strong>该属性主要用于确定子元素位置偏移的计算基准</strong>，<code>Element.offsetTop</code>和<code>Element.offsetLeft</code>就是<code>offsetParent</code>元素计算的。</p> <p>如果该元素是不可见的（<code>display</code>属性为<code>none</code>），或者位置是固定的（<code>position</code>属性为<code>fixed</code>），则<code>offsetParent</code>属性返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>div style<span class="token operator">=</span><span class="token string">&quot;position: absolute;&quot;</span><span class="token operator">&gt;</span>
    927. 

  927.   <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span>
    928. 

  928.     <span class="token operator">&lt;</span>span style<span class="token operator">=</span><span class="token string">&quot;display: none;&quot;</span><span class="token operator">&gt;</span>Hello<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
    929. 

  929.   <span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
    930. 

  930. <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    931. 

  931. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面代码中，<code>span</code>元素的<code>offsetParent</code>属性是<code>null</code>。</p> <p>如果某个元素的所有上层节点的<code>position</code>属性都是<code>static</code>，则<code>Element.offsetParent</code>属性指向<code>&lt;body&gt;</code>元素。</p> <h4 id="_1-13-element-offsetheight-元素的css垂直高度-element-offsetwidth元素的css水平宽度"><a href="#_1-13-element-offsetheight-元素的css垂直高度-element-offsetwidth元素的css水平宽度" class="header-anchor">#</a> 1.13 Element.offsetHeight 元素的CSS垂直高度，Element.offsetWidth元素的CSS水平宽度</h4> <p><code>Element.offsetHeight</code>属性返回一个整数，表示<strong>元素的 CSS 垂直高度</strong>（单位像素），**包括元素本身的高度、padding 和 border，以及水平滚动条的高度（**如果存在滚动条）。</p> <p><code>Element.offsetWidth</code>属性表示<strong>元素的 CSS 水平宽度</strong>（单位像素），其他都与<code>Element.offsetHeight</code>一致。</p> <p>这两个属性都是<strong>只读属性</strong>，只比<code>Element.clientHeight</code>和<code>Element.clientWidth</code>多了边框的高度或宽度。如果元素的 CSS 设为不可见（比如<code>display: none;</code>），则返回<code>0</code>。</p> <h4 id="_1-14-element-offsetleft-水平位移-element-offsettop-垂直位移"><a href="#_1-14-element-offsetleft-水平位移-element-offsettop-垂直位移" class="header-anchor">#</a> 1.14 Element.offsetLeft 水平位移，Element.offsetTop 垂直位移</h4> <p><code>Element.offsetLeft</code>返回当前<strong>元素左上角相对于<code>Element.offsetParent</code>节点的水平位移</strong>，<code>Element.offsetTop</code>返回<strong>垂直位移</strong>，单位为像素。通常，这两个值是指相对于父节点的位移。</p> <p>下面的代码可以算出元素左上角相对于整张网页的坐标。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">getElementPosition</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    932. 

  932.   <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    933. 

  933.   <span class="token keyword">var</span> y <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    934. 

  934.   <span class="token keyword">while</span> <span class="token punctuation">(</span>e <span class="token operator">!==</span> <span class="token keyword">null</span><span class="token punctuation">)</span>  <span class="token punctuation">{</span>
    935. 

  935.     x <span class="token operator">+=</span> e<span class="token punctuation">.</span>offsetLeft<span class="token punctuation">;</span>
    936. 

  936.     y <span class="token operator">+=</span> e<span class="token punctuation">.</span>offsetTop<span class="token punctuation">;</span>
    937. 

  937.     e <span class="token operator">=</span> e<span class="token punctuation">.</span>offsetParent<span class="token punctuation">;</span>
    938. 

  938.   <span class="token punctuation">}</span>
    939. 

  939.   <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token literal-property property">x</span><span class="token operator">:</span> x<span class="token punctuation">,</span> <span class="token literal-property property">y</span><span class="token operator">:</span> y<span class="token punctuation">}</span><span class="token punctuation">;</span>
    940. 

  940. <span class="token punctuation">}</span>
    941. 

  941. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h4 id="_1-15-element-style-返回cssstyledeclaration实例-用于操作css"><a href="#_1-15-element-style-返回cssstyledeclaration实例-用于操作css" class="header-anchor">#</a> 1.15 Element.style 返回CSSStyleDeclaration实例，用于操作CSS</h4> <p>每个元素节点都有<code>style</code>用来读写该<strong>元素的行内样式信息</strong>，具体介绍参见《CSS 操作》一章。</p> <h4 id="_1-16-element-children-类数组-所有子元素-element-childelementcount-子元素个数"><a href="#_1-16-element-children-类数组-所有子元素-element-childelementcount-子元素个数" class="header-anchor">#</a> 1.16 Element.children 类数组，所有子元素，Element.childElementCount 子元素个数</h4> <p><code>Element.children</code>属性<strong>返回一个类似数组的对象（<code>HTMLCollection</code>实例），包括当前元素节点的所有子元素</strong>。如果当前元素没有子元素，则返回的对象包含零个成员。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>para<span class="token punctuation">.</span>children<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    942. 

  942.   <span class="token keyword">var</span> children <span class="token operator">=</span> para<span class="token punctuation">.</span>children<span class="token punctuation">;</span>
    943. 

  943.     <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> children<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    944. 

  944.       <span class="token comment">// ...</span>
    945. 

  945.     <span class="token punctuation">}</span>
    946. 

  946. <span class="token punctuation">}</span>
    947. 

  947. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>上面代码遍历了<code>para</code>元素的所有子元素。</p> <p>这个属性与<code>Node.childNodes</code>属性的区别是，它只包括元素类型的子节点，不包括其他类型的子节点。</p> <p><code>Element.childElementCount</code>属性返回当前元素节点包含的<strong>子元素节点的个数</strong>，与<code>Element.children.length</code>的值相同。</p> <h4 id="_1-17-element-firstelementchild-首个子元素-element-lastelementchild-最后一个子元素"><a href="#_1-17-element-firstelementchild-首个子元素-element-lastelementchild-最后一个子元素" class="header-anchor">#</a> 1.17 Element.firstElementChild 首个子元素，Element.lastElementChild 最后一个子元素</h4> <p><code>Element.firstElementChild</code>属性返回当前元素的第一个元素子节点，<code>Element.lastElementChild</code>返回最后一个元素子节点。</p> <p>如果没有元素子节点，这两个属性返回<code>null</code>。</p> <h4 id="_1-18-element-nextelementsibling后一个兄弟元素节点-element-previouselementsibling上一个兄弟元素节点"><a href="#_1-18-element-nextelementsibling后一个兄弟元素节点-element-previouselementsibling上一个兄弟元素节点" class="header-anchor">#</a> 1.18 Element.nextElementSibling后一个兄弟元素节点，Element.previousElementSibling上一个兄弟元素节点</h4> <p><code>Element.nextElementSibling</code>属性返回当前元素节点的<strong>后一个同级元素节点</strong>，如果没有则返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    948. 

  948. <span class="token comment">// &lt;div id=&quot;div-01&quot;&gt;Here is div-01&lt;/div&gt;</span>
    949. 

  949. <span class="token comment">// &lt;div id=&quot;div-02&quot;&gt;Here is div-02&lt;/div&gt;</span>
    950. 

  950. <span class="token keyword">var</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'div-01'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    951. 

  951. el<span class="token punctuation">.</span>nextElementSibling
    952. 

  952. <span class="token comment">// &lt;div id=&quot;div-02&quot;&gt;Here is div-02&lt;/div&gt;</span>
    953. 

  953. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><code>Element.previousElementSibling</code>属性返回当前元素节点的<strong>前一个同级元素节点</strong>，如果没有则返回<code>null</code>。</p> <h3 id="_2、实例方法"><a href="#_2、实例方法" class="header-anchor">#</a> 2、实例方法</h3> <h4 id="_2-1-标签属性相关方法"><a href="#_2-1-标签属性相关方法" class="header-anchor">#</a> 2.1 标签属性相关方法</h4> <p>元素节点提供六个方法，用来操作属性。</p> <h5 id="_1-getattribute-读取某个属性的值"><a href="#_1-getattribute-读取某个属性的值" class="header-anchor">#</a> （1）<code>getAttribute()</code>：读取某个属性的值</h5> <h5 id="_2-getattributenames-返回当前元素的所有属性名"><a href="#_2-getattributenames-返回当前元素的所有属性名" class="header-anchor">#</a> （2）<code>getAttributeNames()</code>：返回当前元素的所有属性名</h5> <h5 id="_3-setattribute-写入属性值"><a href="#_3-setattribute-写入属性值" class="header-anchor">#</a> （3）<code>setAttribute()</code>：写入属性值</h5> <h5 id="_4-hasattribute-某个属性是否存在"><a href="#_4-hasattribute-某个属性是否存在" class="header-anchor">#</a> （4）<code>hasAttribute()</code>：某个属性是否存在</h5> <h5 id="_5-hasattributes-当前元素是否有属性"><a href="#_5-hasattributes-当前元素是否有属性" class="header-anchor">#</a> （5）<code>hasAttributes()</code>：当前元素是否有属性</h5> <h5 id="_6-removeattribute-删除属性"><a href="#_6-removeattribute-删除属性" class="header-anchor">#</a> （6）<code>removeAttribute()</code>：删除属性</h5> <p>这些方法的介绍请看《<strong>属性的操作</strong>》一章。</p> <h4 id="_2-2-element-queryselector-返回第一个匹配的子元素"><a href="#_2-2-element-queryselector-返回第一个匹配的子元素" class="header-anchor">#</a> 2.2 Element.querySelector() 返回第一个匹配的子元素</h4> <p><code>Element.querySelector</code>方法接受 <strong>CSS 选择器作为参数，返回父元素的第一个匹配的子元素</strong>。如果没有找到匹配的子元素，就返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> content <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'content'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    954. 

  954. <span class="token keyword">var</span> el <span class="token operator">=</span> content<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    955. 

  955. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码返回<code>content</code>节点的第一个<code>p</code>元素。</p> <p><code>Element.querySelector</code>方法<strong>可以接受任何复杂的 CSS 选择器</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;style[type='text/css'], style:not([type])&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    956. 

  956. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>注意，这个方法无法选中伪元素。</p> <p>它可以接受多个选择器，它们之间使用逗号分隔。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>element<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'div, p'</span><span class="token punctuation">)</span>
    957. 

  957. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码返回<code>element</code>的第一个<code>div</code>或<code>p</code>子元素。</p> <p>需要<strong>注意</strong>的是，浏览器执行<code>querySelector</code>方法时，是先在全局范围内搜索给定的 CSS 选择器，然后过滤出哪些属于当前元素的子元素。因此，会有一些违反直觉的结果，下面是一段 HTML 代码。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    958. 

  958. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>111<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    959. 

  959. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>blockquote</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    960. 

  960.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Hello<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    961. 

  961.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    962. 

  962.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>World<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    963. 

  963.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    964. 

  964. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>blockquote</span><span class="token punctuation">&gt;</span></span>
    965. 

  965. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    966. 

  966. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>那么，像下面这样查询的话，实际上返回的是第一个<code>p</code>元素，而不是第二个。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> outer <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'outer'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    967. 

  967. outer<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'div p'</span><span class="token punctuation">)</span>
    968. 

  968. <span class="token comment">// &lt;p&gt;Hello&lt;/p&gt;</span>
    969. 

  969. <span class="token comment">// 违反自觉的结果，是因为会全局范围搜索到outer外面的div，然后再选出当前元素outer的子元素第一个p</span>
    970. 

  970. 

  971. outer<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span>
    972. 

  972. <span class="token comment">// &lt;p&gt;World&lt;/p&gt; 这样就能拿到里面的p元素</span>
    973. 

  973. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="_2-3-element-queryselectorall-返回nodelist实例-包含所有子元素"><a href="#_2-3-element-queryselectorall-返回nodelist实例-包含所有子元素" class="header-anchor">#</a> 2.3 Element.querySelectorAll() 返回NodeList实例，包含所有子元素</h4> <p><code>Element.querySelectorAll</code>方法接受 CSS 选择器作为参数，<strong>返回一个<code>NodeList</code>实例，包含所有匹配的子元素</strong>。</p> <blockquote><p>返回的NodeList实例是<strong>类数组对象</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    974. 

  974. <span class="token keyword">var</span> matches <span class="token operator">=</span> el<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'div.highlighted &gt; p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    975. 

  975. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>该方法的执行机制与<code>querySelector</code>方法相同，也是<strong>先在全局范围内查找，再过滤出当前元素的子元素</strong>。因此，选择器实际上针对整个文档的。</p> <p>它也可以接受多个 CSS 选择器，它们之间使用逗号分隔。如果选择器里面有伪元素的选择器，则总是返回一个空的<code>NodeList</code>实例。</p> <h4 id="_2-4-element-getelementsbyclassname-通过class获取所有子元素"><a href="#_2-4-element-getelementsbyclassname-通过class获取所有子元素" class="header-anchor">#</a> 2.4 Element.getElementsByClassName() 通过class获取所有子元素</h4> <p><code>Element.getElementsByClassName</code>方法返<strong>回一个<code>HTMLCollection</code>实例，成员是当前元素节点的所有具有指定 class 的子元素节点</strong>。该方法与<code>document.getElementsByClassName</code>方法的用法类似，只是搜索范围不是整个文档，而是当前元素节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>element<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">'red test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    976. 

  976. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>注意，该方法的参数大小写敏感。</p> <p>由于<code>HTMLCollection</code>实例是一个<strong>活的集合</strong>，<code>document</code>对象的任何变化会立刻反应到实例，下面的代码不会生效。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    977. 

  977. <span class="token comment">// &lt;div id=&quot;example&quot;&gt;</span>
    978. 

  978. <span class="token comment">//   &lt;p class=&quot;foo&quot;&gt;&lt;/p&gt;</span>
    979. 

  979. <span class="token comment">//   &lt;p class=&quot;foo&quot;&gt;&lt;/p&gt;</span>
    980. 

  980. <span class="token comment">// &lt;/div&gt;</span>
    981. 

  981. <span class="token keyword">var</span> element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'example'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    982. 

  982. <span class="token keyword">var</span> matches <span class="token operator">=</span> element<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    983. 

  983. 

  984. <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span> matches<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    985. 

  985.   matches<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 当删除了foo，matches的集合就会立刻改变</span>
    986. 

  986.   matches<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    987. 

  987. <span class="token punctuation">}</span>
    988. 

  988. <span class="token comment">// 执行后，HTML 代码如下</span>
    989. 

  989. <span class="token comment">// &lt;div id=&quot;example&quot;&gt;</span>
    990. 

  990. <span class="token comment">//   &lt;p&gt;&lt;/p&gt;</span>
    991. 

  991. <span class="token comment">//   &lt;p class=&quot;foo bar&quot;&gt;&lt;/p&gt;</span>
    992. 

  992. <span class="token comment">// &lt;/div&gt;</span>
    993. 

  993. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>上面代码中，<code>matches</code>集合的第一个成员，<strong>一旦被拿掉 class 里面的<code>foo</code>，就会立刻从<code>matches</code>里面消失</strong>，导致出现上面的结果。</p> <h4 id="_2-5-element-getelementsbytagname-通过标签获取索引子元素"><a href="#_2-5-element-getelementsbytagname-通过标签获取索引子元素" class="header-anchor">#</a> 2.5 Element.getElementsByTagName() 通过标签获取索引子元素</h4> <p><code>Element.getElementsByTagName</code>方法<strong>返回一个<code>HTMLCollection</code>实例，成员是当前节点的所有匹配指定标签名的子元素节点</strong>。该方法与<code>document.getElementsByClassName</code>方法的用法类似，只是搜索范围不是整个文档，而是当前元素节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> table <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'forecast-table'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    994. 

  994. <span class="token keyword">var</span> cells <span class="token operator">=</span> table<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'td'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    995. 

  995. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>注意，该方法的参数是大小写不敏感的。</p> <h4 id="_2-6-element-closest-接受css选择器参数-返回最靠近的祖先节点"><a href="#_2-6-element-closest-接受css选择器参数-返回最靠近的祖先节点" class="header-anchor">#</a> 2.6 Element.closest() 接受CSS选择器参数，返回最靠近的祖先节点</h4> <p><code>Element.closest</code>方法<strong>接受一个 CSS 选择器作为参数，返回匹配该选择器的、最接近当前节点的一个祖先节点（包括当前节点本身）</strong>。如果没有任何节点匹配 CSS 选择器，则返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    996. 

  996. <span class="token comment">// &lt;article&gt;</span>
    997. 

  997. <span class="token comment">//   &lt;div id=&quot;div-01&quot;&gt;Here is div-01</span>
    998. 

  998. <span class="token comment">//     &lt;div id=&quot;div-02&quot;&gt;Here is div-02</span>
    999. 

  999. <span class="token comment">//       &lt;div id=&quot;div-03&quot;&gt;Here is div-03&lt;/div&gt;</span>
    1000. 

  1000. <span class="token comment">//     &lt;/div&gt;</span>
    1001. 

  1001. <span class="token comment">//   &lt;/div&gt;</span>
    1002. 

  1002. <span class="token comment">// &lt;/article&gt;</span>
    1003. 

  1003. 

  1004. <span class="token keyword">var</span> div03 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'div-03'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1005. 

  1005. 

  1006. <span class="token comment">// div-03 最近的祖先节点</span>
    1007. 

  1007. div03<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">&quot;#div-02&quot;</span><span class="token punctuation">)</span> <span class="token comment">// div-02</span>
    1008. 

  1008. 

  1009. div03<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">&quot;div&quot;</span><span class="token punctuation">)</span> <span class="token comment">// div-03 closest包含当前节点本身</span>
    1010. 

  1010. div03<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">&quot;div div&quot;</span><span class="token punctuation">)</span> <span class="token comment">// div-03</span>
    1011. 

  1011. div03<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">&quot;div&gt;div&quot;</span><span class="token punctuation">)</span> <span class="token comment">// div-03</span>
    1012. 

  1012. 

  1013. div03<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">&quot;article &gt; div&quot;</span><span class="token punctuation">)</span> <span class="token comment">//div-01</span>
    1014. 

  1014. div03<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">&quot;:not(div)&quot;</span><span class="token punctuation">)</span> <span class="token comment">// article</span>
    1015. 

  1015. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>上面代码中，由于<code>closest</code>方法将当前节点也考虑在内，所以第二个<code>closest</code>方法返回<code>div-03</code>。</p> <h4 id="_2-7-element-matches-当前元素是否匹配给定的css选择器"><a href="#_2-7-element-matches-当前元素是否匹配给定的css选择器" class="header-anchor">#</a> 2.7 Element.matches() 当前元素是否匹配给定的css选择器</h4> <p><code>Element.matches</code>方法<strong>返回一个布尔值，表示当前元素是否匹配给定的 CSS 选择器。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>el<span class="token punctuation">.</span><span class="token function">matches</span><span class="token punctuation">(</span><span class="token string">'.someClass'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1016. 

  1016.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Match!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1017. 

  1017. <span class="token punctuation">}</span>
    1018. 

  1018. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h4 id="_2-8-事件相关方法"><a href="#_2-8-事件相关方法" class="header-anchor">#</a> 2.8 事件相关方法</h4> <p>以下三个方法与<code>Element</code>节点的事件相关。这些方法都继承自<code>EventTarget</code>接口，<strong>详见相关章节</strong>。</p> <h5 id="_1-element-addeventlistener-添加事件的回调函数"><a href="#_1-element-addeventlistener-添加事件的回调函数" class="header-anchor">#</a> （1）<code>Element.addEventListener()</code>：添加事件的回调函数</h5> <h5 id="_2-element-removeeventlistener-移除事件监听函数"><a href="#_2-element-removeeventlistener-移除事件监听函数" class="header-anchor">#</a> （2）<code>Element.removeEventListener()</code>：移除事件监听函数</h5> <h5 id="_3-element-dispatchevent-触发事件"><a href="#_3-element-dispatchevent-触发事件" class="header-anchor">#</a> （3）<code>Element.dispatchEvent()</code>：触发事件</h5> <div class="language-js line-numbers-mode"><pre class="language-js"><code>element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> listener<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1019. 

  1019. element<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> listener<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1020. 

  1020. 

  1021. <span class="token keyword">var</span> event <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Event</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1022. 

  1022. element<span class="token punctuation">.</span><span class="token function">dispatchEvent</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1023. 

  1023. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="_2-9-element-scrollintoview-让元素滚动到浏览器可视区"><a href="#_2-9-element-scrollintoview-让元素滚动到浏览器可视区" class="header-anchor">#</a> 2.9 Element.scrollIntoView()  让元素滚动到浏览器可视区</h4> <p><code>Element.scrollIntoView</code>方法<strong>让当前的元素滚动到浏览器窗口的可视区域内</strong> ，类似于设置<code>window.location.hash</code>的效果。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>el<span class="token punctuation">.</span><span class="token function">scrollIntoView</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 等同于el.scrollIntoView(true)</span>
    1024. 

  1024. el<span class="token punctuation">.</span><span class="token function">scrollIntoView</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1025. 

  1025. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>该方法可以接受一个布尔值作为参数。如果为<code>true</code>，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为<code>false</code>，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为<code>true</code>。</p> <h4 id="_2-10-element-getboundingclientrect-返回元素大小、位置信息的对象"><a href="#_2-10-element-getboundingclientrect-返回元素大小、位置信息的对象" class="header-anchor">#</a> 2.10 Element.getBoundingClientRect() 返回元素大小、位置信息的对象</h4> <p><code>Element.getBoundingClientRect</code>方法<strong>返回一个对象，提供当前元素节点的大小、位置等信息，基本上就是 CSS 盒状模型的所有信息</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> rect <span class="token operator">=</span> obj<span class="token punctuation">.</span><span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1026. 

  1026. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码中，<code>getBoundingClientRect</code>方法返回的<code>rect</code>对象，具有以下属性（全部为<strong>只读</strong>）。</p> <ul><li><code>x</code>：元素左上角相对于视口的横坐标</li> <li><code>y</code>：元素左上角相对于视口的纵坐标</li> <li><code>height</code>：元素高度</li> <li><code>width</code>：元素宽度</li> <li><code>left</code>：元素左上角相对于视口的横坐标，与<code>x</code>属性相等</li> <li><code>right</code>：元素右边界相对于视口的横坐标（等于<code>x + width</code>）</li> <li><code>top</code>：元素顶部相对于视口的纵坐标，与<code>y</code>属性相等</li> <li><code>bottom</code>：元素底部相对于视口的纵坐标（等于<code>y + height</code>）</li></ul> <p>由于元素<strong>相对于视口（viewport）的位置</strong>，<strong>会随着页面滚动变化</strong>，因此表示位置的四个属性值，都不是固定不变的。如果想得到绝对位置，可以将<code>left</code>属性加上<code>window.scrollX</code>，<code>top</code>属性加上<code>window.scrollY</code>。</p> <p>注意，<code>getBoundingClientRect</code>方法的所有属性，都把边框（<code>border</code>属性）算作元素的一部分。也就是说，都是从边框外缘的各个点来计算。因此，<strong><code>width</code>和<code>height</code>包括了元素本身 + <code>padding</code> + <code>border</code>。</strong></p> <p>另外，上面的这些属性，都是继承自原型的属性，<code>Object.keys</code>会返回一个空数组，这一点也需要注意。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> rect <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1027. 

  1027. Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>rect<span class="token punctuation">)</span> <span class="token comment">// []</span>
    1028. 

  1028. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码中，<code>rect</code>对象没有自身属性，而<code>Object.keys</code>方法只返回对象自身的属性，所以返回了一个空数组。</p> <h4 id="_2-11-element-getclientrects-元素在页面上形成的所有矩形-类数组"><a href="#_2-11-element-getclientrects-元素在页面上形成的所有矩形-类数组" class="header-anchor">#</a> 2.11 Element.getClientRects() 元素在页面上形成的所有矩形，类数组</h4> <p><code>Element.getClientRects</code>方法<strong>返回一个类似数组的对象，里面是当前元素在页面上形成的所有矩形</strong>（所以方法名中的<code>Rect</code>用的是复数）。每个矩形都有<code>bottom</code>、<code>height</code>、<code>left</code>、<code>right</code>、<code>top</code>和<code>width</code>六个属性，表示它们相对于视口的四个坐标，以及本身的高度和宽度。</p> <p>对于盒状元素（比如<code>&lt;div&gt;</code>和<code>&lt;p&gt;</code>），该方法返回的对象中只有该元素一个成员。对于行内元素（比如<code>&lt;span&gt;</code>、<code>&lt;a&gt;</code>、<code>&lt;em&gt;</code>），该方法返回的对象有多少个成员，取决于该元素在页面上占据多少行。这是它和<code>Element.getBoundingClientRect()</code>方法的主要区别，后者对于行内元素总是返回一个矩形。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>span id<span class="token operator">=</span><span class="token string">&quot;inline&quot;</span><span class="token operator">&gt;</span>Hello World Hello World Hello World<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
    1029. 

  1029. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码是一个行内元素<code>&lt;span&gt;</code>，如果它在页面上占据三行，<code>getClientRects</code>方法返回的对象就有三个成员，如果它在页面上占据一行，<code>getClientRects</code>方法返回的对象就只有一个成员。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'inline'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1030. 

  1030. el<span class="token punctuation">.</span><span class="token function">getClientRects</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token comment">// 3</span>
    1031. 

  1031. el<span class="token punctuation">.</span><span class="token function">getClientRects</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>left <span class="token comment">// 8</span>
    1032. 

  1032. el<span class="token punctuation">.</span><span class="token function">getClientRects</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>right <span class="token comment">// 113.908203125</span>
    1033. 

  1033. el<span class="token punctuation">.</span><span class="token function">getClientRects</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>bottom <span class="token comment">// 31.200000762939453</span>
    1034. 

  1034. el<span class="token punctuation">.</span><span class="token function">getClientRects</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>height <span class="token comment">// 23.200000762939453</span>
    1035. 

  1035. el<span class="token punctuation">.</span><span class="token function">getClientRects</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>width <span class="token comment">// 105.908203125</span>
    1036. 

  1036. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>这个方法主要用于判断行内元素是否换行，以及行内元素的每一行的位置偏移。</p> <p>注意，如果行内元素包括换行符，那么该方法会把换行符考虑在内。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>span id<span class="token operator">=</span><span class="token string">&quot;inline&quot;</span><span class="token operator">&gt;</span>
    1037. 

  1037.   Hello World
    1038. 

  1038.   Hello World
    1039. 

  1039.   Hello World
    1040. 

  1040. <span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
    1041. 

  1041. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面代码中，<code>&lt;span&gt;</code>节点内部有三个换行符，即使 HTML 语言忽略换行符，将它们显示为一行，<code>getClientRects()</code>方法依然会返回三个成员。如果行宽设置得特别窄，上面的<code>&lt;span&gt;</code>元素显示为6行，那么就会返回六个成员。</p> <h4 id="_2-12-element-insertadjacentelement-插入新节点到元素的指定位置"><a href="#_2-12-element-insertadjacentelement-插入新节点到元素的指定位置" class="header-anchor">#</a> 2.12 Element.insertAdjacentElement()  插入新节点到元素的指定位置</h4> <p><code>Element.insertAdjacentElement</code>方法<strong>在相对于当前元素的指定位置，插入一个新的节点</strong>。该方法返回被插入的节点，如果插入失败，返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>element<span class="token punctuation">.</span><span class="token function">insertAdjacentElement</span><span class="token punctuation">(</span>position<span class="token punctuation">,</span> element<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1042. 

  1042. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><code>Element.insertAdjacentElement</code>方法一共可以接受两个参数，第一个参数是一个字符串，表示插入的位置，第二个参数是将要插入的节点。第一个参数只可以取如下的值。</p> <ul><li><code>beforebegin</code>：当前元素之前</li> <li><code>afterbegin</code>：当前元素内部的第一个子节点前面</li> <li><code>beforeend</code>：当前元素内部的最后一个子节点后面</li> <li><code>afterend</code>：当前元素之后</li></ul> <p>注意，<code>beforebegin</code>和<code>afterend</code>这两个值，只在当前节点有父节点时才会生效。如果当前节点是由脚本创建的，没有父节点，那么插入会失败。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> p1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span>
    1043. 

  1043. <span class="token keyword">var</span> p2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span>
    1044. 

  1044. p1<span class="token punctuation">.</span><span class="token function">insertAdjacentElement</span><span class="token punctuation">(</span><span class="token string">'afterend'</span><span class="token punctuation">,</span> p2<span class="token punctuation">)</span> <span class="token comment">// null</span>
    1045. 

  1045. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码中，<code>p1</code>没有父节点，所以插入<code>p2</code>到它后面就失败了。</p> <p>如果插入的节点是一个文档里现有的节点，它会从原有位置删除，放置到新的位置。</p> <h4 id="_2-13-element-insertadjacenthtml-插入html字符串到指定位置-element-insertadjacenttext-插入text到指定位置"><a href="#_2-13-element-insertadjacenthtml-插入html字符串到指定位置-element-insertadjacenttext-插入text到指定位置" class="header-anchor">#</a> 2.13 Element.insertAdjacentHTML() 插入html字符串到指定位置，Element.insertAdjacentText() 插入text到指定位置</h4> <p><code>Element.insertAdjacentHTML</code>方法<strong>用于将一个 HTML 字符串，解析生成 DOM 结构，插入相对于当前节点的指定位置。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>element<span class="token punctuation">.</span><span class="token function">insertAdjacentHTML</span><span class="token punctuation">(</span>position<span class="token punctuation">,</span> text<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1046. 

  1046. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>该方法接受两个参数，第一个是一个表示指定位置的字符串，第二个是待解析的 HTML 字符串。第一个参数只能设置下面四个值之一。</p> <ul><li><code>beforebegin</code>：当前元素之前</li> <li><code>afterbegin</code>：当前元素内部的第一个子节点前面</li> <li><code>beforeend</code>：当前元素内部的最后一个子节点后面</li> <li><code>afterend</code>：当前元素之后</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码：&lt;div id=&quot;one&quot;&gt;one&lt;/div&gt;</span>
    1047. 

  1047. <span class="token keyword">var</span> d1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'one'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1048. 

  1048. d1<span class="token punctuation">.</span><span class="token function">insertAdjacentHTML</span><span class="token punctuation">(</span><span class="token string">'afterend'</span><span class="token punctuation">,</span> <span class="token string">'&lt;div id=&quot;two&quot;&gt;two&lt;/div&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1049. 

  1049. <span class="token comment">// 执行后的 HTML 代码：</span>
    1050. 

  1050. <span class="token comment">// &lt;div id=&quot;one&quot;&gt;one&lt;/div&gt;&lt;div id=&quot;two&quot;&gt;two&lt;/div&gt;</span>
    1051. 

  1051. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>该方法只是在现有的 DOM 结构里面插入节点，这使得它的执行速度比<code>innerHTML</code>方法快得多。</p> <p>注意，该方法不会转义 HTML 字符串，这导致它不能用来插入用户输入的内容，否则会有安全风险。</p> <p><code>Element.insertAdjacentText</code>方法在相对于当前节点的指定位置，插入一个文本节点，用法与<code>Element.insertAdjacentHTML</code>方法完全一致。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码：&lt;div id=&quot;one&quot;&gt;one&lt;/div&gt;</span>
    1052. 

  1052. <span class="token keyword">var</span> d1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'one'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1053. 

  1053. d1<span class="token punctuation">.</span><span class="token function">insertAdjacentText</span><span class="token punctuation">(</span><span class="token string">'afterend'</span><span class="token punctuation">,</span> <span class="token string">'two'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1054. 

  1054. <span class="token comment">// 执行后的 HTML 代码：</span>
    1055. 

  1055. <span class="token comment">// &lt;div id=&quot;one&quot;&gt;one&lt;/div&gt;two</span>
    1056. 

  1056. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="_2-14-element-remove-移除元素"><a href="#_2-14-element-remove-移除元素" class="header-anchor">#</a> 2.14 Element.remove() 移除元素</h4> <p><code>Element.remove</code>方法<strong>继承自 ChildNode 接口，用于将当前元素节点从它的父节点移除。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'mydiv'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1057. 

  1057. el<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1058. 

  1058. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码将<code>el</code>节点从 DOM 树里面移除。</p> <h4 id="_2-15-element-focus-将页面焦点转移到元素-element-blur-将焦点移除"><a href="#_2-15-element-focus-将页面焦点转移到元素-element-blur-将焦点移除" class="header-anchor">#</a> 2.15 Element.focus() 将页面焦点转移到元素，Element.blur() 将焦点移除</h4> <p><code>Element.focus</code>方法<strong>用于将当前页面的焦点，转移到指定元素上</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'my-span'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1059. 

  1059. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>该方法可以接受一个对象作为参数。参数对象的<code>preventScroll</code>属性是一个布尔值，指定<strong>是否将当前元素停留在原始位置</strong>，而不是滚动到可见区域。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">getFocus</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1060. 

  1060.   document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'btn'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">preventScroll</span><span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1061. 

  1061. <span class="token punctuation">}</span>
    1062. 

  1062. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码会让<code>btn</code>元素获得焦点，并<strong>滚动到可见区域</strong>。</p> <p>最后，从<code>document.activeElement</code>属性可以得到当前获得焦点的元素。</p> <p><code>Element.blur</code>方法<strong>用于将焦点从当前元素移除</strong>。</p> <h4 id="_2-16-element-click-模拟点击事件"><a href="#_2-16-element-click-模拟点击事件" class="header-anchor">#</a> 2.16 Element.click() 模拟点击事件</h4> <p><code>Element.click</code>方法用于<strong>在当前元素上模拟一次鼠标点击，相当于触发了<code>click</code>事件。</strong></p> <h2 id="七、元素属性的操作"><a href="#七、元素属性的操作" class="header-anchor">#</a> 七、元素属性的操作</h2> <p>HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.example.com<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    1063. 

  1063.   链接
    1064. 

  1064. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    1065. 

  1065. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码中，<code>a</code>元素包括两个属性：<code>id</code>属性和<code>href</code>属性。</p> <p>属性本身是一个对象（<code>Attr</code>对象），但是实际上，这个对象极少使用。一般都是通过元素节点对象（<code>HTMlElement</code>对象）来操作属性。本章介绍如何操作这些属性。</p> <h3 id="_1、element-attributes-属性-返回包含标签所有属性的类数组动态对象"><a href="#_1、element-attributes-属性-返回包含标签所有属性的类数组动态对象" class="header-anchor">#</a> 1、Element.attributes 属性 （返回包含标签所有属性的类数组动态对象）</h3> <p>元素对象有一个<code>attributes</code>属性，返回一个<strong>类似数组的动态对象，成员是该元素标签的所有属性节点对象</strong>，属性的实时变化都会反映在这个节点对象上。其他类型的节点对象，虽然也有<code>attributes</code>属性，但返回的都是<code>null</code>，因此可以把这个属性视为元素对象独有的。</p> <p>单个属性可以通过序号引用，也可以通过属性名引用。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// &lt;a id=&quot;test&quot; href=&quot;http://www.example.com&quot;&gt;链接&lt;/a&gt;</span>
    1066. 

  1066. <span class="token comment">// document.getElementsByTagName('a')[0].attributes 返回一个 NamedNodeMap 类数组对象</span>
    1067. 

  1067. 

  1068. NamedNodeMap <span class="token punctuation">{</span><span class="token number">0</span><span class="token operator">:</span> id<span class="token punctuation">,</span> <span class="token number">1</span><span class="token operator">:</span> href<span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> id<span class="token punctuation">,</span> <span class="token literal-property property">href</span><span class="token operator">:</span> href<span class="token punctuation">,</span> <span class="token literal-property property">length</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">}</span>
    1069. 

  1069. 

  1070. <span class="token comment">// 这两个访问方法都是返回一个id的属性节点对象</span>
    1071. 

  1071. <span class="token comment">// NamedNodeMap[0]</span>
    1072. 

  1072. <span class="token comment">// NamedNodeMap.id</span>
    1073. 

  1073. 

  1074. <span class="token punctuation">{</span>
    1075. 

  1075.     <span class="token literal-property property">baseURI</span><span class="token operator">:</span> <span class="token string">&quot;file:///C:/Users/dell/Desktop/test.html&quot;</span>
    1076. 

  1076.     <span class="token literal-property property">childNodes</span><span class="token operator">:</span> NodeList <span class="token punctuation">[</span><span class="token punctuation">]</span>
    1077. 

  1077.     <span class="token literal-property property">firstChild</span><span class="token operator">:</span> <span class="token keyword">null</span>
    1078. 

  1078.     <span class="token literal-property property">isConnected</span><span class="token operator">:</span> <span class="token boolean">false</span>
    1079. 

  1079.     <span class="token literal-property property">lastChild</span><span class="token operator">:</span> <span class="token keyword">null</span>
    1080. 

  1080.     <span class="token literal-property property">localName</span><span class="token operator">:</span> <span class="token string">&quot;id&quot;</span>
    1081. 

  1081.     <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;id&quot;</span> <span class="token comment">// 属性是‘id’</span>
    1082. 

  1082.     <span class="token literal-property property">namespaceURI</span><span class="token operator">:</span> <span class="token keyword">null</span>
    1083. 

  1083.     <span class="token literal-property property">nextSibling</span><span class="token operator">:</span> <span class="token keyword">null</span>
    1084. 

  1084.     <span class="token literal-property property">nodeName</span><span class="token operator">:</span> <span class="token string">&quot;id&quot;</span>
    1085. 

  1085.     <span class="token literal-property property">nodeType</span><span class="token operator">:</span> <span class="token number">2</span>
    1086. 

  1086.     <span class="token literal-property property">nodeValue</span><span class="token operator">:</span> <span class="token string">&quot;test&quot;</span>
    1087. 

  1087.     <span class="token literal-property property">ownerDocument</span><span class="token operator">:</span> document
    1088. 

  1088.     <span class="token literal-property property">ownerElement</span><span class="token operator">:</span> a#test
    1089. 

  1089.     <span class="token literal-property property">parentElement</span><span class="token operator">:</span> <span class="token keyword">null</span>
    1090. 

  1090.     <span class="token literal-property property">parentNode</span><span class="token operator">:</span> <span class="token keyword">null</span>
    1091. 

  1091.     <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token keyword">null</span>
    1092. 

  1092.     <span class="token literal-property property">previousSibling</span><span class="token operator">:</span> <span class="token keyword">null</span>
    1093. 

  1093.     <span class="token literal-property property">specified</span><span class="token operator">:</span> <span class="token boolean">true</span>
    1094. 

  1094.     <span class="token literal-property property">textContent</span><span class="token operator">:</span> <span class="token string">&quot;test&quot;</span>
    1095. 

  1095.     <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&quot;test&quot;</span> <span class="token comment">// id的值</span>
    1096. 

  1096. <span class="token punctuation">}</span>
    1097. 

  1097. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    1098. 

  1098. <span class="token comment">// &lt;body bgcolor=&quot;yellow&quot; onload=&quot;&quot;&gt;</span>
    1099. 

  1099. document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>attributes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
    1100. 

  1100. document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>bgcolor
    1101. 

  1101. document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>attributes<span class="token punctuation">[</span><span class="token string">'ONLOAD'</span><span class="token punctuation">]</span>
    1102. 

  1102. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>注意，上面代码的三种方法，<strong>返回的都是属性节点对象，而不是属性值</strong>。</p> <p><strong>属性节点对象有<code>name</code>和<code>value</code>属性</strong>，对应该属性的属性名和属性值，等同于<code>nodeName</code>属性和<code>nodeValue</code>属性。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML代码为</span>
    1103. 

  1103. <span class="token comment">// &lt;div id=&quot;mydiv&quot;&gt;</span>
    1104. 

  1104. <span class="token keyword">var</span> n <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'mydiv'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1105. 

  1105. 

  1106. n<span class="token punctuation">.</span>attributes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token comment">// &quot;id&quot;</span>
    1107. 

  1107. n<span class="token punctuation">.</span>attributes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>nodeName <span class="token comment">// &quot;id&quot;</span>
    1108. 

  1108. 

  1109. n<span class="token punctuation">.</span>attributes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>value <span class="token comment">// &quot;mydiv&quot;</span>
    1110. 

  1110. n<span class="token punctuation">.</span>attributes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>nodeValue <span class="token comment">// &quot;mydiv&quot;</span>
    1111. 

  1111. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>下面代码可以遍历一个元素节点的所有属性。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> para <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    1112. 

  1112. <span class="token keyword">var</span> result <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'result'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1113. 

  1113. 

  1114. <span class="token keyword">if</span> <span class="token punctuation">(</span>para<span class="token punctuation">.</span><span class="token function">hasAttributes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1115. 

  1115.   <span class="token keyword">var</span> attrs <span class="token operator">=</span> para<span class="token punctuation">.</span>attributes<span class="token punctuation">;</span>
    1116. 

  1116.   <span class="token keyword">var</span> output <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
    1117. 

  1117.   <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> attrs<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&gt;=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1118. 

  1118.     output <span class="token operator">+=</span> attrs<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">'-&gt;'</span> <span class="token operator">+</span> attrs<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span>
    1119. 

  1119.   <span class="token punctuation">}</span>
    1120. 

  1120.   result<span class="token punctuation">.</span>textContent <span class="token operator">=</span> output<span class="token punctuation">;</span>
    1121. 

  1121. <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    1122. 

  1122.   result<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">'No attributes to show'</span><span class="token punctuation">;</span>
    1123. 

  1123. <span class="token punctuation">}</span>
    1124. 

  1124. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="_2、元素的标准属性"><a href="#_2、元素的标准属性" class="header-anchor">#</a> 2、元素的标准属性</h3> <p>HTML 元素的标准属性（即<strong>在标准中定义的属性</strong>），会<strong>自动成为元素节点对象的属性</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// &lt;a id=&quot;aId&quot; href=&quot;http://www.example.com&quot; class=&quot;aClass&quot;&gt;链接&lt;/a&gt;</span>
    1125. 

  1125. 

  1126. <span class="token keyword">var</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1127. 

  1127. 

  1128. <span class="token comment">// a是节点对象，id和href自动成为a节点的属性</span>
    1129. 

  1129. a<span class="token punctuation">.</span>id <span class="token comment">// &quot;aId&quot;</span>
    1130. 

  1130. a<span class="token punctuation">.</span>href <span class="token comment">// &quot;http://www.example.com/&quot;</span>
    1131. 

  1131. a<span class="token punctuation">.</span>className <span class="token comment">// &quot;aClass&quot;</span>
    1132. 

  1132. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>上面代码中，<code>a</code>元素标签的属性<code>id</code>和<code>href</code>，自动成为节点对象的属性。</p> <p>这些属性都是可写的。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> img <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myImage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1133. 

  1133. img<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">'http://www.example.com/image.jpg'</span><span class="token punctuation">;</span>
    1134. 

  1134. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面的写法，会立刻替换掉<code>img</code>对象的<code>src</code>属性，即会显示另外一张图片。</p> <p>这种修改属性的方法，常常用于添加表单的属性。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> f <span class="token operator">=</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    1135. 

  1135. f<span class="token punctuation">.</span>action <span class="token operator">=</span> <span class="token string">'submit.php'</span><span class="token punctuation">;</span>
    1136. 

  1136. f<span class="token punctuation">.</span>method <span class="token operator">=</span> <span class="token string">'POST'</span><span class="token punctuation">;</span>
    1137. 

  1137. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码为表单添加提交网址和提交方法。</p> <p>注意，<strong>这种用法虽然可以读写属性，但是无法删除属性</strong>，<code>delete</code>运算符在这里不会生效。</p> <p>HTML 元素的属性名是大小写不敏感的，但是 JavaScript 对象的属性名是大小写敏感的。转换规则是，转为 JavaScript 属性名时，一律采用小写。<strong>如果属性名包括多个单词，则采用骆驼拼写法</strong>，即从第二个单词开始，每个单词的首字母采用大写，比如<code>onClick</code>。</p> <p>有些 HTML 属性名是 JavaScript 的保留字，转为 JavaScript 属性时，必须改名。主要是以下两个。</p> <ul><li><code>for</code>属性改为<code>htmlFor</code></li> <li><code>class</code>属性改为<code>className</code></li></ul> <p>另外，HTML 属性值一般都是字符串，但是 JavaScript 属性会自动转换类型。比如，将字符串<code>true</code>转为布尔值，将<code>onClick</code>的值转为一个函数，将<code>style</code>属性的值转为一个<code>CSSStyleDeclaration</code>对象。因此，可以对这些属性赋予各种类型的值。</p> <h3 id="_3、属性操作的标准方法"><a href="#_3、属性操作的标准方法" class="header-anchor">#</a> 3、属性操作的标准方法</h3> <h4 id="_3-1-概述"><a href="#_3-1-概述" class="header-anchor">#</a> 3.1 概述</h4> <p><strong>元素节点提供六个方法，用来操作属性。</strong></p> <ul><li><code>getAttribute()</code></li> <li><code>getAttributeNames()</code></li> <li><code>setAttribute()</code></li> <li><code>hasAttribute()</code></li> <li><code>hasAttributes()</code></li> <li><code>removeAttribute()</code></li></ul> <p>这有几点注意。</p> <p>（1）适用性</p> <p>这六个方法<strong>对所有属性（包括用户自定义的属性）都适用</strong>。</p> <p>（2）返回值</p> <p><code>getAttribute()</code>只返回字符串，不会返回其他类型的值。</p> <p>（3）属性名</p> <p>这些方法只接受属性的标准名称，不用改写保留字，比如<code>for</code>和<code>class</code>都可以直接使用。另外，这些方法对于属性名是大小写不敏感的。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span>images<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    1138. 

  1138. image<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">,</span> <span class="token string">'myImage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1139. 

  1139. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码中，<code>setAttribute</code>方法直接使用<code>class</code>作为属性名，不用写成<code>className</code>。</p> <h4 id="_3-2-element-getattribute-返回元素的指定属性值-字符串"><a href="#_3-2-element-getattribute-返回元素的指定属性值-字符串" class="header-anchor">#</a> 3.2 Element.getAttribute() 返回元素的指定属性值，字符串</h4> <p><code>Element.getAttribute</code>方法<strong>返回当前元素节点的指定属性</strong>。如果指定属性不存在，则返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码为</span>
    1140. 

  1140. <span class="token comment">// &lt;div id=&quot;div1&quot; align=&quot;left&quot;&gt;</span>
    1141. 

  1141. <span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'div1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1142. 

  1142. div<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'align'</span><span class="token punctuation">)</span> <span class="token comment">// &quot;left&quot;</span>
    1143. 

  1143. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="_3-3-element-getattributenames-返回一个数组-成员是元素的所有属性的名字"><a href="#_3-3-element-getattributenames-返回一个数组-成员是元素的所有属性的名字" class="header-anchor">#</a> 3.3 Element.getAttributeNames() 返回一个数组，成员是元素的所有属性的名字</h4> <p><code>Element.getAttributeNames()</code><strong>返回一个数组，成员是当前元素的所有属性的名字</strong>。如果当前元素没有任何属性，则返回一个空数组。使用<code>Element.attributes</code>属性，也可以拿到同样的结果，唯一的区别是它返回的是类似数组的对象。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> mydiv <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'mydiv'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1144. 

  1144. 

  1145. mydiv<span class="token punctuation">.</span><span class="token function">getAttributeNames</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1146. 

  1146.   <span class="token keyword">var</span> value <span class="token operator">=</span> mydiv<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1147. 

  1147.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1148. 

  1148. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1149. 

  1149. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>上面代码用于遍历某个节点的所有属性。</p> <h4 id="_3-4-element-setattribute-为元素设置-新增-属性"><a href="#_3-4-element-setattribute-为元素设置-新增-属性" class="header-anchor">#</a> 3.4 Element.setAttribute() 为元素设置（新增）属性</h4> <p><code>Element.setAttribute</code>方法用于<strong>为当前元素节点新增属性</strong>。如果同名属性已存在，则相当于编辑已存在的属性。该方法没有返回值。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码为</span>
    1150. 

  1150. <span class="token comment">// &lt;button&gt;Hello World&lt;/button&gt;</span>
    1151. 

  1151. <span class="token keyword">var</span> b <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1152. 

  1152. b<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'myButton'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1153. 

  1153. b<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'disabled'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 属性值总是字符串，其他类型会转成字符串，这里会转成字符串'true'</span>
    1154. 

  1154. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面代码中，<code>button</code>元素的<code>name</code>属性被设成<code>myButton</code>，<code>disabled</code>属性被设成<code>true</code>。</p> <p>这里有两个地方需要注意，首先，属性值总是字符串，其他类型的值会自动转成字符串，比如布尔值<code>true</code>就会变成字符串<code>true</code>；其次，上例的<code>disable</code>属性是一个布尔属性，对于<code>&lt;button&gt;</code>元素来说，这个属性不需要属性值，只要设置了就总是会生效，因此<code>setAttribute</code>方法里面可以将<code>disabled</code>属性设成任意值。</p> <h4 id="_3-5-element-hasattribute-是否包含指定属性"><a href="#_3-5-element-hasattribute-是否包含指定属性" class="header-anchor">#</a> 3.5 Element.hasAttribute() 是否包含指定属性</h4> <p><code>Element.hasAttribute</code>方法<strong>返回一个布尔值，表示当前元素节点是否包含指定属性</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> d <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'div1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1155. 

  1155. 

  1156. <span class="token keyword">if</span> <span class="token punctuation">(</span>d<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">'align'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1157. 

  1157.   d<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'align'</span><span class="token punctuation">,</span> <span class="token string">'center'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1158. 

  1158. <span class="token punctuation">}</span>
    1159. 

  1159. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面代码检查<code>div</code>节点是否含有<code>align</code>属性。如果有，则设置为居中对齐。</p> <h4 id="_3-6-element-hasattributes-是否有任何的属性"><a href="#_3-6-element-hasattributes-是否有任何的属性" class="header-anchor">#</a> 3.6 Element.hasAttributes() 是否有任何的属性</h4> <p><code>Element.hasAttributes</code>方法<strong>返回一个布尔值，表示当前元素是否有属性，如果没有任何属性，就返回<code>false</code>，否则返回<code>true</code>。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> foo <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1160. 

  1160. foo<span class="token punctuation">.</span><span class="token function">hasAttributes</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
    1161. 

  1161. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="_3-7-element-removeattribute-移除指定属性"><a href="#_3-7-element-removeattribute-移除指定属性" class="header-anchor">#</a> 3.7 Element.removeAttribute() 移除指定属性</h4> <p><code>Element.removeAttribute</code>方法<strong>移除指定属性</strong>。该方法<strong>没有返回值</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码为</span>
    1162. 

  1162. <span class="token comment">// &lt;div id=&quot;div1&quot; align=&quot;left&quot; width=&quot;200px&quot;&gt;</span>
    1163. 

  1163. document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'div1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">'align'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1164. 

  1164. <span class="token comment">// 现在的HTML代码为</span>
    1165. 

  1165. <span class="token comment">// &lt;div id=&quot;div1&quot; width=&quot;200px&quot;&gt;</span>
    1166. 

  1166. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_4、dataset-属性-获取data-自定义属性"><a href="#_4、dataset-属性-获取data-自定义属性" class="header-anchor">#</a> 4、dataset 属性   获取data-*自定义属性</h3> <p>有时，需要在HTML元素上附加数据，供 JavaScript 脚本使用。一种解决方法是<strong>自定义属性</strong>。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mydiv<span class="token punctuation">&quot;</span></span> <span class="token attr-name">foo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bar<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    1167. 

  1167. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码为<code>div</code>元素<strong>自定义了<code>foo</code>属性</strong>，然后可以用<code>getAttribute()</code>和<code>setAttribute()</code>读写这个属性。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> n <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'mydiv'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1168. 

  1168. n<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span> <span class="token comment">// bar</span>
    1169. 

  1169. n<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token string">'baz'</span><span class="token punctuation">)</span>
    1170. 

  1170. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>这种方法虽然可以达到目的，但是会使得 HTML 元素的属性不符合标准，导致网页代码通不过校验。</strong></p> <p>更好的解决方法是，使用<strong>标准提供的<code>data-*</code>属性</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">&quot;mydiv&quot;</span> data<span class="token operator">-</span>foo<span class="token operator">=</span><span class="token string">&quot;bar&quot;</span><span class="token operator">&gt;</span>
    1171. 

  1171. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>然后，使用元素节点对象的<code>dataset</code>属性，它指向一个对象，可以用来操作 HTML 元素标签的<code>data-*</code>属性。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> n <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'mydiv'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1172. 

  1172. n<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>foo <span class="token comment">// bar  省略data-，直接访问foo即可访问到 data-foo的值</span>
    1173. 

  1173. n<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>foo <span class="token operator">=</span> <span class="token string">'baz'</span>
    1174. 

  1174. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码中，通过<code>dataset.foo</code>读写<code>data-foo</code>属性。</p> <p><strong>删除一个<code>data-*</code>属性，可以直接使用<code>delete</code>命令。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">delete</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myDiv'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>foo<span class="token punctuation">;</span>
    1175. 

  1175. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>除了<code>dataset</code>属性，也可以用<code>getAttribute('data-foo')</code>、<code>removeAttribute('data-foo')</code>、<code>setAttribute('data-foo')</code>、<code>hasAttribute('data-foo')</code>等方法操作<code>data-*</code>属性。</p> <p>注意，<code>data-</code>后面的属性名有限制，只能包含字母、数字、连词线（<code>-</code>）、点（<code>.</code>）、冒号（<code>:</code>）和下划线（<code>_</code>)。而且，属性名<strong>不应该使用<code>A</code>到<code>Z</code>的大写字母</strong>，比如不能有<code>data-helloWorld</code>这样的属性名，而要写成<code>data-hello-world</code>。</p> <p><strong>data-后面不能使用驼峰写法，可以使用烤串写法。</strong></p> <p>转成<code>dataset</code>的键名时，连词线后面如果跟着一个小写字母，那么连词线会被移除，该小写字母转为大写字母，其他字符不变。反过来，<code>dataset</code>的键名转成属性名时，所有大写字母都会被转成连词线+该字母的小写形式，其他字符不变。比如，<code>dataset.helloWorld</code>会转成<code>data-hello-world</code>。</p> <p><strong>通过dataset访问的时候，如有烤串写法属性需通过驼峰写法访问</strong></p> <h2 id="八、text-节点和-documentfragment-节点"><a href="#八、text-节点和-documentfragment-节点" class="header-anchor">#</a> 八、Text 节点和 DocumentFragment 节点</h2> <h3 id="_1、text-节点的概念"><a href="#_1、text-节点的概念" class="header-anchor">#</a> 1、Text 节点的概念</h3> <p><strong>文本节点（<code>Text</code>）代表元素节点（<code>Element</code>）和属性节点（<code>Attribute</code>）的文本内容。如果一个节点只包含一段文本，那么它就有一个文本子节点，代表该节点的文本内容。</strong></p> <p>通常我们使用父节点的<code>firstChild</code>、<code>nextSibling</code>等属性获取文本节点，或者使用<code>Document</code>节点的<code>createTextNode</code>方法创造一个文本节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 获取文本节点</span>
    1176. 

  1176. <span class="token keyword">var</span> textNode <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>firstChild<span class="token punctuation">;</span>
    1177. 

  1177. 

  1178. <span class="token comment">// 创造文本节点</span>
    1179. 

  1179. <span class="token keyword">var</span> textNode <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span><span class="token string">'Hi'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1180. 

  1180. document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>textNode<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1181. 

  1181. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>浏览器原生提供一个**<code>Text</code>构造函数**。它返回一个文本节点实例。它的参数就是该文本节点的文本内容。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 空字符串</span>
    1182. 

  1182. <span class="token keyword">var</span> text1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回一个文本实例</span>
    1183. 

  1183. 

  1184. <span class="token comment">// 非空字符串</span>
    1185. 

  1185. <span class="token keyword">var</span> text2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string">'This is a text node'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 参数为该文本节点的文本内容</span>
    1186. 

  1186. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>注意，由于空格也是一个字符，所以哪怕只有一个空格，也会形成文本节点。比如，<code></code>包含一个空格，它的子节点就是一个文本节点。</p> <p>文本节点除了<strong>继承<code>Node</code>接口，还继承了<code>CharacterData</code>接口</strong>。<code>Node</code>接口的属性和方法请参考《Node 接口》一章，这里不再重复介绍了，以下的属性和方法大部分来自<code>CharacterData</code>接口。</p> <h3 id="_2、text-节点的属性"><a href="#_2、text-节点的属性" class="header-anchor">#</a> 2、Text 节点的属性</h3> <h4 id="_2-1-data-设置或读取文本节点内容"><a href="#_2-1-data-设置或读取文本节点内容" class="header-anchor">#</a> 2.1 data  设置或读取文本节点内容</h4> <p><code>data</code>属性等同于<code>nodeValue</code>属性，用来<strong>设置或读取文本节点的内容</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 读取文本内容</span>
    1187. 

  1187. document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>data
    1188. 

  1188. <span class="token comment">// 等同于</span>
    1189. 

  1189. document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>nodeValue
    1190. 

  1190. 

  1191. <span class="token comment">// 设置文本内容</span>
    1192. 

  1192. document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>data <span class="token operator">=</span> <span class="token string">'Hello World'</span><span class="token punctuation">;</span>
    1193. 

  1193. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="_2-2-wholetext-当前文本和毗邻文本节-作为整体返回"><a href="#_2-2-wholetext-当前文本和毗邻文本节-作为整体返回" class="header-anchor">#</a> 2.2 wholeText 当前文本和毗邻文本节，作为整体返回</h4> <p><code>wholeText</code>属性<strong>将当前文本节点与毗邻的文本节点，作为一个整体返回</strong>。大多数情况下，<code>wholeText</code>属性的返回值，与<code>data</code>属性和<code>textContent</code>属性相同。但是，某些特殊情况会有差异。</p> <p>举例来说，HTML 代码如下。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>p id<span class="token operator">=</span><span class="token string">&quot;para&quot;</span><span class="token operator">&gt;</span><span class="token constant">A</span> <span class="token operator">&lt;</span>em<span class="token operator">&gt;</span><span class="token constant">B</span><span class="token operator">&lt;</span><span class="token operator">/</span>em<span class="token operator">&gt;</span> <span class="token constant">C</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
    1194. 

  1194. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>这时，文本节点的<code>wholeText</code>属性和<code>data</code>属性，返回值相同。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'para'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1195. 

  1195. el<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>wholeText <span class="token comment">// &quot;A &quot;</span>
    1196. 

  1196. el<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>data <span class="token comment">// &quot;A &quot;</span>
    1197. 

  1197. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>但是，一旦移除<code>&lt;em&gt;</code>节点，<code>wholeText</code>属性与<code>data</code>属性就会有差异，因为这时其实<code>&lt;p&gt;</code>节点下面包含了两个毗邻的文本节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>el<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>para<span class="token punctuation">.</span>childNodes<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1198. 

  1198. el<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>wholeText <span class="token comment">// &quot;A C&quot;</span>
    1199. 

  1199. el<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>data <span class="token comment">// &quot;A &quot;</span>
    1200. 

  1200. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h4 id="_2-3-length-文本长度"><a href="#_2-3-length-文本长度" class="header-anchor">#</a> 2.3 length 文本长度</h4> <p><code>length</code>属性<strong>返回当前文本节点的文本长度</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token comment">// 5</span>
    1201. 

  1201. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="_2-4-nextelementsibling-后一个兄弟元素节点-previouselementsibling-前一个兄弟元素节点"><a href="#_2-4-nextelementsibling-后一个兄弟元素节点-previouselementsibling-前一个兄弟元素节点" class="header-anchor">#</a> 2.4 nextElementSibling 后一个兄弟元素节点，previousElementSibling 前一个兄弟元素节点</h4> <p><code>nextElementSibling</code>属性<strong>返回紧跟在当前文本节点后面的那个同级元素节点</strong>。如果取不到元素节点，则返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 为</span>
    1202. 

  1202. <span class="token comment">// &lt;div&gt;Hello &lt;em&gt;World&lt;/em&gt;&lt;/div&gt;</span>
    1203. 

  1203. <span class="token keyword">var</span> tn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>firstChild<span class="token punctuation">;</span>
    1204. 

  1204. tn<span class="token punctuation">.</span>nextElementSibling
    1205. 

  1205. <span class="token comment">// &lt;em&gt;World&lt;/em&gt;</span>
    1206. 

  1206. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><code>previousElementSibling</code>属性<strong>返回当前文本节点前面最近的同级元素节点</strong>。如果取不到元素节点，则返回<code>null：</code>。</p> <h3 id="_3、text-节点的方法"><a href="#_3、text-节点的方法" class="header-anchor">#</a> 3、Text 节点的方法</h3> <h4 id="_3-1-appenddata-deletedata-insertdata-replacedata-substringdata"><a href="#_3-1-appenddata-deletedata-insertdata-replacedata-substringdata" class="header-anchor">#</a> 3.1 appendData()，deleteData()，insertData()，replaceData()，substringData()</h4> <p>以下5个方法都是<strong>编辑<code>Text</code>节点文本内容的方法</strong>。</p> <ul><li><code>appendData()</code>：在<code>Text</code>节点<strong>尾部追加字符串</strong>。</li> <li><code>deleteData()</code>：<strong>删除<code>Text</code>节点内部的子字符串</strong>，第一个参数为子字符串开始位置，第二个参数为子字符串长度。</li> <li><code>insertData()</code>：在<code>Text</code>节点<strong>插入字符串</strong>，第一个参数为插入位置，第二个参数为插入的子字符串。</li> <li><code>replaceData()</code>：用于<strong>替换文本</strong>，第一个参数为替换开始位置，第二个参数为需要被替换掉的长度，第三个参数为新加入的字符串。</li> <li><code>substringData()</code>：用于<strong>获取子字符串</strong>，第一个参数为子字符串在<code>Text</code>节点中的开始位置，第二个参数为子字符串长度。</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码为</span>
    1207. 

  1207. <span class="token comment">// &lt;p&gt;Hello World&lt;/p&gt;</span>
    1208. 

  1208. <span class="token keyword">var</span> pElementText <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>firstChild<span class="token punctuation">;</span>
    1209. 

  1209. 

  1210. pElementText<span class="token punctuation">.</span><span class="token function">appendData</span><span class="token punctuation">(</span><span class="token string">'!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1211. 

  1211. <span class="token comment">// 页面显示 Hello World!</span>
    1212. 

  1212. pElementText<span class="token punctuation">.</span><span class="token function">deleteData</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1213. 

  1213. <span class="token comment">// 页面显示 Hello W</span>
    1214. 

  1214. pElementText<span class="token punctuation">.</span><span class="token function">insertData</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token string">'Hello '</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1215. 

  1215. <span class="token comment">// 页面显示 Hello WHello</span>
    1216. 

  1216. pElementText<span class="token punctuation">.</span><span class="token function">replaceData</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token string">'World'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1217. 

  1217. <span class="token comment">// 页面显示 Hello WWorld</span>
    1218. 

  1218. pElementText<span class="token punctuation">.</span><span class="token function">substringData</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1219. 

  1219. <span class="token comment">// 页面显示不变，返回&quot;World &quot;</span>
    1220. 

  1220. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h4 id="_3-2-remove-移除text节点"><a href="#_3-2-remove-移除text节点" class="header-anchor">#</a> 3.2 remove() 移除Text节点</h4> <p><code>remove</code>方法用于移除当前<code>Text</code>节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码为</span>
    1221. 

  1221. <span class="token comment">// &lt;p&gt;Hello World&lt;/p&gt;</span>
    1222. 

  1222. document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1223. 

  1223. <span class="token comment">// 现在 HTML 代码为</span>
    1224. 

  1224. <span class="token comment">// &lt;p&gt;&lt;/p&gt;</span>
    1225. 

  1225. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="_3-3-splittext-分割text节点变为两个"><a href="#_3-3-splittext-分割text节点变为两个" class="header-anchor">#</a> 3.3 splitText() 分割Text节点变为两个</h4> <p><code>splitText</code>方法<strong>将<code>Text</code>节点一分为二，变成两个毗邻的<code>Text</code>节点。它的参数就是分割位置（从零开始）</strong>，分割到该位置的字符前结束。如果分割位置不存在，将报错。</p> <p>分割后，该方法<strong>返回分割位置后方的字符串</strong>，而原<code>Text</code>节点变成只包含分割位置前方的字符串。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// html 代码为 &lt;p id=&quot;p&quot;&gt;foobar&lt;/p&gt;</span>
    1226. 

  1226. <span class="token keyword">var</span> p <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1227. 

  1227. <span class="token keyword">var</span> textnode <span class="token operator">=</span> p<span class="token punctuation">.</span>firstChild<span class="token punctuation">;</span>
    1228. 

  1228. 

  1229. <span class="token keyword">var</span> newText <span class="token operator">=</span> textnode<span class="token punctuation">.</span><span class="token function">splitText</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1230. 

  1230. newText <span class="token comment">// &quot;bar&quot;</span>
    1231. 

  1231. textnode <span class="token comment">// &quot;foo&quot;</span>
    1232. 

  1232. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><strong>父元素节点的<code>normalize</code>方法可以将毗邻的两个<code>Text</code>节点合并。</strong></p> <p>接上面的例子，文本节点的<code>splitText</code>方法将一个<code>Text</code>节点分割成两个，父元素的<code>normalize</code>方法可以实现逆操作，将它们合并。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>p<span class="token punctuation">.</span>childNodes<span class="token punctuation">.</span>length <span class="token comment">// 2</span>
    1233. 

  1233. 

  1234. <span class="token comment">// 将毗邻的两个 Text 节点合并</span>
    1235. 

  1235. p<span class="token punctuation">.</span><span class="token function">normalize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1236. 

  1236. p<span class="token punctuation">.</span>childNodes<span class="token punctuation">.</span>length <span class="token comment">// 1</span>
    1237. 

  1237. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_4、documentfragment-文档片段节点"><a href="#_4、documentfragment-文档片段节点" class="header-anchor">#</a> 4、DocumentFragment 文档片段节点</h3> <p><code>DocumentFragment</code>节点代表一个<strong>文档的片段，本身就是一个完整的 DOM 树形结构。它没有父节点</strong>，<code>parentNode</code>返回<code>null</code>，但是<strong>可以插入任意数量的子节点。它不属于当前文档，操作<code>DocumentFragment</code>节点，要比直接操作 DOM 树快得多。</strong></p> <p>它一般用于构建一个 DOM 结构，然后插入当前文档。<code>document.createDocumentFragment</code>方法，以及浏览器原生的<code>DocumentFragment</code>构造函数，可以创建一个空的<code>DocumentFragment</code>节点。然后再使用其他 DOM 方法，向其添加子节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> docFrag <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createDocumentFragment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1238. 

  1238. <span class="token comment">// 等同于</span>
    1239. 

  1239. <span class="token keyword">var</span> docFrag <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">DocumentFragment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1240. 

  1240. 

  1241. <span class="token keyword">var</span> li <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1242. 

  1242. li<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">'Hello World'</span><span class="token punctuation">;</span>
    1243. 

  1243. docFrag<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>li<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1244. 

  1244. 

  1245. document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'ul'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>docFrag<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1246. 

  1246. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>上面代码创建了一个<code>DocumentFragment</code>节点，然后将一个<code>li</code>节点添加在它里面，最后将<code>DocumentFragment</code>节点移动到原文档。</p> <p><strong>注意</strong>，<code>DocumentFragment</code><strong>节点本身不能被插入当前文档</strong>。当它作为<code>appendChild()</code>、<code>insertBefore()</code>、<code>replaceChild()</code>等方法的参数时，是它的<strong>所有子节点插入当前文档，而不是它自身</strong>。一旦<code>DocumentFragment</code>节点被添加进当前文档，它自身就变成了空节点（<code>textContent</code>属性为空字符串），可以被再次使用。如果想要保存<code>DocumentFragment</code>节点的内容，可以使用<code>cloneNode</code>方法。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document
    1247. 

  1247.   <span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'ul'</span><span class="token punctuation">)</span>
    1248. 

  1248.   <span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>docFrag<span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1249. 

  1249. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面这样添加<code>DocumentFragment</code>节点进入当前文档，不会清空<code>DocumentFragment</code>节点。</p> <p>下面是一个例子，使用<code>DocumentFragment</code>反转一个指定节点的所有子节点的顺序。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">reverse</span><span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1250. 

  1250.   <span class="token keyword">var</span> f <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createDocumentFragment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1251. 

  1251.   <span class="token keyword">while</span><span class="token punctuation">(</span>n<span class="token punctuation">.</span>lastChild<span class="token punctuation">)</span> f<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>n<span class="token punctuation">.</span>lastChild<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1252. 

  1252.   n<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>f<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1253. 

  1253. <span class="token punctuation">}</span>
    1254. 

  1254. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><code>DocumentFragment</code>节点对象<strong>没有自己的属性和方法，全部继承自<code>Node</code>节点和<code>ParentNode</code>接口</strong>。也就是说，<code>DocumentFragment</code>节点比<code>Node</code>节点多出以下四个属性。</p> <ul><li><code>children</code>：返回一个动态的<code>HTMLCollection</code>集合对象，包括当前<code>DocumentFragment</code>对象的所有子元素节点。</li> <li><code>firstElementChild</code>：返回当前<code>DocumentFragment</code>对象的第一个子元素节点，如果没有则返回<code>null</code>。</li> <li><code>lastElementChild</code>：返回当前<code>DocumentFragment</code>对象的最后一个子元素节点，如果没有则返回<code>null</code>。</li> <li><code>childElementCount</code>：返回当前<code>DocumentFragment</code>对象的所有子元素数量。</li></ul> <h2 id="八、css-操作"><a href="#八、css-操作" class="header-anchor">#</a> 八、CSS 操作</h2> <p>CSS 与 JavaScript 是两个有着明确分工的领域，前者负责页面的视觉效果，后者负责与用户的行为互动。但是，它们毕竟同属网页开发的前端，因此不可避免有着交叉和互相配合。本章介绍如何<strong>通过 JavaScript 操作 CSS</strong>。</p> <h3 id="_1、html-元素的-style-属性"><a href="#_1、html-元素的-style-属性" class="header-anchor">#</a> 1、HTML 元素的 style 属性</h3> <p>操作 CSS 样式最简单的方法，就是使用网页元素节点的<code>getAttribute()</code>方法、<code>setAttribute()</code>方法和<code>removeAttribute()</code>方法，直接读写或删除网页元素的<code>style</code>属性。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>div<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span>
    1255. 

  1255.   <span class="token string">'style'</span><span class="token punctuation">,</span>
    1256. 

  1256.   <span class="token string">'background-color:red;'</span> <span class="token operator">+</span> <span class="token string">'border:1px solid black;'</span>
    1257. 

  1257. <span class="token punctuation">)</span><span class="token punctuation">;</span>
    1258. 

  1258. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>上面的代码相当于下面的 HTML 代码。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>div style<span class="token operator">=</span><span class="token string">&quot;background-color:red; border:1px solid black;&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    1259. 

  1259. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong><code>style</code>不仅可以使用字符串读写，它本身还是一个对象</strong>，部署了 CSSStyleDeclaration 接口（详见下面的介绍），<strong>可以直接读写个别属性</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>e<span class="token punctuation">.</span>style<span class="token punctuation">.</span>fontSize <span class="token operator">=</span> <span class="token string">'18px'</span><span class="token punctuation">;</span>
    1260. 

  1260. e<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'black'</span><span class="token punctuation">;</span>
    1261. 

  1261. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="_2、cssstyledeclaration-接口"><a href="#_2、cssstyledeclaration-接口" class="header-anchor">#</a> 2、CSSStyleDeclaration 接口</h3> <h4 id="_2-1-简介-用来操作元素的样式-可读写"><a href="#_2-1-简介-用来操作元素的样式-可读写" class="header-anchor">#</a> 2.1 简介 - 用来操作元素的样式，可读写</h4> <p>CSSStyleDeclaration 接口<strong>用来操作元素的样式</strong>。三个地方部署了这个接口。</p> <ul><li>元素节点的<code>style</code>属性（<code>Element.style</code>）</li> <li><code>CSSStyle</code>实例的<code>style</code>属性</li> <li><code>window.getComputedStyle()</code>的返回值</li></ul> <p>CSSStyleDeclaration 接口<strong>可以直接读写 CSS 的样式属性</strong>，不过，连词号需要变成骆驼拼写法。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> divStyle <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">;</span>
    1262. 

  1262. 

  1263. <span class="token comment">// 可读写</span>
    1264. 

  1264. divStyle<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'red'</span><span class="token punctuation">;</span>
    1265. 

  1265. divStyle<span class="token punctuation">.</span>border <span class="token operator">=</span> <span class="token string">'1px solid black'</span><span class="token punctuation">;</span>
    1266. 

  1266. divStyle<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token string">'100px'</span><span class="token punctuation">;</span>
    1267. 

  1267. divStyle<span class="token punctuation">.</span>height <span class="token operator">=</span> <span class="token string">'100px'</span><span class="token punctuation">;</span>
    1268. 

  1268. divStyle<span class="token punctuation">.</span>fontSize <span class="token operator">=</span> <span class="token string">'10em'</span><span class="token punctuation">;</span>
    1269. 

  1269. 

  1270. <span class="token comment">// 注意，读的样式只是行内样式，不能读取样式表的样式</span>
    1271. 

  1271. divStyle<span class="token punctuation">.</span>backgroundColor <span class="token comment">// red</span>
    1272. 

  1272. divStyle<span class="token punctuation">.</span>border <span class="token comment">// 1px solid black</span>
    1273. 

  1273. divStyle<span class="token punctuation">.</span>height <span class="token comment">// 100px</span>
    1274. 

  1274. divStyle<span class="token punctuation">.</span>width <span class="token comment">// 100px</span>
    1275. 

  1275. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>上面代码中，<code>style</code>属性的值是一个 CSSStyleDeclaration 实例。<strong>这个对象所包含的属性与 CSS 规则一一对应</strong>，但是名字需要改写，比如<code>background-color</code>写成<code>backgroundColor</code>。改写的规则是将横杠从 CSS 属性名中去除，然后将横杠后的第一个字母大写。如果 CSS 属性名是 JavaScript 保留字，则规则名之前需要加上字符串<code>css</code>，比如**<code>float</code>写成<code>cssFloat</code>**。</p> <p><strong>改写规则：烤串变驼峰，保留字前加<code>css</code></strong></p> <p>注意，该对象的属性值都是字符串，设置时必须包括单位，但是不含规则结尾的分号。比如，<code>divStyle.width</code>不能写为<code>100</code>，而要写为<code>100px</code>。</p> <p>另外，<strong><code>Element.style</code>返回的只是行内样式，并不是该元素的全部样式</strong>。通过样式表设置的样式，或者从父元素继承的样式，无法通过这个属性得到。<strong>元素的全部样式要通过<code>window.getComputedStyle()</code>得到。</strong></p> <h4 id="_2-2-cssstyledeclaration-实例属性"><a href="#_2-2-cssstyledeclaration-实例属性" class="header-anchor">#</a> 2.2 CSSStyleDeclaration 实例属性</h4> <h5 id="_1-cssstyledeclaration-csstext-用来读写所有行内样式"><a href="#_1-cssstyledeclaration-csstext-用来读写所有行内样式" class="header-anchor">#</a> （1）CSSStyleDeclaration.cssText 用来读写所有行内样式</h5> <p><code>CSSStyleDeclaration.cssText</code>属性<strong>用来读写当前规则的所有样式声明文本</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> divStyle <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">;</span>
    1276. 

  1276. 

  1277. divStyle<span class="token punctuation">.</span>cssText <span class="token operator">=</span> <span class="token string">'background-color: red;'</span> <span class="token comment">// 会覆盖原有的整个行内样式</span>
    1278. 

  1278.   <span class="token operator">+</span> <span class="token string">'border: 1px solid black;'</span>
    1279. 

  1279.   <span class="token operator">+</span> <span class="token string">'height: 100px;'</span>
    1280. 

  1280.   <span class="token operator">+</span> <span class="token string">'width: 100px;'</span><span class="token punctuation">;</span>
    1281. 

  1281. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>注意，<code>cssText</code>的属性值不用改写 CSS 属性名。</p> <p><strong>删除一个元素的所有行内样式，最简便的方法就是设置<code>cssText</code>为空字符串。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>divStyle<span class="token punctuation">.</span>cssText <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
    1282. 

  1282. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h5 id="_2-cssstyledeclaration-length-行内样式的长度"><a href="#_2-cssstyledeclaration-length-行内样式的长度" class="header-anchor">#</a> （2）CSSStyleDeclaration.length 行内样式的长度</h5> <p><code>CSSStyleDeclaration.length</code>属性<strong>返回一个整数值，表示当前规则包含多少条样式声明。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    1283. 

  1283. <span class="token comment">// &lt;div id=&quot;myDiv&quot;</span>
    1284. 

  1284. <span class="token comment">//   style=&quot;height: 1px;width: 100%;background-color: #CA1;&quot;</span>
    1285. 

  1285. <span class="token comment">// &gt;&lt;/div&gt;</span>
    1286. 

  1286. <span class="token keyword">var</span> myDiv <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myDiv'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1287. 

  1287. <span class="token keyword">var</span> divStyle <span class="token operator">=</span> myDiv<span class="token punctuation">.</span>style<span class="token punctuation">;</span>
    1288. 

  1288. divStyle<span class="token punctuation">.</span>length <span class="token comment">// 3</span>
    1289. 

  1289. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>上面代码中，<code>myDiv</code>元素的行内样式共包含3条样式规则。</p> <h5 id="_3-cssstyledeclaration-parentrule-返回当前规则所属的那个样式块"><a href="#_3-cssstyledeclaration-parentrule-返回当前规则所属的那个样式块" class="header-anchor">#</a> （3）CSSStyleDeclaration.parentRule 返回当前规则所属的那个样式块</h5> <p><code>CSSStyleDeclaration.parentRule</code>属性<strong>返回当前规则所属的那个样式块</strong>（CSSRule 实例）。如果不存在所属的样式块，该属性返回<code>null</code>。</p> <p>该属性只读，且只在使用 CSSRule 接口时有意义。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> declaration <span class="token operator">=</span> document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>rules<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>style<span class="token punctuation">;</span>
    1290. 

  1290. declaration<span class="token punctuation">.</span>parentRule <span class="token operator">===</span> document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>rules<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
    1291. 

  1291. <span class="token comment">// true</span>
    1292. 

  1292. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h4 id="_2-3-cssstyledeclaration-实例方法"><a href="#_2-3-cssstyledeclaration-实例方法" class="header-anchor">#</a> 2.3 CSSStyleDeclaration 实例方法</h4> <h5 id="_1-cssstyledeclaration-getpropertypriority-指定样式有没有设置important优先级"><a href="#_1-cssstyledeclaration-getpropertypriority-指定样式有没有设置important优先级" class="header-anchor">#</a> （1）CSSStyleDeclaration.getPropertyPriority() 指定样式有没有设置important优先级</h5> <p><code>CSSStyleDeclaration.getPropertyPriority</code>方法<strong>接受 CSS 样式的属性名作为参数，返回一个字符串，表示有没有设置<code>important</code>优先级。如果有就返回<code>important</code>，否则返回空字符串。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码为</span>
    1293. 

  1293. <span class="token comment">// &lt;div id=&quot;myDiv&quot; style=&quot;margin: 10px!important; color: red;&quot;/&gt;</span>
    1294. 

  1294. <span class="token keyword">var</span> style <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myDiv'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">;</span>
    1295. 

  1295. style<span class="token punctuation">.</span>margin <span class="token comment">// &quot;10px&quot;</span>
    1296. 

  1296. style<span class="token punctuation">.</span><span class="token function">getPropertyPriority</span><span class="token punctuation">(</span><span class="token string">'margin'</span><span class="token punctuation">)</span> <span class="token comment">// &quot;important&quot;</span>
    1297. 

  1297. style<span class="token punctuation">.</span><span class="token function">getPropertyPriority</span><span class="token punctuation">(</span><span class="token string">'color'</span><span class="token punctuation">)</span> <span class="token comment">// &quot;&quot;</span>
    1298. 

  1298. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>上面代码中，<code>margin</code>属性有<code>important</code>优先级，<code>color</code>属性没有。</p> <h5 id="_2-cssstyledeclaration-getpropertyvalue-返回指定样式的值"><a href="#_2-cssstyledeclaration-getpropertyvalue-返回指定样式的值" class="header-anchor">#</a> （2）CSSStyleDeclaration.getPropertyValue() 返回指定样式的值</h5> <p><code>CSSStyleDeclaration.getPropertyValue</code>方法<strong>接受 CSS 样式属性名作为参数，返回一个字符串，表示该属性的属性值。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码为</span>
    1299. 

  1299. <span class="token comment">// &lt;div id=&quot;myDiv&quot; style=&quot;margin: 10px!important; color: red;&quot;/&gt;</span>
    1300. 

  1300. <span class="token keyword">var</span> style <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myDiv'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">;</span>
    1301. 

  1301. style<span class="token punctuation">.</span>margin <span class="token comment">// &quot;10px&quot;</span>
    1302. 

  1302. style<span class="token punctuation">.</span><span class="token function">getPropertyValue</span><span class="token punctuation">(</span><span class="token string">&quot;margin&quot;</span><span class="token punctuation">)</span> <span class="token comment">// &quot;10px&quot;</span>
    1303. 

  1303. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h5 id="_3-cssstyledeclaration-item-返回指定位置的css属性名"><a href="#_3-cssstyledeclaration-item-返回指定位置的css属性名" class="header-anchor">#</a> （3）CSSStyleDeclaration.item() 返回指定位置的CSS属性名</h5> <p><code>CSSStyleDeclaration.item</code>方法<strong>接受一个整数值作为参数，返回该位置的 CSS 属性名</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码为</span>
    1304. 

  1304. <span class="token comment">// &lt;div id=&quot;myDiv&quot; style=&quot;color: red; background-color: white;&quot;/&gt;</span>
    1305. 

  1305. <span class="token keyword">var</span> style <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myDiv'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">;</span>
    1306. 

  1306. style<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">// &quot;color&quot;</span>
    1307. 

  1307. style<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// &quot;background-color&quot;</span>
    1308. 

  1308. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面代码中，<code>0</code>号位置的 CSS 属性名是<code>color</code>，<code>1</code>号位置的 CSS 属性名是<code>background-color</code>。</p> <p>如果没有提供参数，这个方法会报错。如果参数值超过实际的属性数目，这个方法返回一个空字符值。</p> <h5 id="_4-cssstyledeclaration-removeproperty-移除指定css属性-并返回原来的值"><a href="#_4-cssstyledeclaration-removeproperty-移除指定css属性-并返回原来的值" class="header-anchor">#</a> （4）CSSStyleDeclaration.removeProperty() 移除指定CSS属性，并返回原来的值</h5> <p><code>CSSStyleDeclaration.removeProperty</code>方法<strong>接受一个属性名作为参数，在 CSS 规则里面移除这个属性，返回这个属性原来的值。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码为</span>
    1309. 

  1309. <span class="token comment">// &lt;div id=&quot;myDiv&quot; style=&quot;color: red; background-color: white;&quot;&gt;</span>
    1310. 

  1310. <span class="token comment">//   111</span>
    1311. 

  1311. <span class="token comment">// &lt;/div&gt;</span>
    1312. 

  1312. <span class="token keyword">var</span> style <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myDiv'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">;</span>
    1313. 

  1313. style<span class="token punctuation">.</span><span class="token function">removeProperty</span><span class="token punctuation">(</span><span class="token string">'color'</span><span class="token punctuation">)</span> <span class="token comment">// 'red'</span>
    1314. 

  1314. <span class="token comment">// HTML 代码变为</span>
    1315. 

  1315. <span class="token comment">// &lt;div id=&quot;myDiv&quot; style=&quot;background-color: white;&quot;&gt;</span>
    1316. 

  1316. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>上面代码中，删除<code>color</code>属性以后，字体颜色从红色变成默认颜色。</p> <h5 id="_5-cssstyledeclaration-setproperty-设置新的-css-属性"><a href="#_5-cssstyledeclaration-setproperty-设置新的-css-属性" class="header-anchor">#</a> （5）CSSStyleDeclaration.setProperty() 设置新的 CSS 属性</h5> <p><code>CSSStyleDeclaration.setProperty</code>方法用来<strong>设置新的 CSS 属性</strong>。该方法没有返回值。</p> <p>该方法可以接受三个参数。</p> <ul><li>第一个参数：属性名，该参数是必需的。</li> <li>第二个参数：属性值，该参数可选。如果省略，则参数值默认为空字符串。</li> <li>第三个参数：优先级，该参数可选。如果设置，唯一的合法值是<code>important</code>，表示 CSS 规则里面的<code>!important</code>。</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码为</span>
    1317. 

  1317. <span class="token comment">// &lt;div id=&quot;myDiv&quot; style=&quot;color: red; background-color: white;&quot;&gt;</span>
    1318. 

  1318. <span class="token comment">//   111</span>
    1319. 

  1319. <span class="token comment">// &lt;/div&gt;</span>
    1320. 

  1320. <span class="token keyword">var</span> style <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myDiv'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">;</span>
    1321. 

  1321. style<span class="token punctuation">.</span><span class="token function">setProperty</span><span class="token punctuation">(</span><span class="token string">'border'</span><span class="token punctuation">,</span> <span class="token string">'1px solid blue'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1322. 

  1322. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>上面代码执行后，<code>myDiv</code>元素就会出现蓝色的边框。</p> <h3 id="_3、css-模块的侦测-判断浏览器是否支持某个样式"><a href="#_3、css-模块的侦测-判断浏览器是否支持某个样式" class="header-anchor">#</a> 3、CSS 模块的侦测（判断浏览器是否支持某个样式）</h3> <p>CSS 的规格发展太快，新的模块层出不穷。不同浏览器的不同版本，对 CSS 模块的支持情况都不一样。有时候，<strong>需要知道当前浏览器是否支持某个模块，这就叫做“CSS模块的侦测”。</strong></p> <p><strong>判断浏览器是否支持某个样式</strong></p> <p>一个比较普遍适用的方法是，判断元素的<code>style</code>对象的某个属性值是否为字符串。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">typeof</span> element<span class="token punctuation">.</span>style<span class="token punctuation">.</span>animationName <span class="token operator">===</span> <span class="token string">'string'</span><span class="token punctuation">;</span>
    1323. 

  1323. <span class="token keyword">typeof</span> element<span class="token punctuation">.</span>style<span class="token punctuation">.</span>transform <span class="token operator">===</span> <span class="token string">'string'</span><span class="token punctuation">;</span>
    1324. 

  1324. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>如果该 CSS 属性确实存在，会返回一个字符串。即使该属性实际上并未设置，也会返回一个空字符串。如果该属性不存在，则会返回<code>undefined</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">[</span><span class="token string">'maxWidth'</span><span class="token punctuation">]</span> <span class="token comment">// &quot;&quot;</span>
    1325. 

  1325. document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">[</span><span class="token string">'maximumWidth'</span><span class="token punctuation">]</span> <span class="token comment">// undefined</span>
    1326. 

  1326. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码说明，这个浏览器支持<code>max-width</code>属性，但是不支持<code>maximum-width</code>属性。</p> <p>注意，不管 CSS 属性名的写法带不带连词线，<code>style</code>属性上都能反映出该属性是否存在。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">[</span><span class="token string">'backgroundColor'</span><span class="token punctuation">]</span> <span class="token comment">// &quot;&quot;</span>
    1327. 

  1327. document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">[</span><span class="token string">'background-color'</span><span class="token punctuation">]</span> <span class="token comment">// &quot;&quot;</span>
    1328. 

  1328. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>另外，使用的时候，需要把不同浏览器的 CSS 前缀也考虑进去。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> content <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'content'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1329. 

  1329. <span class="token keyword">typeof</span> content<span class="token punctuation">.</span>style<span class="token punctuation">[</span><span class="token string">'webkitAnimation'</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'string'</span>
    1330. 

  1330. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>这种侦测方法可以写成一个函数。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">isPropertySupported</span><span class="token punctuation">(</span><span class="token parameter">property</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1331. 

  1331.   <span class="token keyword">if</span> <span class="token punctuation">(</span>property <span class="token keyword">in</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    1332. 

  1332.   <span class="token keyword">var</span> prefixes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Moz'</span><span class="token punctuation">,</span> <span class="token string">'Webkit'</span><span class="token punctuation">,</span> <span class="token string">'O'</span><span class="token punctuation">,</span> <span class="token string">'ms'</span><span class="token punctuation">,</span> <span class="token string">'Khtml'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    1333. 

  1333.   <span class="token keyword">var</span> prefProperty <span class="token operator">=</span> property<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> property<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1334. 

  1334. 

  1335.   <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> prefixes<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    1336. 

  1336.     <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token punctuation">(</span>prefixes<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">+</span> prefProperty<span class="token punctuation">)</span> <span class="token keyword">in</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    1337. 

  1337.   <span class="token punctuation">}</span>
    1338. 

  1338. 

  1339.   <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    1340. 

  1340. <span class="token punctuation">}</span>
    1341. 

  1341. 

  1342. <span class="token function">isPropertySupported</span><span class="token punctuation">(</span><span class="token string">'background-clip'</span><span class="token punctuation">)</span>
    1343. 

  1343. <span class="token comment">// true</span>
    1344. 

  1344. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="_4、原生css-对象"><a href="#_4、原生css-对象" class="header-anchor">#</a> 4、原生CSS 对象</h3> <p><strong>浏览器原生提供 CSS 对象，为 JavaScript 操作 CSS 提供一些工具方法。</strong></p> <p>这个对象目前有两个静态方法。</p> <h4 id="_4-1-css-escape-转义css选择器里的特殊字符"><a href="#_4-1-css-escape-转义css选择器里的特殊字符" class="header-anchor">#</a> 4.1 CSS.escape() 转义CSS选择器里的特殊字符</h4> <p><code>CSS.escape</code>方法<strong>用于转义 CSS 选择器里面的特殊字符。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">&quot;foo#bar&quot;</span><span class="token operator">&gt;</span>
    1345. 

  1345. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码中，该元素的<code>id</code>属性包含一个<code>#</code>号，该字符在 CSS 选择器里面有特殊含义。不能直接写成<code>document.querySelector('#foo#bar')</code>，只能写成<code>document.querySelector('#foo\\#bar')</code>。这里必须使用双斜杠的原因是，单引号字符串本身会转义一次斜杠。</p> <p><code>CSS.escape</code>方法就用来转义那些特殊字符。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#'</span> <span class="token operator">+</span> <span class="token constant">CSS</span><span class="token punctuation">.</span><span class="token function">escape</span><span class="token punctuation">(</span><span class="token string">'foo#bar'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    1346. 

  1346. <span class="token comment">//CSS.escape('foo#bar')转义成foo\#bar</span>
    1347. 

  1347. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="_4-2-css-supports-当前环境是否支持某一句-css-规则"><a href="#_4-2-css-supports-当前环境是否支持某一句-css-规则" class="header-anchor">#</a> 4.2 CSS.supports() 当前环境是否支持某一句 CSS 规则</h4> <p><code>CSS.supports</code>方法<strong>返回一个布尔值，表示当前环境是否支持某一句 CSS 规则</strong>。</p> <p>它的参数有两种写法，一种是第一个参数是属性名，第二个参数是属性值；另一种是整个参数就是一行完整的 CSS 语句。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 第一种写法</span>
    1348. 

  1348. <span class="token constant">CSS</span><span class="token punctuation">.</span><span class="token function">supports</span><span class="token punctuation">(</span><span class="token string">'transform-origin'</span><span class="token punctuation">,</span> <span class="token string">'5px'</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
    1349. 

  1349. 

  1350. <span class="token comment">// 第二种写法</span>
    1351. 

  1351. <span class="token constant">CSS</span><span class="token punctuation">.</span><span class="token function">supports</span><span class="token punctuation">(</span><span class="token string">'display: table-cell'</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
    1352. 

  1352. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>注意，第二种写法的参数结尾不能带有分号，否则结果不准确。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token constant">CSS</span><span class="token punctuation">.</span><span class="token function">supports</span><span class="token punctuation">(</span><span class="token string">'display: table-cell;'</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
    1353. 

  1353. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_5、window-getcomputedstyle-返回元素最终样式"><a href="#_5、window-getcomputedstyle-返回元素最终样式" class="header-anchor">#</a> 5、window.getComputedStyle() 返回元素最终样式</h3> <p>行内样式（inline style）具有最高的优先级，改变行内样式，通常会立即反映出来。但是，网页元素最终的样式是综合各种规则计算出来的。因此，如果想得到元素实际的样式，只读取行内样式是不够的，需要得到浏览器最终计算出来的样式规则。</p> <p><code>window.getComputedStyle</code>方法，就用来<strong>返回浏览器计算后得到的最终样式规则</strong>。它接受一个元素节点对象作为参数，返回一个 CSSStyleDeclaration 实例，包含了指定节点的最终样式信息。所谓“最终样式信息”，指的是各种 CSS 规则叠加后的结果。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1354. 

  1354. <span class="token keyword">var</span> styleObj <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getComputedStyle</span><span class="token punctuation">(</span>div<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1355. 

  1355. styleObj<span class="token punctuation">.</span>backgroundColor
    1356. 

  1356. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码中，得到的背景色就是<code>div</code>元素真正的背景色。</p> <p>注意，CSSStyleDeclaration 实例是一个<strong>活的对象</strong>，任何对于样式的修改，会实时反映到这个实例上面。另外，这个实例是<strong>只读的</strong>。</p> <p><code>getComputedStyle</code>方法还可以接受第二个参数，表示当前元素的伪元素（比如<code>:before</code>、<code>:after</code>、<code>:first-line</code>、<code>:first-letter</code>等）。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> result <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getComputedStyle</span><span class="token punctuation">(</span>div<span class="token punctuation">,</span> <span class="token string">':before'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1357. 

  1357. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>下面的例子是如何获取元素的高度。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> elem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'elem-container'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1358. 

  1358. <span class="token keyword">var</span> styleObj <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getComputedStyle</span><span class="token punctuation">(</span>elem<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span>
    1359. 

  1359. <span class="token keyword">var</span> height <span class="token operator">=</span> styleObj<span class="token punctuation">.</span>height<span class="token punctuation">;</span> <span class="token comment">// 得到元素最终渲染出来的高度，最可靠</span>
    1360. 

  1360. <span class="token comment">// 等同于</span>
    1361. 

  1361. <span class="token keyword">var</span> height <span class="token operator">=</span> styleObj<span class="token punctuation">[</span><span class="token string">'height'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    1362. 

  1362. <span class="token keyword">var</span> height <span class="token operator">=</span> styleObj<span class="token punctuation">.</span><span class="token function">getPropertyValue</span><span class="token punctuation">(</span><span class="token string">'height'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1363. 

  1363. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>上面代码得到的<code>height</code>属性，是浏览器最终渲染出来的高度，比其他方法得到的高度更可靠。由于<code>styleObj</code>是 CSSStyleDeclaration 实例，所以可以使用各种 CSSStyleDeclaration 的实例属性和方法。</p> <p>有几点需要注意。</p> <ul><li>CSSStyleDeclaration 实例返回的 CSS 值都是绝对单位。比如，<strong>长度都是像素单位</strong>（返回值包括<code>px</code>后缀），<strong>颜色是<code>rgb(#, #, #)</code>或<code>rgba(#, #, #, #)</code>格式</strong>。</li> <li>CSS 规则的<strong>简写形式无效</strong>。比如，想读取<code>margin</code>属性的值，不能直接读，只能读<code>marginLeft</code>、<code>marginTop</code>等属性；再比如，<code>font</code>属性也是不能直接读的，只能读<code>font-size</code>等单个属性。</li> <li>如果读取 CSS 原始的属性名，要用方括号运算符，比如<code>styleObj['z-index']</code>；如果读取骆驼拼写法的 CSS 属性名，可以直接读取<code>styleObj.zIndex</code>。</li> <li>该方法返回的 CSSStyleDeclaration 实例的<code>cssText</code>属性无效，返回<code>undefined</code>。</li></ul> <h3 id="_6、css-伪元素样式的获取"><a href="#_6、css-伪元素样式的获取" class="header-anchor">#</a> 6、CSS 伪元素样式的获取</h3> <p>CSS 伪元素是通过 CSS 向 DOM 添加的元素，主要是通过<code>:before</code>和<code>:after</code>选择器生成，然后用<code>content</code>属性指定伪元素的内容。</p> <p>下面是一段 HTML 代码。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Test content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    1364. 

  1364. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>CSS 添加伪元素<code>:before</code>的写法如下。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">#test:before</span> <span class="token punctuation">{</span>
    1365. 

  1365.   <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'Before '</span><span class="token punctuation">;</span>
    1366. 

  1366.   <span class="token property">color</span><span class="token punctuation">:</span> #FF0<span class="token punctuation">;</span>
    1367. 

  1367. <span class="token punctuation">}</span>
    1368. 

  1368. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>节点元素的<code>style</code>对象无法读写伪元素的样式，这时就要用到<code>window.getComputedStyle()</code></strong>。JavaScript 获取伪元素，可以使用下面的方法。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> test <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1369. 

  1369. 

  1370. <span class="token keyword">var</span> result <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getComputedStyle</span><span class="token punctuation">(</span>test<span class="token punctuation">,</span> <span class="token string">':before'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>content<span class="token punctuation">;</span>
    1371. 

  1371. <span class="token keyword">var</span> color <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getComputedStyle</span><span class="token punctuation">(</span>test<span class="token punctuation">,</span> <span class="token string">':before'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>color<span class="token punctuation">;</span>
    1372. 

  1372. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>此外，<strong>也可以使用 CSSStyleDeclaration 实例的<code>getPropertyValue</code>方法</strong>，获取伪元素的属性。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> result <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getComputedStyle</span><span class="token punctuation">(</span>test<span class="token punctuation">,</span> <span class="token string">':before'</span><span class="token punctuation">)</span>
    1373. 

  1373.   <span class="token punctuation">.</span><span class="token function">getPropertyValue</span><span class="token punctuation">(</span><span class="token string">'content'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1374. 

  1374. <span class="token keyword">var</span> color <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getComputedStyle</span><span class="token punctuation">(</span>test<span class="token punctuation">,</span> <span class="token string">':before'</span><span class="token punctuation">)</span>
    1375. 

  1375.   <span class="token punctuation">.</span><span class="token function">getPropertyValue</span><span class="token punctuation">(</span><span class="token string">'color'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1376. 

  1376. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="_7、stylesheet-接口"><a href="#_7、stylesheet-接口" class="header-anchor">#</a> 7、StyleSheet 接口</h3> <h4 id="_7-1-概述"><a href="#_7-1-概述" class="header-anchor">#</a> 7.1 概述</h4> <p><code>StyleSheet</code>接口代表网页的一张样式表，包括<code>&lt;link&gt;</code>元素加载的样式表和<code>&lt;style&gt;</code>元素内嵌的样式表。</p> <p><strong><code>document</code>对象的<code>styleSheets</code>属性</strong>，可以返回当前页面的所有<code>StyleSheet</code>实例（即<strong>所有样式表</strong>）。它是一个<strong>类似数组的对象</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> sheets <span class="token operator">=</span> document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">;</span>
    1377. 

  1377. <span class="token keyword">var</span> sheet <span class="token operator">=</span> document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    1378. 

  1378. sheet <span class="token keyword">instanceof</span> <span class="token class-name">StyleSheet</span> <span class="token comment">// true</span>
    1379. 

  1379. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>如果是<code>&lt;style&gt;</code>元素嵌入的样式表，还有<strong>另一种获取<code>StyleSheet</code>实例的方法</strong>，就是这个节点元素的<code>sheet</code>属性。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码为 &lt;style id=&quot;myStyle&quot;&gt;&lt;/style&gt;</span>
    1380. 

  1380. <span class="token keyword">var</span> myStyleSheet <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myStyle'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>sheet<span class="token punctuation">;</span><span class="token comment">// 另一种获取styleSheet方式</span>
    1381. 

  1381. myStyleSheet <span class="token keyword">instanceof</span> <span class="token class-name">StyleSheet</span> <span class="token comment">// true</span>
    1382. 

  1382. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>严格地说，<code>StyleSheet</code>接口不仅包括网页样式表，还包括 XML 文档的样式表。所以，<strong>它有一个子类<code>CSSStyleSheet</code><strong>表示网页的 CSS 样式表。我们在网页里面拿到的样式表实例，实际上是<code>CSSStyleSheet</code>的实例。这个</strong>子接口继承了<code>StyleSheet</code>的所有属性和方法</strong>，<strong>并且定义了几个自己的属性</strong>，下面把这两个接口放在一起介绍。</p> <h4 id="_7-2-实例属性"><a href="#_7-2-实例属性" class="header-anchor">#</a> 7.2 实例属性</h4> <p><code>StyleSheet</code>实例有以下属性。</p> <h5 id="_1-stylesheet-disabled-样式表是否处于禁用状态-可读写"><a href="#_1-stylesheet-disabled-样式表是否处于禁用状态-可读写" class="header-anchor">#</a> （1）StyleSheet.disabled 样式表是否处于禁用状态，可读写</h5> <p><code>StyleSheet.disabled</code>返回一个布尔值，表示该样式表是否处于禁用状态。手动设置<code>disabled</code>属性为<code>true</code>，等同于在<code>&lt;link&gt;</code>元素里面，将这张样式表设为<code>alternate stylesheet</code>，即该样式表将不会生效。</p> <p>注意，<code>disabled</code>属性只能在 JavaScript 脚本中设置，不能在 HTML 语句中设置。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>alternate stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>style.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    1383. 

  1383. <span class="token comment">&lt;!--设置了alternate stylesheet表示禁用此样式表--&gt;</span>
    1384. 

  1384. 

  1385. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    1386. 

  1386.     <span class="token selector">body</span><span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span><span class="token punctuation">}</span>
    1387. 

  1387. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
    1388. 

  1388. 

  1389.  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    1390. 

  1390.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">)</span>
    1391. 

  1391. 

  1392.      <span class="token comment">/*
    1393. 

  1393.      StyleSheetList {}
    1394. 

  1394. 		0: CSSStyleSheet {ownerRule: null, type: &quot;text/css&quot;, href: 		&quot;file:///C:/Users/dell/Desktop/css.css&quot;, ownerNode: link, parentStyleSheet: null, …}
    1395. 

  1395. 		1: CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, type: &quot;text/css&quot;, href: null, …}
    1396. 

  1396. 		length: 2
    1397. 

  1397.      */</span>
    1398. 

  1398. 

  1399.      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>disabled<span class="token punctuation">)</span> <span class="token comment">// false 未禁用？不能判断样式表设置了alternate？</span>
    1400. 

  1400.     document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>disabled <span class="token operator">=</span> <span class="token boolean">true</span>
    1401. 

  1401.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>disabled<span class="token punctuation">)</span> <span class="token comment">// true 已禁用</span>
    1402. 

  1402.  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    1403. 

  1403. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h5 id="_2-stylesheet-href-返回样式表的网址"><a href="#_2-stylesheet-href-返回样式表的网址" class="header-anchor">#</a> （2）Stylesheet.href  返回样式表的网址</h5> <p><code>Stylesheet.href</code><strong>返回样式表的网址</strong>。对于内嵌样式表，该属性返回<code>null</code>。该属性<strong>只读</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>href
    1404. 

  1404. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h5 id="_3-stylesheet-media-返回一个媒介类数组"><a href="#_3-stylesheet-media-返回一个媒介类数组" class="header-anchor">#</a> （3）StyleSheet.media 返回一个媒介类数组</h5> <p><code>StyleSheet.media</code>属性**返回一个类似数组的对象（<code>MediaList</code>实例），成员是表示适用媒介的字符串。**表示当前样式表是用于屏幕（screen），还是用于打印（print）或手持设备（handheld），或各种媒介都适用（all）。该属性只读，默认值是<code>screen</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>media<span class="token punctuation">.</span>mediaText
    1405. 

  1405. <span class="token comment">// &quot;all&quot;</span>
    1406. 

  1406. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><code>MediaList</code>实例的<code>appendMedium</code>方法，用于增加媒介；<code>deleteMedium</code>方法用于删除媒介。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>media<span class="token punctuation">.</span><span class="token function">appendMedium</span><span class="token punctuation">(</span><span class="token string">'handheld'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1407. 

  1407. document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>media<span class="token punctuation">.</span><span class="token function">deleteMedium</span><span class="token punctuation">(</span><span class="token string">'print'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1408. 

  1408. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h5 id="_4-stylesheet-title-返回样式表的title属性"><a href="#_4-stylesheet-title-返回样式表的title属性" class="header-anchor">#</a> （4）StyleSheet.title 返回样式表的<code>title</code>属性</h5> <p><code>StyleSheet.title</code>属性返回样式表的<code>title</code>属性。</p> <h5 id="_5-stylesheet-type-返回样式表的type属性"><a href="#_5-stylesheet-type-返回样式表的type属性" class="header-anchor">#</a> （5）StyleSheet.type 返回样式表的<code>type</code>属性</h5> <p><code>StyleSheet.type</code>属性返回样式表的<code>type</code>属性，通常是<code>text/css</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type  <span class="token comment">// &quot;text/css&quot;</span>
    1409. 

  1409. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h5 id="_6-stylesheet-parentstylesheet-返回父样式表-当前样式表是通过-import加载才有值-否则null"><a href="#_6-stylesheet-parentstylesheet-返回父样式表-当前样式表是通过-import加载才有值-否则null" class="header-anchor">#</a> （6）StyleSheet.parentStyleSheet 返回父样式表，当前样式表是通过@import加载才有值，否则null</h5> <p>CSS 的<code>@import</code>命令允许在样式表中加载其他样式表。<code>StyleSheet.parentStyleSheet</code>属性<strong>返回包含了当前样式表的那张样式表</strong>。如果当前样式表是顶层样式表，则该属性返回<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>stylesheet<span class="token punctuation">.</span>parentStyleSheet<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1410. 

  1410.   sheet <span class="token operator">=</span> stylesheet<span class="token punctuation">.</span>parentStyleSheet<span class="token punctuation">;</span>
    1411. 

  1411. <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    1412. 

  1412.   sheet <span class="token operator">=</span> stylesheet<span class="token punctuation">;</span>
    1413. 

  1413. <span class="token punctuation">}</span>
    1414. 

  1414. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h5 id="_7-stylesheet-ownernode-返回样式表所在的dom节点"><a href="#_7-stylesheet-ownernode-返回样式表所在的dom节点" class="header-anchor">#</a> （7）StyleSheet.ownerNode 返回样式表所在的DOM节点</h5> <p><code>StyleSheet.ownerNode</code>属性<strong>返回<code>StyleSheet</code>对象所在的 DOM 节点，通常是<code>&lt;link&gt;</code>或<code>&lt;style&gt;</code></strong>。对于那些由其他样式表引用的样式表，该属性为<code>null</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML代码为</span>
    1415. 

  1415. <span class="token comment">// &lt;link rel=&quot;StyleSheet&quot; href=&quot;example.css&quot; type=&quot;text/css&quot; /&gt;</span>
    1416. 

  1416. document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>ownerNode <span class="token comment">// [object HTMLLinkElement]</span>
    1417. 

  1417. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h5 id="_8-cssstylesheet-cssrules-返回一个包含所有css规则的类数组"><a href="#_8-cssstylesheet-cssrules-返回一个包含所有css规则的类数组" class="header-anchor">#</a> （8）CSSStyleSheet.cssRules 返回一个包含所有css规则的类数组</h5> <p><code>CSSStyleSheet.cssRules</code>属性**指向一个类似数组的对象（<code>CSSRuleList</code>实例），里面每一个成员就是当前样式表的一条 CSS 规则。**使用该规则的<code>cssText</code>属性，可以得到 CSS 规则对应的字符串。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> sheet <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#styleElement'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>sheet<span class="token punctuation">;</span>
    1418. 

  1418. 

  1419. sheet<span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>cssText
    1420. 

  1420. <span class="token comment">// &quot;body { background-color: red; margin: 20px; }&quot;</span>
    1421. 

  1421. 

  1422. sheet<span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>cssText
    1423. 

  1423. <span class="token comment">// &quot;p { line-height: 1.4em; color: blue; }&quot;</span>
    1424. 

  1424. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>每条 CSS 规则还有一个<code>style</code>属性，指向一个对象，用来<strong>读写具体的 CSS 命令</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>cssStyleSheet<span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'red'</span><span class="token punctuation">;</span>
    1425. 

  1425. cssStyleSheet<span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'purple'</span><span class="token punctuation">;</span>
    1426. 

  1426. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h5 id="_9-cssstylesheet-ownerrule-规则所有者"><a href="#_9-cssstylesheet-ownerrule-规则所有者" class="header-anchor">#</a> （9）CSSStyleSheet.ownerRule 规则所有者</h5> <p>有些样式表是通过<code>@import</code>规则输入的，它的<code>ownerRule</code>属性会返回一个<code>CSSRule</code>实例，代表那行<code>@import</code>规则。如果当前样式表不是通过<code>@import</code>引入的，<code>ownerRule</code>属性返回<code>null</code>。</p> <h4 id="_7-3-实例方法"><a href="#_7-3-实例方法" class="header-anchor">#</a> 7.3 实例方法</h4> <h5 id="_1-cssstylesheet-insertrule-插入css规则"><a href="#_1-cssstylesheet-insertrule-插入css规则" class="header-anchor">#</a> （1）CSSStyleSheet.insertRule() 插入css规则</h5> <p><code>CSSStyleSheet.insertRule</code>方法用于<strong>在当前样式表的插入一个新的 CSS 规则</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> sheet <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#styleElement'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>sheet<span class="token punctuation">;</span>
    1427. 

  1427. sheet<span class="token punctuation">.</span><span class="token function">insertRule</span><span class="token punctuation">(</span><span class="token string">'#block { color: white }'</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1428. 

  1428. sheet<span class="token punctuation">.</span><span class="token function">insertRule</span><span class="token punctuation">(</span><span class="token string">'p { color: red }'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1429. 

  1429. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>该方法可以接受两个参数，第一个参数是表示 CSS 规则的字符串，这里只能有一条规则，否则会报错。第二个参数是该规则在样式表的插入位置（从0开始），该参数可选，默认为0（即默认插在样式表的头部）。注意，如果插入位置大于现有规则的数目，会报错。</p> <p>该方法的返回值是新插入规则的位置序号。</p> <p>注意，浏览器对脚本在样式表里面插入规则有很多<a href="https://drafts.csswg.org/cssom/#insert-a-css-rule" target="_blank" rel="noopener noreferrer">限制<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。所以，这个方法最好放在<code>try...catch</code>里使用。</p> <h5 id="_2-cssstylesheet-deleterule-移除css规则"><a href="#_2-cssstylesheet-deleterule-移除css规则" class="header-anchor">#</a> （2）CSSStyleSheet.deleteRule() 移除css规则</h5> <p><code>CSSStyleSheet.deleteRule</code>方法用来在样式表里面移除一条规则，它的参数是该条规则在<code>cssRules</code>对象中的位置。该方法没有返回值。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">deleteRule</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1430. 

  1430. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_8、实例-添加样式表"><a href="#_8、实例-添加样式表" class="header-anchor">#</a> 8、实例：添加样式表</h3> <p>网页添加样式表有两种方式。一种是添加一张内置样式表，即在文档中添加一个<code>&lt;style&gt;</code>节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 写法一</span>
    1431. 

  1431. <span class="token keyword">var</span> style <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'style'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1432. 

  1432. style<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'media'</span><span class="token punctuation">,</span> <span class="token string">'screen'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1433. 

  1433. style<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'body{color:red}'</span><span class="token punctuation">;</span>
    1434. 

  1434. document<span class="token punctuation">.</span>head<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>style<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1435. 

  1435. 

  1436. <span class="token comment">// 写法二</span>
    1437. 

  1437. <span class="token keyword">var</span> style <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1438. 

  1438.   <span class="token keyword">var</span> style <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'style'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1439. 

  1439.   document<span class="token punctuation">.</span>head<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>style<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1440. 

  1440.   <span class="token keyword">return</span> style<span class="token punctuation">;</span>
    1441. 

  1441. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1442. 

  1442. style<span class="token punctuation">.</span>sheet<span class="token punctuation">.</span><span class="token function">insertRule</span><span class="token punctuation">(</span><span class="token string">'.foo{color:red;}'</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 样式表插入规则</span>
    1443. 

  1443. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>另一种是添加外部样式表，即在文档中添加一个<code>&lt;link&gt;</code>节点，然后将<code>href</code>属性指向外部样式表的 URL。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> linkElm <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'link'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1444. 

  1444. linkElm<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'rel'</span><span class="token punctuation">,</span> <span class="token string">'stylesheet'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1445. 

  1445. linkElm<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">,</span> <span class="token string">'text/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1446. 

  1446. linkElm<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'href'</span><span class="token punctuation">,</span> <span class="token string">'reset-min.css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1447. 

  1447. 

  1448. document<span class="token punctuation">.</span>head<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>linkElm<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1449. 

  1449. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_9、cssrulelist-接口"><a href="#_9、cssrulelist-接口" class="header-anchor">#</a> 9、CSSRuleList 接口</h3> <p>CSSRuleList 接口是<strong>一个类似数组的对象，表示一组 CSS 规则，成员都是 CSSRule 实例</strong>。</p> <p>获取 CSSRuleList 实例，一般是通过<code>StyleSheet.cssRules</code>属性。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    1450. 

  1450. <span class="token comment">// &lt;style id=&quot;myStyle&quot;&gt;</span>
    1451. 

  1451. <span class="token comment">//   h1 { color: red; }</span>
    1452. 

  1452. <span class="token comment">//   p { color: blue; }</span>
    1453. 

  1453. <span class="token comment">// &lt;/style&gt;</span>
    1454. 

  1454. <span class="token keyword">var</span> myStyleSheet <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myStyle'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>sheet<span class="token punctuation">;</span>
    1455. 

  1455. <span class="token keyword">var</span> crl <span class="token operator">=</span> myStyleSheet<span class="token punctuation">.</span>cssRules<span class="token punctuation">;</span>
    1456. 

  1456. crl <span class="token keyword">instanceof</span> <span class="token class-name">CSSRuleList</span> <span class="token comment">// true</span>
    1457. 

  1457. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>CSSRuleList 实例里面，每一条规则（CSSRule 实例）可以通过<code>rules.item(index)</code>或者<code>rules[index]</code>拿到。CSS 规则的条数通过<code>rules.length</code>拿到。还是用上面的例子。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>crl<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token keyword">instanceof</span> <span class="token class-name">CSSRule</span> <span class="token comment">// true</span>
    1458. 

  1458. crl<span class="token punctuation">.</span>length <span class="token comment">// 2</span>
    1459. 

  1459. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>注意，添加规则和删除规则不能在 CSSRuleList 实例操作，而要在它的父元素 StyleSheet 实例上，通过<code>StyleSheet.insertRule()</code>和<code>StyleSheet.deleteRule()</code>操作。</p> <h3 id="_10、cssrule-接口"><a href="#_10、cssrule-接口" class="header-anchor">#</a> 10、CSSRule 接口</h3> <h4 id="_10-1-概述"><a href="#_10-1-概述" class="header-anchor">#</a> 10.1 概述</h4> <p>一条 CSS 规则包括两个部分：CSS 选择器和样式声明。下面就是一条典型的 CSS 规则。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.myClass</span> <span class="token punctuation">{</span>
    1460. 

  1460.   <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    1461. 

  1461.   <span class="token property">background-color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span>
    1462. 

  1462. <span class="token punctuation">}</span>
    1463. 

  1463. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>JavaScript <strong>通过 CSSRule 接口操作 CSS 规则</strong>。一般通过 CSSRuleList 接口（<code>StyleSheet.cssRules</code>）获取 CSSRule 实例。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    1464. 

  1464. <span class="token comment">// &lt;style id=&quot;myStyle&quot;&gt;</span>
    1465. 

  1465. <span class="token comment">//   .myClass {</span>
    1466. 

  1466. <span class="token comment">//     color: red;</span>
    1467. 

  1467. <span class="token comment">//     background-color: yellow;</span>
    1468. 

  1468. <span class="token comment">//   }</span>
    1469. 

  1469. <span class="token comment">// &lt;/style&gt;</span>
    1470. 

  1470. <span class="token keyword">var</span> myStyleSheet <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myStyle'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>sheet<span class="token punctuation">;</span>
    1471. 

  1471. <span class="token keyword">var</span> ruleList <span class="token operator">=</span> myStyleSheet<span class="token punctuation">.</span>cssRules<span class="token punctuation">;</span>
    1472. 

  1472. <span class="token keyword">var</span> rule <span class="token operator">=</span> ruleList<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    1473. 

  1473. rule <span class="token keyword">instanceof</span> <span class="token class-name">CSSRule</span> <span class="token comment">// true</span>
    1474. 

  1474. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h4 id="_10-2-cssrule-实例的属性"><a href="#_10-2-cssrule-实例的属性" class="header-anchor">#</a> 10.2 CSSRule 实例的属性</h4> <h5 id="_1-cssrule-csstext"><a href="#_1-cssrule-csstext" class="header-anchor">#</a> （1）CSSRule.cssText</h5> <p><code>CSSRule.cssText</code>属性<strong>返回当前规则的文本</strong>，还是使用上面的例子。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>rule<span class="token punctuation">.</span>cssText
    1475. 

  1475. <span class="token comment">// &quot;.myClass { color: red; background-color: yellow; }&quot;</span>
    1476. 

  1476. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>如果规则是加载（<code>@import</code>）其他样式表，<code>cssText</code>属性返回<code>@import 'url'</code>。</p> <h5 id="_2-cssrule-parentstylesheet"><a href="#_2-cssrule-parentstylesheet" class="header-anchor">#</a> （2）CSSRule.parentStyleSheet</h5> <p><code>CSSRule.parentStyleSheet</code>属性<strong>返回当前规则所在的样式表对象（StyleSheet 实例）</strong>，还是使用上面的例子。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>rule<span class="token punctuation">.</span>parentStyleSheet <span class="token operator">===</span> myStyleSheet <span class="token comment">// true</span>
    1477. 

  1477. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h5 id="_3-cssrule-parentrule"><a href="#_3-cssrule-parentrule" class="header-anchor">#</a> （3）CSSRule.parentRule</h5> <p><code>CSSRule.parentRule</code>属性<strong>返回包含当前规则的父规则，如果不存在父规则（即当前规则是顶层规则），则返回<code>null</code>。</strong></p> <p>父规则最常见的情况是，当前规则包含在<code>@media</code>规则代码块之中。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    1478. 

  1478. <span class="token comment">// &lt;style id=&quot;myStyle&quot;&gt;</span>
    1479. 

  1479. <span class="token comment">//   @supports (display: flex) {</span>
    1480. 

  1480. <span class="token comment">//     @media screen and (min-width: 900px) {</span>
    1481. 

  1481. <span class="token comment">//       article {</span>
    1482. 

  1482. <span class="token comment">//         display: flex;</span>
    1483. 

  1483. <span class="token comment">//       }</span>
    1484. 

  1484. <span class="token comment">//     }</span>
    1485. 

  1485. <span class="token comment">//  }</span>
    1486. 

  1486. <span class="token comment">// &lt;/style&gt;</span>
    1487. 

  1487. <span class="token keyword">var</span> myStyleSheet <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myStyle'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>sheet<span class="token punctuation">;</span>
    1488. 

  1488. <span class="token keyword">var</span> ruleList <span class="token operator">=</span> myStyleSheet<span class="token punctuation">.</span>cssRules<span class="token punctuation">;</span>
    1489. 

  1489. 

  1490. <span class="token keyword">var</span> rule0 <span class="token operator">=</span> ruleList<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    1491. 

  1491. rule0<span class="token punctuation">.</span>cssText
    1492. 

  1492. <span class="token comment">// &quot;@supports (display: flex) {</span>
    1493. 

  1493. <span class="token comment">//    @media screen and (min-width: 900px) {</span>
    1494. 

  1494. <span class="token comment">//      article { display: flex; }</span>
    1495. 

  1495. <span class="token comment">//    }</span>
    1496. 

  1496. <span class="token comment">// }&quot;</span>
    1497. 

  1497. 

  1498. <span class="token comment">// 由于这条规则内嵌其他规则，</span>
    1499. 

  1499. <span class="token comment">// 所以它有 cssRules 属性，且该属性是 CSSRuleList 实例</span>
    1500. 

  1500. rule0<span class="token punctuation">.</span>cssRules <span class="token keyword">instanceof</span> <span class="token class-name">CSSRuleList</span> <span class="token comment">// true</span>
    1501. 

  1501. 

  1502. <span class="token keyword">var</span> rule1 <span class="token operator">=</span> rule0<span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    1503. 

  1503. rule1<span class="token punctuation">.</span>cssText
    1504. 

  1504. <span class="token comment">// &quot;@media screen and (min-width: 900px) {</span>
    1505. 

  1505. <span class="token comment">//   article { display: flex; }</span>
    1506. 

  1506. <span class="token comment">// }&quot;</span>
    1507. 

  1507. 

  1508. <span class="token keyword">var</span> rule2 <span class="token operator">=</span> rule1<span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    1509. 

  1509. rule2<span class="token punctuation">.</span>cssText
    1510. 

  1510. <span class="token comment">// &quot;article { display: flex; }&quot;</span>
    1511. 

  1511. 

  1512. rule1<span class="token punctuation">.</span>parentRule <span class="token operator">===</span> rule0 <span class="token comment">// true</span>
    1513. 

  1513. rule2<span class="token punctuation">.</span>parentRule <span class="token operator">===</span> rule1 <span class="token comment">// true</span>
    1514. 

  1514. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br></div></div><h5 id="_4-cssrule-type"><a href="#_4-cssrule-type" class="header-anchor">#</a> （4）CSSRule.type</h5> <p><code>CSSRule.type</code>属性<strong>返回一个整数值，表示当前规则的类型</strong>。</p> <p>最常见的类型有以下几种。</p> <ul><li>1：普通样式规则（CSSStyleRule 实例）</li> <li>3：<code>@import</code>规则</li> <li>4：<code>@media</code>规则（CSSMediaRule 实例）</li> <li>5：<code>@font-face</code>规则</li></ul> <h4 id="_10-3-cssstylerule-接口"><a href="#_10-3-cssstylerule-接口" class="header-anchor">#</a> 10.3 CSSStyleRule 接口</h4> <p><strong>如果一条 CSS 规则是普通的样式规则（不含特殊的 CSS 命令），那么除了 CSSRule 接口，它还部署了 CSSStyleRule 接口。</strong></p> <p>CSSStyleRule 接口有以下两个属性。</p> <h5 id="_1-cssstylerule-selectortext"><a href="#_1-cssstylerule-selectortext" class="header-anchor">#</a> （1）CSSStyleRule.selectorText</h5> <p><code>CSSStyleRule.selectorText</code>属性<strong>返回当前规则的选择器</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> stylesheet <span class="token operator">=</span> document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    1515. 

  1515. stylesheet<span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>selectorText <span class="token comment">// &quot;.myClass&quot;</span>
    1516. 

  1516. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>注意，这个属性是<strong>可写的</strong>。</p> <h5 id="_2-cssstylerule-style"><a href="#_2-cssstylerule-style" class="header-anchor">#</a> （2）CSSStyleRule.style</h5> <p><code>CSSStyleRule.style</code>属性<strong>返回一个对象（CSSStyleDeclaration 实例），代表当前规则的样式声明，也就是选择器后面的大括号里面的部分。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码为</span>
    1517. 

  1517. <span class="token comment">// &lt;style id=&quot;myStyle&quot;&gt;</span>
    1518. 

  1518. <span class="token comment">//   p { color: red; }</span>
    1519. 

  1519. <span class="token comment">// &lt;/style&gt;</span>
    1520. 

  1520. <span class="token keyword">var</span> styleSheet <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myStyle'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>sheet<span class="token punctuation">;</span>
    1521. 

  1521. styleSheet<span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>style <span class="token keyword">instanceof</span> <span class="token class-name">CSSStyleDeclaration</span>
    1522. 

  1522. <span class="token comment">// true</span>
    1523. 

  1523. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>CSSStyleDeclaration 实例的<code>cssText</code>属性，可以返回所有样式声明，格式为字符串。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>styleSheet<span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>cssText
    1524. 

  1524. <span class="token comment">// &quot;color: red;&quot;</span>
    1525. 

  1525. styleSheet<span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>selectorText
    1526. 

  1526. <span class="token comment">// &quot;p&quot;</span>
    1527. 

  1527. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="_10-4-cssmediarule-接口"><a href="#_10-4-cssmediarule-接口" class="header-anchor">#</a> 10.4 CSSMediaRule 接口</h4> <p><strong>如果一条 CSS 规则是<code>@media</code>代码块，那么它除了 CSSRule 接口，还部署了 CSSMediaRule 接口。</strong></p> <p>该接口主要提供<code>media</code>属性和<code>conditionText</code>属性。前者返回代表<code>@media</code>规则的一个对象（MediaList 实例），后者返回<code>@media</code>规则的生效条件。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// HTML 代码如下</span>
    1528. 

  1528. <span class="token comment">// &lt;style id=&quot;myStyle&quot;&gt;</span>
    1529. 

  1529. <span class="token comment">//   @media screen and (min-width: 900px) {</span>
    1530. 

  1530. <span class="token comment">//     article { display: flex; }</span>
    1531. 

  1531. <span class="token comment">//   }</span>
    1532. 

  1532. <span class="token comment">// &lt;/style&gt;</span>
    1533. 

  1533. <span class="token keyword">var</span> styleSheet <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myStyle'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>sheet<span class="token punctuation">;</span>
    1534. 

  1534. styleSheet<span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token keyword">instanceof</span> <span class="token class-name">CSSMediaRule</span>
    1535. 

  1535. <span class="token comment">// true</span>
    1536. 

  1536. 

  1537. styleSheet<span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>media
    1538. 

  1538. <span class="token comment">//  {</span>
    1539. 

  1539. <span class="token comment">//    0: &quot;screen and (min-width: 900px)&quot;,</span>
    1540. 

  1540. <span class="token comment">//    appendMedium: function,</span>
    1541. 

  1541. <span class="token comment">//    deleteMedium: function,</span>
    1542. 

  1542. <span class="token comment">//    item: function,</span>
    1543. 

  1543. <span class="token comment">//    length: 1,</span>
    1544. 

  1544. <span class="token comment">//    mediaText: &quot;screen and (min-width: 900px)&quot;</span>
    1545. 

  1545. <span class="token comment">// }</span>
    1546. 

  1546. 

  1547. styleSheet<span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>conditionText
    1548. 

  1548. <span class="token comment">// &quot;screen and (min-width: 900px)&quot;</span>
    1549. 

  1549. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h3 id="_11、window-matchmedia"><a href="#_11、window-matchmedia" class="header-anchor">#</a> 11、window.matchMedia()</h3> <h4 id="_11-1-基本用法"><a href="#_11-1-基本用法" class="header-anchor">#</a> 11.1 基本用法</h4> <p><code>window.matchMedia</code>方法<strong>用来将 CSS 的<a href="https://developer.mozilla.org/en-US/docs/DOM/Using_media_queries_from_code" target="_blank" rel="noopener noreferrer"><code>MediaQuery</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>条件语句，转换成一个 MediaQueryList 实例</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> mdl <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">matchMedia</span><span class="token punctuation">(</span><span class="token string">'(min-width: 400px)'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1550. 

  1550. mdl <span class="token keyword">instanceof</span> <span class="token class-name">MediaQueryList</span> <span class="token comment">// true</span>
    1551. 

  1551. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>上面代码中，变量<code>mdl</code>就是 mediaQueryList 的实例。</p> <p>注意，如果参数不是有效的<code>MediaQuery</code>条件语句，<code>window.matchMedia</code>不会报错，依然返回一个 MediaQueryList 实例。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>window<span class="token punctuation">.</span><span class="token function">matchMedia</span><span class="token punctuation">(</span><span class="token string">'bad string'</span><span class="token punctuation">)</span> <span class="token keyword">instanceof</span> <span class="token class-name">MediaQueryList</span> <span class="token comment">// true</span>
    1552. 

  1552. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="_11-2-mediaquerylist-接口的实例属性"><a href="#_11-2-mediaquerylist-接口的实例属性" class="header-anchor">#</a> 11.2 MediaQueryList 接口的实例属性</h4> <p>MediaQueryList 实例有三个属性。</p> <h5 id="_1-mediaquerylist-media"><a href="#_1-mediaquerylist-media" class="header-anchor">#</a> （1）MediaQueryList.media</h5> <p><code>MediaQueryList.media</code>属性<strong>返回一个字符串，表示对应的 MediaQuery 条件语句</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> mql <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">matchMedia</span><span class="token punctuation">(</span><span class="token string">'(min-width: 400px)'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1553. 

  1553. mql<span class="token punctuation">.</span>media <span class="token comment">// &quot;(min-width: 400px)&quot;</span>
    1554. 

  1554. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h5 id="_2-mediaquerylist-matches"><a href="#_2-mediaquerylist-matches" class="header-anchor">#</a> （2）MediaQueryList.matches</h5> <p><code>MediaQueryList.matches</code>属性<strong>返回一个布尔值，表示当前页面是否符合指定的 MediaQuery 条件语句</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span><span class="token function">matchMedia</span><span class="token punctuation">(</span><span class="token string">'(min-width: 400px)'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>matches<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1555. 

  1555.   <span class="token comment">/* 当前视口不小于 400 像素 */</span>
    1556. 

  1556. <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    1557. 

  1557.   <span class="token comment">/* 当前视口小于 400 像素 */</span>
    1558. 

  1558. <span class="token punctuation">}</span>
    1559. 

  1559. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>下面的例子根据<code>mediaQuery</code>是否匹配当前环境，加载相应的 CSS 样式表。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> result <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">matchMedia</span><span class="token punctuation">(</span><span class="token string">&quot;(max-width: 700px)&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1560. 

  1560. 

  1561. <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">.</span>matches<span class="token punctuation">)</span><span class="token punctuation">{</span>
    1562. 

  1562.   <span class="token keyword">var</span> linkElm <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'link'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1563. 

  1563.   linkElm<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'rel'</span><span class="token punctuation">,</span> <span class="token string">'stylesheet'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1564. 

  1564.   linkElm<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">,</span> <span class="token string">'text/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1565. 

  1565.   linkElm<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'href'</span><span class="token punctuation">,</span> <span class="token string">'small.css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1566. 

  1566. 

  1567.   document<span class="token punctuation">.</span>head<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>linkElm<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1568. 

  1568. <span class="token punctuation">}</span>
    1569. 

  1569. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h5 id="_3-mediaquerylist-onchange"><a href="#_3-mediaquerylist-onchange" class="header-anchor">#</a> （3）MediaQueryList.onchange</h5> <p><strong>如果 MediaQuery 条件语句的适配环境发生变化，会触发<code>change</code>事件</strong>。<code>MediaQueryList.onchange</code>属性用来指定<code>change</code>事件的监听函数。该函数的参数是<code>change</code>事件对象（MediaQueryListEvent 实例），该对象与 MediaQueryList 实例类似，也有<code>media</code>和<code>matches</code>属性。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> mql <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">matchMedia</span><span class="token punctuation">(</span><span class="token string">'(max-width: 600px)'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1570. 

  1570. 

  1571. mql<span class="token punctuation">.</span><span class="token function-variable function">onchange</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1572. 

  1572.   <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>matches<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1573. 

  1573.     <span class="token comment">/* 视口不超过 600 像素 */</span>
    1574. 

  1574.   <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    1575. 

  1575.     <span class="token comment">/* 视口超过 600 像素 */</span>
    1576. 

  1576.   <span class="token punctuation">}</span>
    1577. 

  1577. <span class="token punctuation">}</span>
    1578. 

  1578. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>上面代码中，<code>change</code>事件发生后，存在两种可能。一种是显示宽度从700像素以上变为以下，另一种是从700像素以下变为以上，所以在监听函数内部要判断一下当前是哪一种情况。</p> <h4 id="_11-3-mediaquerylist-接口的实例方法"><a href="#_11-3-mediaquerylist-接口的实例方法" class="header-anchor">#</a> 11.3 MediaQueryList 接口的实例方法</h4> <p>MediaQueryList 实例有两个方法<code>MediaQueryList.addListener()</code>和<code>MediaQueryList.removeListener()</code>，<strong>用来为<code>change</code>事件添加或撤销监听函数</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> mql <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">matchMedia</span><span class="token punctuation">(</span><span class="token string">'(max-width: 600px)'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1579. 

  1579. 

  1580. <span class="token comment">// 指定监听函数</span>
    1581. 

  1581. mql<span class="token punctuation">.</span><span class="token function">addListener</span><span class="token punctuation">(</span>mqCallback<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1582. 

  1582. 

  1583. <span class="token comment">// 撤销监听函数</span>
    1584. 

  1584. mql<span class="token punctuation">.</span><span class="token function">removeListener</span><span class="token punctuation">(</span>mqCallback<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1585. 

  1585. 

  1586. <span class="token keyword">function</span> <span class="token function">mqCallback</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1587. 

  1587.   <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>matches<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1588. 

  1588.     <span class="token comment">/* 视口不超过 600 像素 */</span>
    1589. 

  1589.   <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    1590. 

  1590.     <span class="token comment">/* 视口超过 600 像素 */</span>
    1591. 

  1591.   <span class="token punctuation">}</span>
    1592. 

  1592. <span class="token punctuation">}</span>
    1593. 

  1593. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>注意，<code>MediaQueryList.removeListener()</code>方法不能撤销<code>MediaQueryList.onchange</code>属性指定的监听函数。</p> <h3 id="_12、本章小结"><a href="#_12、本章小结" class="header-anchor">#</a> 12、本章小结</h3> <p>本章当中的实例（接口）有：</p> <p><strong>CSSStyleDeclaration接口</strong>（css样式声明）： 用来操作元素的样式</p> <p><strong>StyleSheet接口（样式表</strong>）： 代表网页的一张样式表，包括<code>&lt;link&gt;</code>元素加载的样式表和<code>&lt;style&gt;</code>元素内嵌的样式表。</p> <p><strong>CSSRuleList接口（css规则列表）</strong>： 一个类似数组的对象，表示一组 CSS 规则，成员都是 CSSRule 实例。</p> <p><strong>CSSRule接口（css规则）</strong>： JavaScript 通过 CSSRule 接口操作 CSS 规则。一般通过 CSSRuleList 接口（<code>StyleSheet.cssRules</code>）获取 CSSRule 实例。</p> <p><strong>CSSStyleRule接口</strong>： 如果一条 CSS 规则是普通的样式规则（不含特殊的 CSS 命令），那么除了 CSSRule 接口，它还部署了 CSSStyleRule 接口。</p> <p><strong>CSSMediaRule 接口</strong>： 如果一条 CSS 规则是<code>@media</code>代码块，那么它除了 CSSRule 接口，还部署了 CSSMediaRule 接口。</p> <h2 id="九、mutation-observer-api-监视dom变动"><a href="#九、mutation-observer-api-监视dom变动" class="header-anchor">#</a> 九、Mutation Observer API 监视DOM变动</h2> <h3 id="_1、概述-2"><a href="#_1、概述-2" class="header-anchor">#</a> 1、概述</h3> <p>Mutation Observer API <strong>用来监视 DOM 变动</strong>。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。</p> <p>概念上，它很接近事件，<strong>可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。</strong></p> <p>这样设计是为了应付 DOM 变动频繁的特点。举例来说，如果文档中连续插入1000个<code>&lt;p&gt;</code>元素，就会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 Mutation Observer 完全不同，只在1000个段落都插入结束后才会触发，而且只触发一次。</p> <p>Mutation Observer 有以下特点。</p> <ul><li><strong>它等待所有脚本任务完成后，才会运行（即异步触发方式）。</strong></li> <li><strong>它把 DOM 变动记录封装成一个数组进行处理，而不是一条条个别处理 DOM 变动。</strong></li> <li><strong>它既可以观察 DOM 的所有类型变动，也可以指定只观察某一类变动。</strong></li></ul> <h3 id="_2、mutationobserver-构造函数-使用方式"><a href="#_2、mutationobserver-构造函数-使用方式" class="header-anchor">#</a> 2、MutationObserver 构造函数 (使用方式)</h3> <p>使用时，<strong>首先使用<code>MutationObserver</code>构造函数，新建一个观察器实例，同时指定这个实例的回调函数。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> observer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MutationObserver</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1594. 

  1594. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码中的回调函数，会在每次 DOM 变动后调用。该回调函数接受两个参数，第一个是变动数组，第二个是观察器实例，下面是一个例子。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> observer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MutationObserver</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">mutations<span class="token punctuation">,</span> observer</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1595. 

  1595.   mutations<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">mutation</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1596. 

  1596.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mutation<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1597. 

  1597.   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1598. 

  1598. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1599. 

  1599. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_3、mutationobserver-的实例方法"><a href="#_3、mutationobserver-的实例方法" class="header-anchor">#</a> 3、MutationObserver 的实例方法</h3> <h4 id="_3-1-observe"><a href="#_3-1-observe" class="header-anchor">#</a> 3.1 observe()</h4> <p><code>observe</code>方法<strong>用来启动监听，它接受两个参数。</strong></p> <ul><li>第一个参数：所要观察的 DOM 节点</li> <li>第二个参数：一个配置对象，指定所要观察的特定变动</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> article <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'article'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1600. 

  1600. 

  1601. <span class="token keyword">var</span>  options <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">// 配置对象，用于observer参数二，配置指定观察的特定变动</span>
    1602. 

  1602.   <span class="token string-property property">'childList'</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 子节点变动</span>
    1603. 

  1603.   <span class="token string-property property">'attributes'</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 属性变动</span>
    1604. 

  1604.   <span class="token string-property property">'characterData'</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 节点内容或节点文本的变动</span>
    1605. 

  1605. <span class="token punctuation">}</span> <span class="token punctuation">;</span>
    1606. 

  1606. 

  1607. observer<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>article<span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1608. 

  1608. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>上面代码中，<code>observe</code>方法接受两个参数，第一个是所要观察的DOM元素是<code>article</code>，第二个是所要观察的变动类型（子节点变动和属性变动）。</p> <p>观察器所能观察的 DOM 变动类型（即上面代码的<code>options</code>对象），有以下几种。</p> <ul><li><strong>childList</strong>：子节点的变动（指新增，删除或者更改）。</li> <li><strong>attributes</strong>：属性的变动。</li> <li><strong>characterData</strong>：节点内容或节点文本的变动。</li></ul> <p>想要观察哪一种变动类型，就在<code>option</code>对象中指定它的值为<code>true</code>。需要注意的是，必须同时指定<code>childList</code>、<code>attributes</code>和<code>characterData</code>中的一种或多种，若未均指定将报错。</p> <p>除了变动类型，<code>options</code>对象还可以设定以下属性：</p> <ul><li><code>subtree</code>：布尔值，表示是否将该观察器应用于该节点的所有后代节点。</li> <li><code>attributeOldValue</code>：布尔值，表示观察<code>attributes</code>变动时，是否需要记录变动前的属性值。</li> <li><code>characterDataOldValue</code>：布尔值，表示观察<code>characterData</code>变动时，是否需要记录变动前的值。</li> <li><code>attributeFilter</code>：数组，表示需要观察的特定属性（比如<code>['class','src']</code>）。</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 开始监听文档根节点（即&lt;html&gt;标签）的变动</span>
    1609. 

  1609. mutationObserver<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>documentElement<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    1610. 

  1610.   <span class="token literal-property property">attributes</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 属性变动</span>
    1611. 

  1611.   <span class="token literal-property property">characterData</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 节点内容或节点文本的变动</span>
    1612. 

  1612.   <span class="token literal-property property">childList</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 子节点的变动</span>
    1613. 

  1613.   <span class="token literal-property property">subtree</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否将该观察器应用于该节点的所有后代节点</span>
    1614. 

  1614.   <span class="token literal-property property">attributeOldValue</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 观察attributes变动时，是否需要记录变动前的属性值</span>
    1615. 

  1615.   <span class="token literal-property property">characterDataOldValue</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 观察characterData变动时，是否需要记录变动前的值。</span>
    1616. 

  1616. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1617. 

  1617. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>对一个节点添加观察器，就像使用<code>addEventListener</code>方法一样，多次添加同一个观察器是无效的，回调函数依然只会触发一次。如果指定不同的<code>options</code>对象，以后面添加的那个为准，类似覆盖。</p> <p>下面的例子是观察新增的子节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> insertedNodes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    1618. 

  1618. <span class="token keyword">var</span> observer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MutationObserver</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">mutations</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1619. 

  1619.   mutations<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">mutation</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1620. 

  1620.     <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> mutation<span class="token punctuation">.</span>addedNodes<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1621. 

  1621.       insertedNodes<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>addedNodes<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1622. 

  1622.     <span class="token punctuation">}</span>
    1623. 

  1623.   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1624. 

  1624.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>insertedNodes<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1625. 

  1625. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1626. 

  1626. observer<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>document<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">childList</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">subtree</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1627. 

  1627. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h4 id="_3-2-disconnect-takerecords"><a href="#_3-2-disconnect-takerecords" class="header-anchor">#</a> 3.2 disconnect()，takeRecords（）</h4> <p><code>disconnect</code>方法<strong>用来停止观察。调用该方法后，DOM 再发生变动，也不会触发观察器</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>observer<span class="token punctuation">.</span><span class="token function">disconnect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1628. 

  1628. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><code>takeRecords</code>方法<strong>用来清除变动记录，即不再处理未处理的变动。该方法返回变动记录的数组</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>observer<span class="token punctuation">.</span><span class="token function">takeRecords</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1629. 

  1629. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>下面是一个例子。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 保存所有没有被观察器处理的变动</span>
    1630. 

  1630. <span class="token keyword">var</span> changes <span class="token operator">=</span> mutationObserver<span class="token punctuation">.</span><span class="token function">takeRecords</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1631. 

  1631. 

  1632. <span class="token comment">// 停止观察</span>
    1633. 

  1633. mutationObserver<span class="token punctuation">.</span><span class="token function">disconnect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1634. 

  1634. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_4、mutationrecord-对象-变动记录"><a href="#_4、mutationrecord-对象-变动记录" class="header-anchor">#</a> 4、MutationRecord 对象 (变动记录)</h3> <p><strong>DOM 每次发生变化，就会生成一条变动记录（MutationRecord 实例）</strong>。该实例包含了与变动相关的所有信息。Mutation Observer 处理的就是一个个<code>MutationRecord</code>实例所组成的数组。</p> <p><code>MutationRecord</code>对象包含了DOM的相关信息，有如下属性：</p> <ul><li><code>type</code>：观察的变动类型（<code>attributes</code>、<code>characterData</code>或者<code>childList</code>）。</li> <li><code>target</code>：发生变动的DOM节点。</li> <li><code>addedNodes</code>：新增的DOM节点。</li> <li><code>removedNodes</code>：删除的DOM节点。</li> <li><code>previousSibling</code>：前一个同级节点，如果没有则返回<code>null</code>。</li> <li><code>nextSibling</code>：下一个同级节点，如果没有则返回<code>null</code>。</li> <li><code>attributeName</code>：发生变动的属性。如果设置了<code>attributeFilter</code>，则只返回预先指定的属性。</li> <li><code>oldValue</code>：变动前的值。这个属性只对<code>attribute</code>和<code>characterData</code>变动有效，如果发生<code>childList</code>变动，则返回<code>null</code>。</li></ul> <h3 id="_5、应用示例"><a href="#_5、应用示例" class="header-anchor">#</a> 5、应用示例</h3> <h4 id="_5-1-子元素的变动"><a href="#_5-1-子元素的变动" class="header-anchor">#</a> 5.1 子元素的变动</h4> <p>下面的例子说明如何读取变动记录。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">callback</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">records</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    1635. 

  1635.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>records<span class="token punctuation">)</span> <span class="token comment">// records参数是 MutationRecord实例</span>
    1636. 

  1636.   records<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">record</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    1637. 

  1637.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Mutation type: '</span> <span class="token operator">+</span> record<span class="token punctuation">.</span>type<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1638. 

  1638.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Mutation target: '</span> <span class="token operator">+</span> record<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1639. 

  1639.   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1640. 

  1640. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    1641. 

  1641. <span class="token comment">/*
    1642. 

  1642.     [MutationRecord]
    1643. 

  1643.     0: MutationRecord
    1644. 

  1644.     addedNodes: NodeList [text]
    1645. 

  1645.     attributeName: null
    1646. 

  1646.     attributeNamespace: null
    1647. 

  1647.     nextSibling: null
    1648. 

  1648.     oldValue: null
    1649. 

  1649.     previousSibling: script
    1650. 

  1650.     removedNodes: NodeList []
    1651. 

  1651.     target: body
    1652. 

  1652.     type: &quot;childList&quot;
    1653. 

  1653.     __proto__: MutationRecord
    1654. 

  1654.     length: 1
    1655. 

  1655.     __proto__: Array(0)
    1656. 

  1656.     Mutation type: childList
    1657. 

  1657.     test.html:23 Mutation target: [object HTMLBodyElement]
    1658. 

  1658. */</span>
    1659. 

  1659. <span class="token keyword">var</span> mo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MutationObserver</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1660. 

  1660. 

  1661. <span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    1662. 

  1662.   <span class="token string-property property">'childList'</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    1663. 

  1663.   <span class="token string-property property">'subtree'</span><span class="token operator">:</span> <span class="token boolean">true</span>
    1664. 

  1664. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    1665. 

  1665. 

  1666. mo<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> option<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1667. 

  1667. 

  1668. document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">'123'</span><span class="token punctuation">)</span>
    1669. 

  1669. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><p>上面代码的观察器，观察<code>&lt;body&gt;</code>的所有下级节点（<code>childList</code>表示观察子节点，<code>subtree</code>表示观察后代节点）的变动。回调函数会在控制台显示所有变动的类型和目标节点。</p> <h4 id="_5-2-属性的变动"><a href="#_5-2-属性的变动" class="header-anchor">#</a> 5.2 属性的变动</h4> <p>下面的例子说明如何追踪属性的变动。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">callback</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">records</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1670. 

  1670.   records<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">record</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1671. 

  1671.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Previous attribute value: '</span> <span class="token operator">+</span> record<span class="token punctuation">.</span>oldValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1672. 

  1672.   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1673. 

  1673. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    1674. 

  1674. 

  1675. <span class="token keyword">var</span> mo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MutationObserver</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1676. 

  1676. 

  1677. <span class="token keyword">var</span> element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'#my_element'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1678. 

  1678. 

  1679. <span class="token keyword">var</span> options <span class="token operator">=</span> <span class="token punctuation">{</span>
    1680. 

  1680.   <span class="token string-property property">'attributes'</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    1681. 

  1681.   <span class="token string-property property">'attributeOldValue'</span><span class="token operator">:</span> <span class="token boolean">true</span>
    1682. 

  1682. <span class="token punctuation">}</span>
    1683. 

  1683. 

  1684. mo<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>element<span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1685. 

  1685. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p>上面代码先设定追踪属性变动（<code>'attributes': true</code>），然后设定记录变动前的值。实际发生变动时，会将变动前的值显示在控制台。</p> <h4 id="_5-3-取代-domcontentloaded-事件"><a href="#_5-3-取代-domcontentloaded-事件" class="header-anchor">#</a> 5.3 取代 DOMContentLoaded 事件</h4> <p>网页加载的时候，DOM 节点的生成会产生变动记录，因此只要观察 DOM 的变动，就能在第一时间触发相关事件，也就没有必要使用<code>DOMContentLoaded</code>事件。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> observer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MutationObserver</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1686. 

  1686. observer<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>documentElement<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    1687. 

  1687.   <span class="token literal-property property">childList</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    1688. 

  1688.   <span class="token literal-property property">subtree</span><span class="token operator">:</span> <span class="token boolean">true</span>
    1689. 

  1689. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1690. 

  1690. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面代码中，监听<code>document.documentElement</code>（即网页的<code>&lt;html&gt;</code>HTML 节点）的子节点的变动，<code>subtree</code>属性指定监听还包括后代节点。因此，任意一个网页元素一旦生成，就能立刻被监听到。</p> <h6 id="封装一个监听-dom-生成的函数"><a href="#封装一个监听-dom-生成的函数" class="header-anchor">#</a> 封装一个监听 DOM 生成的函数</h6> <p>下面的代码，使用<code>MutationObserver</code>对象<strong>封装一个监听 DOM 生成的函数</strong>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">win</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    1691. 

  1691.   <span class="token string">'use strict'</span><span class="token punctuation">;</span>
    1692. 

  1692. 

  1693.   <span class="token keyword">var</span> listeners <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    1694. 

  1694.   <span class="token keyword">var</span> doc <span class="token operator">=</span> win<span class="token punctuation">.</span>document<span class="token punctuation">;</span>
    1695. 

  1695.   <span class="token keyword">var</span> MutationObserver <span class="token operator">=</span> win<span class="token punctuation">.</span>MutationObserver <span class="token operator">||</span> win<span class="token punctuation">.</span>WebKitMutationObserver<span class="token punctuation">;</span>
    1696. 

  1696.   <span class="token keyword">var</span> observer<span class="token punctuation">;</span>
    1697. 

  1697. 

  1698.   <span class="token keyword">function</span> <span class="token function">ready</span><span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> fn</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    1699. 

  1699.     <span class="token comment">// 储存选择器和回调函数</span>
    1700. 

  1700.     listeners<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    1701. 

  1701.       <span class="token literal-property property">selector</span><span class="token operator">:</span> selector<span class="token punctuation">,</span>
    1702. 

  1702.       <span class="token literal-property property">fn</span><span class="token operator">:</span> fn
    1703. 

  1703.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1704. 

  1704.     <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>observer<span class="token punctuation">)</span><span class="token punctuation">{</span>
    1705. 

  1705.       <span class="token comment">// 监听document变化</span>
    1706. 

  1706.       observer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MutationObserver</span><span class="token punctuation">(</span>check<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1707. 

  1707.       observer<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>doc<span class="token punctuation">.</span>documentElement<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    1708. 

  1708.         <span class="token literal-property property">childList</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    1709. 

  1709.         <span class="token literal-property property">subtree</span><span class="token operator">:</span> <span class="token boolean">true</span>
    1710. 

  1710.       <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1711. 

  1711.     <span class="token punctuation">}</span>
    1712. 

  1712.     <span class="token comment">// 检查该节点是否已经在DOM中</span>
    1713. 

  1713.     <span class="token function">check</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1714. 

  1714.   <span class="token punctuation">}</span>
    1715. 

  1715. 

  1716.   <span class="token keyword">function</span> <span class="token function">check</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    1717. 

  1717.   <span class="token comment">// 检查是否匹配已储存的节点</span>
    1718. 

  1718.     <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> listeners<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    1719. 

  1719.       <span class="token keyword">var</span> listener <span class="token operator">=</span> listeners<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
    1720. 

  1720.       <span class="token comment">// 检查指定节点是否有匹配</span>
    1721. 

  1721.       <span class="token keyword">var</span> elements <span class="token operator">=</span> doc<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span>listener<span class="token punctuation">.</span>selector<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1722. 

  1722.       <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> elements<span class="token punctuation">.</span>length<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    1723. 

  1723.         <span class="token keyword">var</span> element <span class="token operator">=</span> elements<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">;</span>
    1724. 

  1724.         <span class="token comment">// 确保回调函数只会对该元素调用一次</span>
    1725. 

  1725.         <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>element<span class="token punctuation">.</span>ready<span class="token punctuation">)</span><span class="token punctuation">{</span>
    1726. 

  1726.           element<span class="token punctuation">.</span>ready <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    1727. 

  1727.           <span class="token comment">// 对该节点调用回调函数</span>
    1728. 

  1728.           listener<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>element<span class="token punctuation">,</span> element<span class="token punctuation">)</span><span class="token punctuation">;</span>
    1729. 

  1729.         <span class="token punctuation">}</span>
    1730. 

  1730.       <span class="token punctuation">}</span>
    1731. 

  1731.     <span class="token punctuation">}</span>
    1732. 

  1732.   <span class="token punctuation">}</span>
    1733. 

  1733. 

  1734.   <span class="token comment">// 对外暴露ready</span>
    1735. 

  1735.   win<span class="token punctuation">.</span>ready <span class="token operator">=</span> ready<span class="token punctuation">;</span>
    1736. 

  1736. 

  1737. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1738. 

  1738. 

  1739. <span class="token comment">// 使用方法</span>
    1740. 

  1740. <span class="token function">ready</span><span class="token punctuation">(</span><span class="token string">'.foo'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    1741. 

  1741.   <span class="token comment">// ...</span>
    1742. 

  1742. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    1743. 

  1743. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br></div></div><h2 id="文档"><a href="#文档" class="header-anchor">#</a> 文档</h2> <p>学习文档：<a href="https://wangdoc.com/javascript/" target="_blank" rel="noopener noreferrer">https://wangdoc.com/javascript/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div></div>  <div class="page-edit"><div class="edit-link"><a href="https://github.com/heBody/blog/edit/master/docs/《JavaScript教程》笔记/05.DOM.md" target="_blank" rel="noopener noreferrer">编辑</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="tags"><a href="/blog/tags/?tag=JavaScript" title="标签">#JavaScript</a></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2022/12/14, 19:36:42</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/blog/pages/d61b1cb4cdac1f63/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">异步操作</div></a> <a href="/blog/pages/10b2761db5a8e089/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">事件</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
    1744. 

  1744.         ←
    1745. 

  1745.         <a href="/blog/pages/d61b1cb4cdac1f63/" class="prev">异步操作</a></span> <span class="next"><a href="/blog/pages/10b2761db5a8e089/">事件</a>→
    1746. 

  1746.       </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/blog/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/blog/pages/922650/"><div>
    1747. 

  1747.             Git修改分支名
    1748. 

  1748.             <!----></div></a> <span class="date">08-11</span></dt></dl><dl><dd>02</dd> <dt><a href="/blog/pages/55f894/"><div>
    1749. 

  1749.             CSS给table的tbody添加滚动条
    1750. 

  1750.             <!----></div></a> <span class="date">06-29</span></dt></dl><dl><dd>03</dd> <dt><a href="/blog/pages/829589/"><div>
    1751. 

  1751.             我做了一个手写春联小网页，祝大家虎年暴富
    1752. 

  1752.             <span class="title-tag">
    1753. 

  1753.               原创
    1754. 

  1754.             </span></div></a> <span class="date">01-28</span></dt></dl> <dl><dd></dd> <dt><a href="/blog/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:30363811@qq.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/heBody" title="GitHub" target="_blank" class="iconfont icon-github"></a></div> 
    1755. 

  1755.     Copyright © 2016-2022
    1756. 

  1756.     <span>Hesb | <a href="https://github.com/heBody/blob" target="_blank">MIT License</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
    1757. 

  1757.           跟随系统
    1758. 

  1758.         </li><li class="iconfont icon-rijianmoshi">
    1759. 

  1759.           浅色模式
    1760. 

  1760.         </li><li class="iconfont icon-yejianmoshi">
    1761. 

  1761.           深色模式
    1762. 

  1762.         </li><li class="iconfont icon-yuedu">
    1763. 

  1763.           阅读模式
    1764. 

  1764.         </li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    1765. 

  1765.     <script src="/blog/assets/js/app.28edfb28.js" defer></script><script src="/blog/assets/js/2.395c0d18.js" defer></script><script src="/blog/assets/js/3.6748bd5c.js" defer></script><script src="/blog/assets/js/140.0d9b8fbc.js" defer></script>
    1766. 

  1766.   </body>
    1767. 

  1767. </html>
    1768.