Last active
November 14, 2018 21:56
-
-
Save eoussama/310590a9d439d2da6df981651ce0e488 to your computer and use it in GitHub Desktop.
XML Sandbox for experimenting with DOM, XPath, XQuery, jQuery and fetch (is there something else to fit too?) manupilation.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8" ?> | |
| <anime> | |
| <show id="1" state="Finished"> | |
| <name>Naruto</name> | |
| <episodes>720</episodes> | |
| <score>8.32</score> | |
| <categories> | |
| <shounen/> | |
| <action/> | |
| <drama/> | |
| <ninja/> | |
| </categories> | |
| </show> | |
| <show id="2" state="Airing"> | |
| <name>One Piece</name> | |
| <episodes>829</episodes> | |
| <score>10</score> | |
| <categories> | |
| <shounen/> | |
| <action/> | |
| <drama/> | |
| <adventure/> | |
| <lore/> | |
| </categories> | |
| </show> | |
| <show id="3" state="Finished"> | |
| <name>Code Geass</name> | |
| <episodes>52</episodes> | |
| <score>10</score> | |
| <categories> | |
| <shounen/> | |
| <action/> | |
| <drama/> | |
| <political/> | |
| <war/> | |
| </categories> | |
| </show> | |
| <show id="4" state="Airing"> | |
| <name>Shingeki no Kyogin</name> | |
| <episodes>36</episodes> | |
| <score>9</score> | |
| <categories> | |
| <shounen/> | |
| <action/> | |
| </categories> | |
| </show> | |
| <show id="5" state="Finished"> | |
| <name>Steins;Gate</name> | |
| <episodes>25</episodes> | |
| <score>10</score> | |
| <categories> | |
| <sci_fi/> | |
| <time_travel/> | |
| <mystery/> | |
| </categories> | |
| </show> | |
| <show id="6" state="Airing"> | |
| <name>Tokyo Ghoul</name> | |
| <episodes>36</episodes> | |
| <score>8.5</score> | |
| <categories> | |
| <shounen/> | |
| <gore/> | |
| <dark/> | |
| </categories> | |
| </show> | |
| <show id="7" state="Airing"> | |
| <name>My Hero Academia</name> | |
| <episodes>36</episodes> | |
| <score>8.3</score> | |
| <categories> | |
| <shounen/> | |
| <hero/> | |
| <drama/> | |
| <school/> | |
| </categories> | |
| </show> | |
| <show id="8" state="Airing"> | |
| <name>One Punch Man</name> | |
| <episodes>12</episodes> | |
| <score>9</score> | |
| <categories> | |
| <shounen/> | |
| <hero/> | |
| <action/> | |
| </categories> | |
| </show> | |
| <show id="9" state="Finished"> | |
| <name>Psycho Pass</name> | |
| <episodes>25</episodes> | |
| <score>9.6</score> | |
| <categories> | |
| <detective/> | |
| <crime/> | |
| <dark/> | |
| <gore/> | |
| </categories> | |
| </show> | |
| <show id="10" state="Airing"> | |
| <name>Boruto</name> | |
| <episodes>51</episodes> | |
| <score>7.3</score> | |
| <categories> | |
| <shounen/> | |
| <ninja/> | |
| <drama/> | |
| <school/> | |
| </categories> | |
| </show> | |
| </anime> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ol.list,ul.list,ul.navitems{list-style-type:none}.text-italic,blockquote{font-style:italic}@font-face{font-family:Roboto;src:url(../fonts/Roboto/Roboto-Regular.ttf)}@font-face{font-family:Roboto;src:url(../fonts/Roboto/Roboto-bold.ttf);font-weight:700}:root{--lightColorWeak:rgba(244, 244, 244, 0.17);--lightColorLighten:rgb(244, 244, 244);--lightColor:rgb(221, 221, 221);--lightColorDarken:rgb(193, 193, 193);--lightColorStrong:rgb(160, 160, 160);--darkColorWeak:rgba(41, 54, 64, 0.17);--darkColorLighten:#293640;--darkColor:#1f2931;--darkColorDarken:#0d0d0d;--darkColorStrong:#030303;--blueColorWeak:rgba(72, 153, 224, 0.17);--blueColorLighten:#4899e0;--blueColor:#428bca;--blueColorDarken:#3674aa;--blueColorStrong:#163f62;--grayColorWeak:rgba(141, 141, 141, 0.17);--grayColorLighten:#8d8d8d;--grayColor:gray;--grayColorDarken:#646464;--grayColorStrong:#4b4b4b;--greenColorWeak:rgba(107, 201, 107, 0.17);--greenColorLighten:#6bc96b;--greenColor:#5cb85c;--greenColorDarken:#48ac48;--greenColorStrong:#266a26;--aquaColorWeak:rgba(70, 212, 255, 0.17);--aquaColorLighten:#46d4ff;--aquaColor:#5bc0de;--aquaColorDarken:#40a8c7;--aquaColorStrong:#2b6f83;--yellowColorWeak:rgba(255, 162, 30, 0.17);--yellowColorLighten:rgb(255, 162, 30);--yellowColor:#F89406;--yellowColorDarken:#c77500;--yellowColorStrong:#794803;--redColorWeak:rgba(201, 46, 38, 0.17);--redColorLighten:#c92e26;--redColor:#be221a;--redColorDarken:#91201b;--redColorStrong:#570f0b;--violetColorWeak:rgba(136, 56, 204, 0.17);--violetColorLighten:#8838cc;--violetColor:#773aac;--violetColorDarken:#5d2d86;--violetColorStrong:#29103e;--pinkColorWeak:rgba(255, 101, 207, 0.17);--pinkColorLighten:#ff65cf;--pinkColor:#f25bc3;--pinkColorDarken:#c958ae;--pinkColorStrong:#6c2c5c;--brownColorWeak:rgba(141, 87, 53, 0.17);--brownColorLighten:#8d5735;--brownColor:#904d24;--brownColorDarken:#744121;--brownColorStrong:#341c0c;--orangeColorWeak:rgba(255, 66, 21, 0.17);--orangeColorLighten:#ff4215;--orangeColor:#ff3100;--orangeColorDarken:#cb2700;--orangeColorStrong:#761903;--disabledColorLighten:#a7a7a7;--disabledColor:#909090;--disabledColorDarken:#777777;--disabledColorStrong:#363636}*{padding:0;margin:0;font-family:Roboto,sans-serif;line-height:1.7rem}.btn{padding:6px 8px;margin:2px;font-size:16px;border:none;border-radius:3px;box-shadow:0 2px .7px rgba(0,0,0,.3);font-weight:700;color:var(--darkColor);cursor:pointer;transition-property:background-color,transform;transition-duration:.5s,.05s}.btn:hover{background-color:#c4c4c4}.btn.aqua.invert:active,.btn.aqua:active,.btn.blue.invert:active,.btn.blue:active,.btn.brown.invert:active,.btn.brown:active,.btn.dark.invert:active,.btn.dark:active,.btn.gray.invert:active,.btn.gray:active,.btn.green.invert:active,.btn.green:active,.btn.invert:active,.btn.light.invert:active,.btn.light:active,.btn.orange.invert:active,.btn.orange:active,.btn.pink.invert:active,.btn.pink:active,.btn.red.invert:active,.btn.red:active,.btn.violet.invert:active,.btn.violet:active,.btn.yellow.invert:active,.btn.yellow:active,.btn:active{transform:translateY(2px);box-shadow:0 0 .7px rgba(0,0,0,.6)}.btn:focus{outline:0}.btn.invert{color:var(--lightColor);background-color:var(--darkColor);box-shadow:0 2px .7px var(--darkColorDarken)}.btn.invert:hover{background-color:var(--darkColorLighten)}.btn.xl{padding:14px 16px;font-size:25px}.btn.lg{padding:10px 12px;font-size:20px}.btn.md{padding:6px 8px;font-size:16px}.btn.sm{padding:4px 6px;font-size:14px}.btn.xm{padding:2px 3px;font-size:12px}.btn.light{color:var(--darkColor);background-color:var(--lightColor);box-shadow:0 2px .7px var(--lightColorDarken)}.btn.dark,.btn.light.invert{color:var(--lightColor);box-shadow:0 2px .7px var(--darkColorDarken)}.btn.light:hover{background-color:var(--lightColorLighten)}.btn.light.invert{background-color:var(--darkColor)}.btn.light.invert:hover{background-color:var(--darkColorLighten)}.btn.dark{background-color:var(--darkColor)}.btn.dark:hover{background-color:var(--darkColorLighten)}.btn.dark.invert{color:var(--darkColor);background-color:var(--lightColor);box-shadow:0 2px .7px var(--lightColorDarken)}.btn.dark.invert:hover{background-color:var(--lightColorLighten)}.btn.blue{color:#fff;background-color:var(--blueColor);box-shadow:0 2px .7px var(--blueColorDarken)}.btn.blue:hover{background-color:var(--blueColorLighten)}.btn.blue.invert{color:var(--blueColor);background-color:var(--lightColor);box-shadow:0 2px .7px var(--lightColorDarken)}.btn.blue.invert:hover{background-color:var(--lightColorLighten)}.btn.gray{color:var(--lightColor);background-color:var(--grayColor);box-shadow:0 2px .7px var(--grayColorDarken)}.btn.gray:hover{background-color:var(--grayColorLighten)}.btn.gray.invert{color:var(--grayColor);background-color:var(--lightColor);box-shadow:0 2px .7px var(--lightColorDarken)}.btn.gray.invert:hover{background-color:var(--lightColorLighten)}.btn.green{color:#fff;background-color:var(--greenColor);box-shadow:0 2px .7px var(--greenColorDarken)}.btn.green:hover{background-color:var(--greenColorLighten)}.btn.green.invert{color:var(--greenColor);background-color:var(--lightColor);box-shadow:0 2px .7px var(--lightColorDarken)}.btn.green.invert:hover{background-color:var(--lightColorLighten)}.btn.aqua{color:var(--lightColor);background-color:var(--aquaColor);box-shadow:0 2px .7px var(--aquaColorDarken)}.btn.aqua:hover{background-color:var(--aquaColorLighten)}.btn.aqua.invert{color:var(--aquaColor);background-color:var(--lightColor);box-shadow:0 2px .7px var(--lightColorDarken)}.btn.aqua.invert:hover{background-color:var(--lightColorLighten)}.btn.yellow{color:var(--lightColor);background-color:var(--yellowColor);box-shadow:0 2px .7px var(--yellowColorDarken)}.btn.yellow:hover{background-color:var(--yellowColorLighten)}.btn.yellow.invert{color:var(--yellowColor);background-color:var(--lightColor);box-shadow:0 2px .7px var(--lightColorDarken)}.btn.yellow.invert:hover{background-color:var(--lightColorLighten)}.btn.red{color:var(--lightColor);background-color:var(--redColor);box-shadow:0 2px .7px var(--redColorDarken)}.btn.red:hover{background-color:var(--redColorLighten)}.btn.red.invert{color:var(--redColor);background-color:var(--lightColor);box-shadow:0 2px .7px var(--lightColorDarken)}.btn.red.invert:hover{background-color:var(--lightColorLighten)}.btn.violet{color:var(--lightColor);background-color:var(--violetColor);box-shadow:0 2px .7px var(--violetColorDarken)}.btn.violet:hover{background-color:var(--violetColorLighten)}.btn.violet.invert{color:var(--violetColor);background-color:var(--lightColor);box-shadow:0 2px .7px var(--lightColorDarken)}.btn.violet.invert:hover{background-color:var(--lightColorLighten)}.btn.pink{color:var(--lightColor);background-color:var(--pinkColor);box-shadow:0 2px .7px var(--pinkColorDarken)}.btn.pink:hover{background-color:var(--pinkColorLighten)}.btn.pink.invert{color:var(--pinkColor);background-color:var(--lightColor);box-shadow:0 2px .7px var(--lightColorDarken)}.btn.pink.invert:hover{background-color:var(--lightColorLighten)}.btn.orange{color:var(--lightColor);background-color:var(--orangeColor);box-shadow:0 2px .7px var(--orangeColorDarken)}.btn.orange:hover{background-color:var(--orangeColorLighten)}.btn.orange.invert{color:var(--orangeColor);background-color:var(--lightColor);box-shadow:0 2px .7px var(--lightColorDarken)}.btn.orange.invert:hover{background-color:var(--lightColorLighten)}.btn.brown{color:var(--lightColor);background-color:var(--brownColor);box-shadow:0 2px .7px var(--brownColorDarken)}.btn.brown:hover{background-color:var(--brownColorLighten)}.btn.brown.invert{color:var(--brownColor);background-color:var(--lightColor);box-shadow:0 2px .7px var(--lightColorDarken)}.btn.brown.invert:hover{background-color:var(--lightColorLighten)}.btn:disabled,.btn:disabled:hover{background-color:var(--disabledColor)}.btn:disabled{color:#b9b9b9;box-shadow:0 2px .7px var(--disabledColorDarken);cursor:not-allowed}.btn.invert:disabled,.btn.invert:disabled:hover{background-color:#b9b9b9}.btn.invert:disabled{color:var(--disabledColor);box-shadow:0 2px .7px var(--disabledColorLighten)}.textbox,select.combobox{width:200px;margin:3px;box-shadow:0 1px 1px rgba(0,0,0,.3);outline:0;box-sizing:border-box}.textbox{padding:3px 6px;font-size:16px;border:.5px solid #a9a9a9;border-left:6px solid #a9a9a9;border-radius:2px;transition-property:border-color,background-color;transition-duration:.5s}.textbox.xl{padding:8px 10px;font-size:20px}.textbox.lg{padding:6px 8px;font-size:18px}.textbox.md{padding:3px 6px;font-size:16px}.textbox.sm{padding:3px 4px;font-size:14px}.textbox.xm{padding:3px 4px;font-size:12px}.textbox.light:focus{border-color:var(--lightColorDarken);background-color:var(--lightColorWeak)}.textbox.dark:focus{border-color:var(--darkColor);background-color:var(--darkColorWeak)}.textbox.blue:focus{border-color:var(--blueColor);background-color:var(--blueColorWeak)}.textbox.gray:focus{border-color:var(--grayColor);background-color:var(--grayColorWeak)}.textbox.green:focus{border-color:var(--greenColor);background-color:var(--greenColorWeak)}.textbox.aqua:focus{border-color:var(--aquaColor);background-color:var(--aquaColorWeak)}.textbox.orange:focus{border-color:var(--orangeColor);background-color:var(--orangeColorWeak)}.textbox.red:focus{border-color:var(--redColor);background-color:var(--redColorWeak)}.textbox.violet:focus{border-color:var(--violetColor);background-color:var(--violetColorWeak)}.textbox.pink:focus{border-color:var(--pinkColor);background-color:var(--pinkColorWeak)}.textbox.brown:focus{border-color:var(--brownColor);background-color:var(--brownColorWeak)}.textbox.yellow:focus{border-color:var(--yellowColor);background-color:var(--yellowColorWeak)}.textbox:disabled{cursor:not-allowed;border-color:var(--disabledColor)}input[type=number]::-webkit-inner-spin-button{opacity:0;cursor:pointer;transition-property:opacity;transition-duration:.3s}input[type=number]:not(:disabled):hover::-webkit-inner-spin-button{opacity:.5}input[type=search]::-webkit-search-cancel-button{font-size:16px;cursor:pointer}input[type=color]{outline:0;border:.3px solid var(--lightColorDarken);border-radius:.5px;background-color:var(--lightColor);cursor:pointer;transition-property:background-color;transition-duration:.5s}input[type=color]:hover{background-color:var(--lightColorLighten)}select.combobox{padding:3px 6px;font-size:16px;border:.5px solid #a9a9a9;border-radius:2px;transition-property:border-color,background-color;transition-duration:.5s}select.combobox.light{background-color:var(--lightColor)}select.combobox.dark{color:var(--lightColor);background-color:var(--darkColor)}select.combobox.blue{color:#fff;background-color:var(--blueColor)}select.combobox.gray{color:#fff;background-color:var(--grayColor)}select.combobox.green{color:#fff;background-color:var(--greenColor)}select.combobox.aqua{color:#fff;background-color:var(--aquaColor)}select.combobox.yellow{color:#fff;background-color:var(--yellowColor)}select.combobox.orange{color:#fff;background-color:var(--orangeColor)}select.combobox.red{color:#fff;background-color:var(--redColor)}select.combobox.pink{color:#fff;background-color:var(--pinkColor)}select.combobox.violet{color:#fff;background-color:var(--violetColor)}select.combobox.brown{color:#fff;background-color:var(--brownColor)}select.combobox:disabled{color:var(--disabledColorDarken);background-color:var(--disabledColor);cursor:not-allowed}select.combobox.xl{padding:8px 10px;font-size:20px}select.combobox.lg{padding:6px 8px;font-size:18px}select.combobox.md{padding:3px 6px;font-size:16px}select.combobox.sm{padding:3px 4px;font-size:14px}select.combobox.xm{padding:3px 4px;font-size:12px}label.checkbox input{display:none}label.checkbox input:checked+div.inner{background-color:var(--lightColorStrong)}label.checkbox div.inner{position:relative;top:4px;display:inline-block;width:20px;height:20px;border-radius:3px;background-color:var(--lightColor);cursor:pointer;transition-property:background-color;transition-duration:.5s}code,kbd{border-radius:2px;font-weight:700}label.checkbox input:disabled+div.inner{background-color:var(--disabledColor);cursor:not-allowed}label.checkbox.dark input:checked+div.inner{background-color:var(--darkColorLighten)}label.checkbox.blue input:checked+div.inner{background-color:var(--blueColorLighten)}label.checkbox.gray input:checked+div.inner{background-color:var(--grayColorLighten)}label.checkbox.green input:checked+div.inner{background-color:var(--greenColorLighten)}label.checkbox.aqua input:checked+div.inner{background-color:var(--aquaColorLighten)}label.checkbox.yellow input:checked+div.inner{background-color:var(--yellowColorLighten)}label.checkbox.red input:checked+div.inner{background-color:var(--redColorLighten)}label.checkbox.orange input:checked+div.inner{background-color:var(--orangeColorLighten)}label.checkbox.pink input:checked+div.inner{background-color:var(--pinkColorLighten)}label.checkbox.violet input:checked+div.inner{background-color:var(--violetColorLighten)}label.checkbox.brown input:checked+div.inner{background-color:var(--brownColorLighten)}label.checkbox.xl div.inner{width:30px;height:30px}label.checkbox.lg div.inner{width:25px;height:25px}label.checkbox.md div.inner{width:20px;height:20px}label.checkbox.sm div.inner{width:18px;height:18px}label.checkbox.xm div.inner{width:15px;height:15px}form.form-group input.form-control,form.form-group select.form-control,form.form-group textarea.form-control,form.from-group,nav.navbar{width:100%}kbd{padding:8px 10px;color:var(--lightColor);background-color:var(--darkColor);font-size:.75em;box-shadow:0 2px .5px var(--darkColorDarken);user-select:none;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none}kbd.light{color:var(--darkColor);background-color:var(--lightColor);box-shadow:0 2px .5px var(--lightColorDarken)}kbd.aqua,kbd.blue,kbd.brown,kbd.gray,kbd.green,kbd.orange,kbd.pink,kbd.red,kbd.violet{color:var(--lightColor)}kbd.blue{background-color:var(--blueColor);box-shadow:0 2px .5px var(--blueColorDarken)}kbd.gray{background-color:var(--grayColor);box-shadow:0 2px .5px var(--grayColorDarken)}kbd.green{background-color:var(--greenColor);box-shadow:0 2px .5px var(--greenColorDarken)}kbd.aqua{background-color:var(--aquaColor);box-shadow:0 2px .5px var(--aquaColorDarken)}kbd.yellow{color:var(--lightColor);background-color:var(--yellowColor);box-shadow:0 2px .5px var(--yellowColorDarken)}kbd.red{background-color:var(--redColor);box-shadow:0 2px .5px var(--redColorDarken)}kbd.orange{background-color:var(--orangeColor);box-shadow:0 2px .5px var(--orangeColorDarken)}kbd.violet{background-color:var(--violetColor);box-shadow:0 2px .5px var(--violetColorDarken)}kbd.pink{background-color:var(--pinkColor);box-shadow:0 2px .5px var(--pinkColorDarken)}kbd.brown{background-color:var(--brownColor);box-shadow:0 2px .5px var(--brownColorDarken)}blockquote{min-width:100px;margin:5px 0;padding:20px 30px;color:rgba(0,0,0,.5);background-color:#f7f7f7;border-left:5px solid rgba(0,0,0,.5);box-shadow:0 3px 2px rgba(0,0,0,.2)}blockquote::before{position:relative;top:8px;left:-30px;content:"\"";font-size:5em}blockquote.light{color:var(--lightColorDarken);background-color:var(--lightColorWeak);border-color:var(--lightColorDarken)}blockquote.dark{color:var(--darkColorDarken);background-color:var(--darkColorWeak);border-color:var(--darkColorDarken)}blockquote.blue{color:var(--blueColorDarken);background-color:var(--blueColorWeak);border-color:var(--blueColorDarken)}blockquote.gray{color:var(--grayColorDarken);background-color:var(--grayColorWeak);border-color:var(--grayColorDarken)}blockquote.green{color:var(--greenColorDarken);background-color:var(--greenColorWeak);border-color:var(--greenColorDarken)}blockquote.orange{color:var(--orangeColorDarken);background-color:var(--orangeColorWeak);border-color:var(--orangeColorDarken)}blockquote.yellow{color:var(--yellowColorDarken);background-color:var(--yellowColorWeak);border-color:var(--yellowColorDarken)}blockquote.red{color:var(--redColorDarken);background-color:var(--redColorWeak);border-color:var(--redColorDarken)}blockquote.pink{color:var(--pinkColorDarken);background-color:var(--pinkColorWeak);border-color:var(--pinkColorDarken)}blockquote.violet{color:var(--violetColorDarken);background-color:var(--violetColorWeak);border-color:var(--violetColorDarken)}blockquote.brown{color:var(--brownColorDarken);background-color:var(--brownColorWeak);border-color:var(--brownColorDarken)}blockquote.aqua{color:var(--aquaColorDarken);background-color:var(--aquaColorWeak);border-color:var(--aquaColorDarken)}code{padding:5px;color:#f44;background-color:#ffbaba;box-shadow:0 2px 2px rgba(0,0,0,.2)}div.landleg,header.landleg{padding:40px 80px;background-color:var(--lightColor);border-bottom:3px solid var(--lightColorDarken)}div.landleg *,header.landleg *{margin:10px auto}div.landleg .lead,header.landleg .lead{font-size:3em;margin-bottom:30px}.container{padding:40px 80px}.flex{display:flex;flex-direction:row;align-content:center}.flex div{flex:auto}hr{margin:20px 0;border:none;border-bottom:1.5px solid rgba(0,0,0,.3);border-radius:5px}hr.light{border-color:var(--lightColor)}hr.dark{border-color:var(--darkColor)}hr.blue{border-color:var(--blueColor)}hr.gray{border-color:var(--grayColor)}hr.green{border-color:var(--greenColor)}hr.aqua{border-color:var(--aquaColor)}hr.yellow{border-color:var(--yellowColor)}hr.red{border-color:var(--redColor)}hr.pink{border-color:var(--pinkColor)}hr.orange{border-color:var(--orangeColor)}hr.violet{border-color:var(--violetColor)}hr.brown{border-color:var(--brownColor)}hr.fade{height:2px;border:none;border-radius:5px;background:linear-gradient(to right,transparent,rgba(0,0,0,.3),transparent)}div.fold{margin:5px 0;padding:30px;border:1px solid var(--lightColor);border-radius:3px;background-color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}.fold .lead{font-size:2em;margin-bottom:30px}div.fold.light{border-color:var(--lightColorDarken);background-color:var(--lightColor);color:var(--darkColor)}div.fold.blue,div.fold.dark,div.fold.gray{color:var(--lightColor)}div.fold.dark{border-color:var(--darkColorDarken);background-color:var(--darkColor)}div.fold.blue{border-color:var(--blueColorDarken);background-color:var(--blueColor)}div.fold.gray{border-color:var(--grayColorDarken);background-color:var(--grayColor)}div.fold.green{border-color:var(--greenColorDarken);background-color:var(--greenColor);color:#fff}div.fold.aqua{border-color:var(--aquaColorDarken);background-color:var(--aquaColor);color:#fff}div.fold.yellow{border-color:var(--yellowColorDarken);background-color:var(--yellowColor);color:#fff}div.fold.brown,div.fold.orange,div.fold.pink,div.fold.red,div.fold.violet{color:var(--lightColor)}div.fold.red{border-color:var(--redColorDarken);background-color:var(--redColor)}div.fold.orange{border-color:var(--orangeColorDarken);background-color:var(--orangeColor)}div.fold.pink{border-color:var(--pinkColorDarken);background-color:var(--pinkColor)}div.fold.violet{border-color:var(--violetColorDarken);background-color:var(--violetColor)}div.fold.brown{border-color:var(--brownColorDarken);background-color:var(--brownColor)}div.fold.disabled{border-color:var(--disabledColorDarken);background-color:var(--disabledColor);color:var(--disabledColorLighten);cursor:not-allowed}p.indent::first-letter{padding-right:2px;font-size:1.5em;font-weight:700}a:link{text-decoration:none;color:var(--blueColor);transition-property:color;transition-duration:.3s}li.navitem,ul.list.select li{transition-property:background-color;transition-duration:.5s}a:visited{color:var(--violetColorLighten)}a:hover{color:var(--blueColorLighten)}a:active:{color:var(--blueColorDarken)}.light a{color:var(--lightColorStrong)}.dark a{color:var(--darkColorStrong)}.blue a{color:var(--blueColorStrong)}.gray a{color:var(--grayColorStrong)}.green a{color:var(--greenColorStrong)}.aqua a{color:var(--aquaColorStrong)}.yellow a{color:var(--yellowColorStrong)}.red a{color:var(--redColorStrong)}.orange a{color:var(--orangeColorStrong)}.pink a{color:var(--pinkColorStrong)}.violet a{color:var(--violetColorStrong)}.brown a{color:var(--brownColorStrong)}.disabled a{color:var(--disabledColorStrong)}mark{padding:5px 3px;background-color:#fff5c1}.light mark{background-color:var(--lightColorDarken)}.dark mark{color:var(--lightColor);background-color:var(--darkColorDarken)}.blue mark{color:#fff;background-color:var(--blueColorDarken)}.gray mark{color:#fff;background-color:var(--grayColorDarken)}.green mark{color:#fff;background-color:var(--greenColorDarken)}.aqua mark{color:#fff;background-color:var(--aquaColorDarken)}.yellow mark{color:#fff;background-color:var(--yellowColorDarken)}.red mark{color:#fff;background-color:var(--redColorDarken)}.orange mark{color:#fff;background-color:var(--orangeColorDarken)}.pink mark{color:#fff;background-color:var(--pinkColorDarken)}.violet mark{color:#fff;background-color:var(--violetColorDarken)}.brown mark{color:#fff;background-color:var(--brownColorDarken)}.disabled mark{color:#cbcbcb;background-color:var(--disabledColorDarken)}span.cig,span.cig.dark,span.cig.light{color:var(--darkColor)}span.cig{padding:5px;font-size:.8em;background-color:#fff;border-radius:5px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none}span.cig.cursor{cursor:pointer}span.cig.disabled.cursor{cursor:not-allowed}span.cig.pill{border-radius:20px}span.cig.blue{color:var(--blueColor)}span.cig.gray{color:var(--grayColor)}span.cig.green{color:var(--greenColor)}span.cig.aqua{color:var(--aquaColor)}span.cig.yellow{color:var(--yellowColor)}span.cig.red{color:var(--redColor)}span.cig.orange{color:var(--orangeColor)}span.cig.pink{color:var(--pinkColor)}span.cig.violet{color:var(--violetColor)}span.cig.brown{color:var(--brownColor)}span.cig.disabled{color:var(--disabledColor)}span.cig.invert{color:#fff;background-color:var(--darkColor)}span.cig.light.invert{color:var(--lightColor);background-color:var(--darkColor)}span.cig.dark.invert{color:var(--darkColor);background-color:var(--lightColor)}span.cig.blue.invert{color:var(--lightColor);background-color:var(--blueColor)}span.cig.gray.invert{color:var(--lightColor);background-color:var(--grayColor)}span.cig.green.invert{color:var(--lightColor);background-color:var(--greenColor)}span.cig.aqua.invert{color:var(--lightColor);background-color:var(--aquaColor)}span.cig.yellow.invert{color:var(--lightColor);background-color:var(--yellowColor)}span.cig.red.invert{color:var(--lightColor);background-color:var(--redColor)}span.cig.orange.invert{color:var(--lightColor);background-color:var(--orangeColor)}span.cig.pink.invert{color:var(--lightColor);background-color:var(--pinkColor)}span.cig.violet.invert{color:var(--lightColor);background-color:var(--violetColor)}span.cig.brown.invert{color:var(--lightColor);background-color:var(--brownColor)}span.cig.disabled.invert{color:var(--lightColor);background-color:var(--disabledColor)}span.cig.xl{padding:9px;font-size:1em}span.cig.lg{padding:7px;font-size:.9em}span.cig.md{padding:5px;font-size:.8em}span.cig.sm{padding:4px;font-size:.7em}span.cig.xm{padding:3px;font-size:.65em}.ml-1{margin-left:1em}.ml-2{margin-left:2em}.ml-3{margin-left:3em}.mr-1{margin-right:1em}.mr-2{margin-right:2em}.mr-3{margin-right:3em}.mt-1{margin-top:1em}.mt-2{margin-top:2em}.mt-3{margin-top:3em}.mb-1{margin-bottom:1em}.mb-2{margin-bottom:2em}.mb-3{margin-bottom:3em}table.table{margin:5px 0;width:100%;border-collapse:collapse;text-align:center;color:var(--darkColor)}table.table th{padding:15px 0;background-color:var(--lightColor)}li.list-item,table.table td{padding:10px}table.table tr:not(:last-child){border-bottom:1.5px solid var(--lightColorLighten)}table.table td.active,table.table tr.active{font-weight:700;background-color:var(--lightColor)}table.table.border{border:1px solid var(--lightColor);border-radius:1px;box-shadow:0 1px 1px rgba(0,0,0,.1)}table.table.stripped tr:nth-child(odd):not(:first-child){background-color:#f5f5f5}table.table.dark th{background-color:var(--darkColor);color:var(--lightColor)}table.table.dark tr:not(:last-child){border-bottom:1.5px solid var(--darkColor)}table.table.dark td.active,table.table.dark tr.active{font-weight:700;background-color:var(--darkColorWeak)}table.table.dark.stripped tr:nth-child(odd):not(:first-child){background-color:var(--darkColorWeak)}table.table.blue th{background-color:var(--blueColor);color:#fff}table.table.blue tr:not(:last-child){border-bottom:1.5px solid var(--blueColor)}table.table.blue td{color:var(--blueColor)}table.table.blue td.active,table.table.blue tr.active{font-weight:700;background-color:var(--blueColorWeak)}table.table.blue.stripped tr:nth-child(odd):not(:first-child){background-color:var(--blueColorWeak)}table.table.gray th{background-color:var(--grayColor);color:var(--lightColor)}table.table.gray tr:not(:last-child){border-bottom:1.5px solid var(--grayColor)}table.table.gray td{color:var(--grayColor)}table.table.gray td.active,table.table.gray tr.active{font-weight:700;background-color:var(--grayColorWeak)}table.table.gray.stripped tr:nth-child(odd):not(:first-child){background-color:var(--grayColorWeak)}table.table.green th{background-color:var(--greenColor);color:var(--lightColor)}table.table.green tr:not(:last-child){border-bottom:1.5px solid var(--greenColor)}table.table.green td{color:var(--greenColor)}table.table.green td.active,table.table.green tr.active{font-weight:700;background-color:var(--greenColorWeak)}table.table.green.stripped tr:nth-child(odd):not(:first-child){background-color:var(--greenColorWeak)}table.table.aqua th{background-color:var(--aquaColor);color:var(--lightColor)}table.table.aqua tr:not(:last-child){border-bottom:1.5px solid var(--aquaColor)}table.table.aqua td{color:var(--aquaColor)}table.table.aqua td.active,table.table.aqua tr.active{font-weight:700;background-color:var(--aquaColorWeak)}table.table.aqua.stripped tr:nth-child(odd):not(:first-child){background-color:var(--aquaColorWeak)}table.table.yellow th{background-color:var(--yellowColor);color:var(--lightColor)}table.table.yellow tr:not(:last-child){border-bottom:1.5px solid var(--yellowColor)}table.table.yellow td{color:var(--yellowColor)}table.table.yellow td.active,table.table.yellow tr.active{font-weight:700;background-color:var(--yellowColorWeak)}table.table.yellow.stripped tr:nth-child(odd):not(:first-child){background-color:var(--yellowColorWeak)}table.table.red th{background-color:var(--redColor);color:var(--lightColor)}table.table.red tr:not(:last-child){border-bottom:1.5px solid var(--redColor)}table.table.red td{color:var(--redColor)}table.table.red td.active,table.table.red tr.active{font-weight:700;background-color:var(--redColorWeak)}table.table.red.stripped tr:nth-child(odd):not(:first-child){background-color:var(--redColorWeak)}table.table.orange th{background-color:var(--orangeColor);color:var(--lightColor)}table.table.orange tr:not(:last-child){border-bottom:1.5px solid var(--orangeColor)}table.table.orange td{color:var(--orangeColor)}table.table.orange td.active,table.table.orange tr.active{font-weight:700;background-color:var(--orangeColorWeak)}table.table.orange.stripped tr:nth-child(odd):not(:first-child){background-color:var(--orangeColorWeak)}table.table.pink th{background-color:var(--pinkColor);color:var(--lightColor)}table.table.pink tr:not(:last-child){border-bottom:1.5px solid var(--pinkColor)}table.table.pink td{color:var(--pinkColor)}table.table.pink td.active,table.table.pink tr.active{font-weight:700;background-color:var(--pinkColorWeak)}table.table.pink.stripped tr:nth-child(odd):not(:first-child){background-color:var(--pinkColorWeak)}table.table.violet th{background-color:var(--violetColor);color:var(--lightColor)}table.table.violet tr:not(:last-child){border-bottom:1.5px solid var(--violetColor)}table.table.violet td{color:var(--violetColor)}table.table.violet td.active,table.table.violet tr.active{font-weight:700;background-color:var(--violetColorWeak)}table.table.violet.stripped tr:nth-child(odd):not(:first-child){background-color:var(--violetColorWeak)}table.table.brown th{background-color:var(--brownColor);color:var(--lightColor)}table.table.brown tr:not(:last-child){border-bottom:1.5px solid var(--brownColor)}table.table.brown td{color:var(--brownColor)}table.table.brown td.active,table.table.brown tr.active{font-weight:700;background-color:var(--brownColorWeak)}table.table.brown.stripped tr:nth-child(odd):not(:first-child){background-color:var(--brownColorWeak)}table.table.aqua.stripped tr,table.table.blue.stripped tr,table.table.brown.stripped tr,table.table.dark.stripped tr,table.table.gray.stripped tr,table.table.green.stripped tr,table.table.orange.stripped tr,table.table.pink.stripped tr,table.table.red.stripped tr,table.table.stripped tr,table.table.violet.stripped tr,table.table.yellow.stripped tr{border:none}ol.list,ul.list{margin:5px 0;box-shadow:0 1px 2px rgba(0,0,0,.2)}ul.list.select li{cursor:pointer}ul.list.select li:hover{background-color:var(--lightColorLighten)}ul.list.light{background-color:var(--lightColor)}ul.list.light li{border-color:var(--lightColorDarken)}ul.list.light.select li:hover{background-color:var(--lightColorLighten)}ul.list.dark{background-color:var(--darkColor)}ul.list.dark li{border-color:var(--darkColorDarken)}ul.list.dark.select li:hover{background-color:var(--darkColorLighten)}ul.list.blue{background-color:var(--blueColor)}ul.list.blue li{border-color:var(--blueColorDarken)}ul.list.blue.select li:hover{background-color:var(--blueColorLighten)}ul.list.gray{background-color:var(--grayColor)}ul.list.gray li{border-color:var(--grayColorDarken)}ul.list.gray.select li:hover{background-color:var(--grayColorLighten)}ul.list.green{background-color:var(--greenColor)}ul.list.green li{border-color:var(--greenColorDarken)}ul.list.green.select li:hover{background-color:var(--greenColorLighten)}ul.list.yellow{background-color:var(--yellowColor)}ul.list.yellow li{border-color:var(--yellowColorDarken)}ul.list.yellow.select li:hover{background-color:var(--yellowColorLighten)}ul.list.red{background-color:var(--redColor)}ul.list.red li{border-color:var(--redColorDarken)}ul.list.red.select li:hover{background-color:var(--redColorLighten)}ul.list.orange{background-color:var(--orangeColor)}ul.list.orange li{border-color:var(--orangeColorDarken)}ul.list.orange.select li:hover{background-color:var(--orangeColorLighten)}ul.list.pink{background-color:var(--pinkColor)}ul.list.pink li{border-color:var(--pinkColorDarken)}ul.list.pink.select li:hover{background-color:var(--pinkColorLighten)}ul.list.violet{background-color:var(--violetColor)}ul.list.violet li{border-color:var(--violetColorDarken)}ul.list.violet.select li:hover{background-color:var(--violetColorLighten)}ul.list.brown{background-color:var(--brownColor)}ul.list.brown li{border-color:var(--brownColorDarken)}ul.list.brown.select li:hover{background-color:var(--brownColorLighten)}ul.list.disabled,ul.list.disabled.select li:hover{background-color:var(--disabledColor)}ul.list.disabled li{border-color:var(--disabledColorDarken);cursor:not-allowed}li.list-item{border:1px solid var(--lightColor)}li.list-item:not(:first-child){border-top:none}nav.navbar{position:relative;min-height:50px;padding:0 40px;box-sizing:border-box;overflow:hidden;background-color:var(--lightColor);box-shadow:0 3px 3px rgba(0,0,0,.2)}li.navitem{float:left;padding:11.3px}ul.navitems a{color:var(--darkColor);font-weight:700}nav.navbar.blue,nav.navbar.dark,nav.navbar.dark ul.navitems a{color:var(--lightColor)}li.navitem:hover{background-color:#cecece}li.navitem:active{background-color:#c6c6c6}nav.navbar.dark{background-color:var(--darkColor)}nav.navbar.dark ul.navitems a li.navitem:hover{background-color:var(--darkColorLighten)}nav.navbar.dark ul.navitems a li.navitem:active{background-color:var(--darkColorDarken)}nav.navbar.blue{background-color:var(--blueColor)}nav.navbar.blue ul.navitems a{color:#fff}nav.navbar.blue ul.navitems a li.navitem:hover{background-color:var(--blueColorLighten)}nav.navbar.blue ul.navitems a li.navitem:active{background-color:var(--blueColorDarken)}nav.navbar.gray{background-color:var(--grayColor);color:var(--lightColor)}nav.navbar.gray ul.navitems a{color:#fff}nav.navbar.gray ul.navitems a li.navitem:hover{background-color:var(--grayColorLighten)}nav.navbar.gray ul.navitems a li.navitem:active{background-color:var(--grayColorDarken)}nav.navbar.green{background-color:var(--greenColor);color:var(--lightColor)}nav.navbar.green ul.navitems a{color:#fff}nav.navbar.green ul.navitems a li.navitem:hover{background-color:var(--greenColorLighten)}nav.navbar.green ul.navitems a li.navitem:active{background-color:var(--greenColorDarken)}nav.navbar.aqua{background-color:var(--aquaColor);color:var(--lightColor)}nav.navbar.aqua ul.navitems a{color:#fff}nav.navbar.aqua ul.navitems a li.navitem:hover{background-color:var(--aquaColorLighten)}nav.navbar.aqua ul.navitems a li.navitem:active{background-color:var(--aquaColorDarken)}nav.navbar.yellow{background-color:var(--yellowColor);color:var(--lightColor)}nav.navbar.yellow ul.navitems a{color:#fff}nav.navbar.yellow ul.navitems a li.navitem:hover{background-color:var(--yellowColorLighten)}nav.navbar.yellow ul.navitems a li.navitem:active{background-color:var(--yellowColorDarken)}nav.navbar.red{background-color:var(--redColor);color:var(--lightColor)}nav.navbar.red ul.navitems a{color:#fff}nav.navbar.red ul.navitems a li.navitem:hover{background-color:var(--redColorLighten)}nav.navbar.red ul.navitems a li.navitem:active{background-color:var(--redColorDarken)}nav.navbar.orange{background-color:var(--orangeColor);color:var(--lightColor)}nav.navbar.orange ul.navitems a{color:#fff}nav.navbar.orange ul.navitems a li.navitem:hover{background-color:var(--orangeColorLighten)}nav.navbar.orange ul.navitems a li.navitem:active{background-color:var(--orangeColorDarken)}nav.navbar.pink{background-color:var(--pinkColor);color:var(--lightColor)}nav.navbar.pink ul.navitems a{color:#fff}nav.navbar.pink ul.navitems a li.navitem:hover{background-color:var(--pinkColorLighten)}nav.navbar.pink ul.navitems a li.navitem:active{background-color:var(--pinkColorDarken)}nav.navbar.violet{background-color:var(--violetColor);color:var(--lightColor)}nav.navbar.violet ul.navitems a{color:#fff}nav.navbar.violet ul.navitems a li.navitem:hover{background-color:var(--violetColorLighten)}nav.navbar.violet ul.navitems a li.navitem:active{background-color:var(--violetColorDarken)}nav.navbar.brown{background-color:var(--brownColor);color:var(--lightColor)}nav.navbar.brown ul.navitems a{color:#fff}nav.navbar.brown ul.navitems a li.navitem:hover{background-color:var(--brownColorLighten)}nav.navbar.brown ul.navitems a li.navitem:active{background-color:var(--brownColorDarken)}nav.navbar.fixed{position:fixed;top:0}nav.navbar.fixed+header{margin-top:50px}.text-bold{font-weight:700}.text-strikethrough{text-decoration:line-through}.text-underline{text-decoration:underline}.text-overline{text-decoration:overline}.text-light{color:var(--lightColor)}.text-dark{color:var(--darkColor)}.text-blue{color:var(--blueColor)}.text-gray{color:var(--grayColor)}.text-green{color:var(--greenColor)}.text-yellow{color:var(--yellowColor)}.text-red{color:var(--redColor)}.text-orange{color:var(--orangeColor)}.text-pink{color:var(--pinkColor)}.text-violet{color:var(--violetColor)}.text-brown{color:var(--brownColor)}.text-disabled{color:var(--disabledColor);cursor:not-allowed}.bg-light{background-color:var(--lightColor)}.bg-dark{background-color:var(--darkColor)}.bg-blue{background-color:var(--blueColor)}.bg-gray{background-color:var(--grayColor)}.bg-green{background-color:var(--greenColor)}.bg-yellow{background-color:var(--yellowColor)}.bg-red{background-color:var(--redColor)}.bg-orange{background-color:var(--orangeColor)}.bg-pink{background-color:var(--pinkColor)}.bg-violet{background-color:var(--violetColor)}.bg-brown{background-color:var(--brownColor)}.bg-disabled{background-color:var(--disabledColor);cursor:not-allowed} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="application-name" content="XML Sandbox"> | |
| <meta name="author" content="EOussama"> | |
| <meta name="description" content="A simple testing environment for XML cheat sheets"> | |
| <meta name="keywords" content="XML, tests, AJAX"> | |
| <link href="styles/eomponents.css" rel="stylesheet"> | |
| <link rel="stylesheet" type="text/css" href="styles/main.css"> | |
| <link rel="icon" type="image/png" href="images/favicon.png"> | |
| <title>XML Sandbox</title> | |
| </head> | |
| <body> | |
| <main class="container"> | |
| <h1 class="text-dark">XML Sandbox</h1> | |
| <hr class="dark"> | |
| <div id="result"> | |
| </div> | |
| </main> | |
| <script src="scripts/jquery-3.3.1.min.js"></script> | |
| <script type="text/javascript" src="scripts/main_dom.js"></script> | |
| <script type="text/javascript" src="scripts/main_xpath.js"></script> | |
| <script type="text/javascript" src="scripts/main_jquery.js"></script> | |
| <script type="text/javascript" src="scripts/main_fetch.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .fold { | |
| overflow: auto; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| window.addEventListener('load', function() { | |
| const | |
| resultPanel = document.getElementById('result'), | |
| xhr = new XMLHttpRequest(); | |
| xhr.addEventListener('load', function() { | |
| if(this.status === 200) { | |
| var | |
| xmlDoc = this.responseXML.documentElement, | |
| resultText = ''; | |
| for(let show of xmlDoc.childNodes) { | |
| if(show.nodeType === 1) { | |
| resultText += `<div class="fold light">`; | |
| for(property of show.childNodes) { | |
| if(property.nodeType === 1) { | |
| switch(property.nodeName) { | |
| case 'name': { | |
| resultText += `<h1 class="lead">${property.childNodes[0].nodeValue}</h1>`; | |
| break; | |
| } | |
| case 'episodes': { | |
| resultText += `<p>Episodes: <span class="cig ml-1">${property.childNodes[0].nodeValue}</span></p>`; | |
| break; | |
| } | |
| case 'score': { | |
| resultText += `<p>Score: <span class="cig ml-1">${property.childNodes[0].nodeValue}</span></p>`; | |
| break; | |
| } | |
| case 'categories': { | |
| resultText += '<p>Categories:'; | |
| for(category of property.childNodes) { | |
| if(category.nodeType === 1) { | |
| resultText += `<span class="cig ml-1">${category.nodeName}</span>`; | |
| } | |
| } | |
| resultText += '</p>'; | |
| break; | |
| } | |
| } | |
| } | |
| } | |
| resultText += '</div>'; | |
| } | |
| } | |
| resultPanel.innerHTML = resultText; | |
| } | |
| }); | |
| xhr.open('GET', '../data/anime.xml', true); | |
| xhr.send(); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| window.addEventListener('load', function() { | |
| const resultPanel = document.getElementById('result'); | |
| fetch('../data/anime.xml') | |
| .then(data => data.text()) | |
| .then(text => (new DOMParser()).parseFromString(text, "text/xml")) | |
| .then(xml => { | |
| var | |
| xmlDoc = xml.documentElement, | |
| resultText = ''; | |
| for(let show of xmlDoc.childNodes) { | |
| if(show.nodeType === 1) { | |
| resultText += `<div class="fold light">`; | |
| for(property of show.childNodes) { | |
| if(property.nodeType === 1) { | |
| switch(property.nodeName) { | |
| case 'name': { | |
| resultText += `<h1 class="lead">${property.childNodes[0].nodeValue}</h1>`; | |
| break; | |
| } | |
| case 'episodes': { | |
| resultText += `<p>Episodes: <span class="cig ml-1">${property.childNodes[0].nodeValue}</span></p>`; | |
| break; | |
| } | |
| case 'score': { | |
| resultText += `<p>Score: <span class="cig ml-1">${property.childNodes[0].nodeValue}</span></p>`; | |
| break; | |
| } | |
| case 'categories': { | |
| resultText += '<p>Categories:'; | |
| for(category of property.childNodes) { | |
| if(category.nodeType === 1) { | |
| resultText += `<span class="cig ml-1">${category.nodeName}</span>`; | |
| } | |
| } | |
| resultText += '</p>'; | |
| break; | |
| } | |
| } | |
| } | |
| } | |
| resultText += '</div>'; | |
| } | |
| } | |
| resultPanel.innerHTML = resultText; | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| const $resultPanel = $('#result'); | |
| var resultText = ''; | |
| $.get('../data/anime.xml', function(data) { | |
| $(data).find('show').each(function(iterator, show) { | |
| const | |
| $name = $(show).find('name').text(), | |
| $episodes = $(show).find('episodes').text(), | |
| $score = $(show).find('score').text(), | |
| $categories = $(show).find('categories'), | |
| $state = $(show).attr('state'); | |
| resultText += `<div class="fold light">`; | |
| resultText += `<h1 class="lead">${$name}</h1>`; | |
| resultText += `<p>Episodes: <span class="cig ml-1">${$episodes}</span></p>`; | |
| resultText += `<p>Score: <span class="cig ml-1">${$score}</span></p>`; | |
| resultText += '<p>Categories:'; | |
| $($categories).children().each(function(iter, cat) { | |
| resultText += `<span class="cig ml-1">${cat.nodeName}</span>`; | |
| }); | |
| resultText += '</div>'; | |
| }); | |
| $resultPanel.html(resultText); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| window.addEventListener('load', function() { | |
| const | |
| resultPanel = document.getElementById('result'), | |
| xhr = new XMLHttpRequest(); | |
| xhr.addEventListener('load', function() { | |
| if(this.status === 200) { | |
| var | |
| xmlDoc = this.responseXML, | |
| resultText = '', | |
| nodes = xmlDoc.evaluate('/anime/show', xmlDoc), | |
| show = nodes.iterateNext(); | |
| while(show) { | |
| resultText += `<div class="fold light">`; | |
| var | |
| showName = xmlDoc.evaluate('/anime/show[@id='+show.getAttribute('id')+']/name/text()', show).iterateNext(), | |
| showEpisodes = xmlDoc.evaluate('/anime/show[@id='+show.getAttribute('id')+']/episodes/text()', show).iterateNext(), | |
| showScore = xmlDoc.evaluate('/anime/show[@id='+show.getAttribute('id')+']/score/text()', show).iterateNext(), | |
| showState = xmlDoc.evaluate('/anime/show[@id='+show.getAttribute('id')+']/@state', show).iterateNext(); | |
| resultText += `<h1 class="lead">${showName.nodeValue}</h1>`; | |
| resultText += `<p>Episodes: <span class="cig ml-1">${showEpisodes.nodeValue}</span></p>`; | |
| resultText += `<p>Score: <span class="cig ml-1">${showScore.nodeValue}</span></p>`; | |
| var | |
| showCategories = xmlDoc.evaluate('/anime/show[@id='+show.getAttribute('id')+']/categories/child::node()', show), | |
| category = showCategories.iterateNext(); | |
| resultText += '<p>Categories:'; | |
| while(category) { | |
| if(category.nodeType === 1) { | |
| resultText += `<span class="cig ml-1">${category.nodeName}</span>`; | |
| } | |
| category = showCategories.iterateNext(); | |
| } | |
| resultText += '</div>'; | |
| show = nodes.iterateNext(); | |
| } | |
| resultPanel.innerHTML = resultText; | |
| } | |
| }); | |
| xhr.open('GET', '../data/anime.xml', true); | |
| xhr.send(); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="utf-8" ?> | |
| <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > | |
| <xsl:template match="/" > | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="application-name" content="XML Sandbox"> | |
| <meta name="author" content="EOussama"> | |
| <meta name="description" content="A simple testing environment for XML cheat sheets"> | |
| <meta name="keywords" content="XML, tests, AJAX"> | |
| <link href="../styles/eomponents.css" rel="stylesheet"> | |
| <link rel="stylesheet" type="text/css" href="../styles/main.css"> | |
| <link rel="icon" type="image/png" href="../images/favicon.png"> | |
| <title>XML Sandbox</title> | |
| </head> | |
| <body> | |
| <main class="container"> | |
| <h1 class="text-dark">XML Sandbox</h1> | |
| <hr class="dark"> | |
| <div id="result"> | |
| <xsl:for-each select="anime/show" > | |
| <div class="fold light"> | |
| <h1 class="lead"><xsl:value-of select="title" /></h1> | |
| <p>Episodes: <span class="cig ml-1"><xsl:value-of select="episodes" /></span></p> | |
| <p>Score: <span class="cig ml-1"><xsl:value-of select="score" /></span></p> | |
| <p> | |
| Categories: | |
| <xsl:for-each select="" > | |
| <span class="cig ml-1">Category</span> | |
| </xsl:for-each> | |
| </p> | |
| </div> | |
| </xsl:for-each> | |
| </div> | |
| </main> | |
| </body> | |
| </html> | |
| </xsl:template> | |
| </xsl:stylesheet> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment