LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-09 12:57:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added related SVG charts to showcase things

Browse Source
This commit is contained in:
Corbin Crutchley
2019-11-20 12:31:21 -08:00
parent fd10d17ded
commit 8711c71e92
5 changed files with 90 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
content/blog/understanding-the-dom/dom_relationship_rules.svg Normal file
View File

@@ -0,0 +1,32 @@
<svg width="454" height="356" viewBox="0 0 454 356" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="195" y="44.5498" width="183" height="60" fill="black">
<rect fill="white" x="195" y="44.5498" width="183" height="60"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M377 74V72.9888L375.989 73.0001L287.221 73.9888L287.22 46.4487H287.218V45.5498L285.218 45.5498L285.218 74L197 74L196 74L196 75L196 89.7244L196 102.5L198 102.5L198 89.7243L198 76L285.218 76V76.0112L286.221 76H286.223H287.221V75.9889L375 75.0112L375 103.55L377 103.55L377 74Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M377 74V72.9888L375.989 73.0001L287.221 73.9888L287.22 46.4487H287.218V45.5498L285.218 45.5498L285.218 74L197 74L196 74L196 75L196 89.7244L196 102.5L198 102.5L198 89.7243L198 76L285.218 76V76.0112L286.221 76H286.223H287.221V75.9889L375 75.0112L375 103.55L377 103.55L377 74Z" fill="black"/>
<path d="M377 72.9888H378V71.9776L376.989 71.9889L377 72.9888ZM377 74L376 74L376 74L377 74ZM375.989 73.0001L376 74L376 74L375.989 73.0001ZM287.221 73.9888L286.221 73.9888L286.221 75L287.232 74.9887L287.221 73.9888ZM287.22 46.4487L288.22 46.4487L288.22 45.4487H287.22V46.4487ZM287.218 46.4487H286.218V47.4487H287.218V46.4487ZM287.218 45.5498H288.218V44.5498L287.218 44.5498L287.218 45.5498ZM285.218 45.5498L285.218 44.5498L284.218 44.5498L284.218 45.5498L285.218 45.5498ZM285.218 74L285.218 75L286.218 75L286.218 74L285.218 74ZM197 74L197 73L197 73L197 74ZM196 74L196 73L195 73L195 74L196 74ZM196 75L197 75L197 75L196 75ZM196 89.7244L195 89.7244L195 89.7244L196 89.7244ZM196 102.5L195 102.5L195 103.5L196 103.5L196 102.5ZM198 102.5L198 103.5L199 103.5L199 102.5L198 102.5ZM198 89.7243L197 89.7243L197 89.7244L198 89.7243ZM198 76L198 75L197 75L197 76L198 76ZM285.218 76H286.218V75L285.218 75L285.218 76ZM285.218 76.0112H284.218V77.0224L285.229 77.0111L285.218 76.0112ZM286.221 76V74.9999L286.209 75.0001L286.221 76ZM287.221 76V77H288.221V76H287.221ZM287.221 75.9889L287.209 74.989L286.221 75V75.9889H287.221ZM375 75.0112L376 75.0112L376 74L374.989 74.0113L375 75.0112ZM375 103.55L374 103.55L374 104.55L375 104.55L375 103.55ZM377 103.55L377 104.55L378 104.55L378 103.55L377 103.55ZM376 72.9888V74H378V72.9888H376ZM376 74L377.011 73.9887L376.989 71.9889L375.978 72.0001L376 74ZM287.232 74.9887L376 74L375.978 72.0001L287.209 72.9888L287.232 74.9887ZM286.22 46.4487L286.221 73.9888L288.221 73.9888L288.22 46.4487L286.22 46.4487ZM287.218 47.4487H287.22V45.4487H287.218V47.4487ZM286.218 45.5498V46.4487H288.218V45.5498H286.218ZM285.218 46.5498L287.218 46.5498L287.218 44.5498L285.218 44.5498L285.218 46.5498ZM286.218 74L286.218 45.5498L284.218 45.5498L284.218 74L286.218 74ZM197 75L285.218 75L285.218 73L197 73L197 75ZM196 75L197 75L197 73L196 73L196 75ZM197 75L197 74L195 74L195 75L197 75ZM197 89.7244L197 75L195 75L195 89.7244L197 89.7244ZM197 102.5L197 89.7244L195 89.7244L195 102.5L197 102.5ZM198 101.5L196 101.5L196 103.5L198 103.5L198 101.5ZM197 89.7244L197 102.5L199 102.5L199 89.7243L197 89.7244ZM197 76L197 89.7243L199 89.7243L199 76L197 76ZM285.218 75L198 75L198 77L285.218 77L285.218 75ZM286.218 76.0112V76H284.218V76.0112H286.218ZM286.209 75.0001L285.206 75.0113L285.229 77.0111L286.232 76.9999L286.209 75.0001ZM286.223 75H286.221V77H286.223V75ZM287.221 75H286.223V77H287.221V75ZM286.221 75.9889V76H288.221V75.9889H286.221ZM374.989 74.0113L287.209 74.989L287.232 76.9888L375.011 76.0111L374.989 74.0113ZM376 103.55L376 75.0112L374 75.0112L374 103.55L376 103.55ZM377 102.55L375 102.55L375 104.55L377 104.55L377 102.55ZM376 74L376 103.55L378 103.55L378 74L376 74Z" fill="white" mask="url(#path-1-outside-1)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M119 126.257C119 113.83 129.074 103.757 141.5 103.757H252.902C258.87 103.757 264.593 106.127 268.812 110.347C273.032 114.566 275.402 120.289 275.402 126.257C275.402 138.683 265.329 148.757 252.902 148.757H141.5C129.074 148.757 119 138.683 119 126.257Z" fill="#FCE5CD" stroke="#783F04" stroke-miterlimit="8" stroke-linejoin="round"/>
<path d="M188.122 128.696C187.964 130.05 187.463 131.096 186.619 131.834C185.781 132.566 184.665 132.933 183.271 132.933C181.759 132.933 180.546 132.391 179.632 131.307C178.724 130.223 178.27 128.772 178.27 126.956V125.725C178.27 124.536 178.48 123.49 178.902 122.588C179.33 121.685 179.934 120.994 180.713 120.514C181.492 120.027 182.395 119.784 183.42 119.784C184.779 119.784 185.869 120.165 186.689 120.927C187.51 121.683 187.987 122.731 188.122 124.073H186.426C186.279 123.054 185.96 122.315 185.468 121.858C184.981 121.401 184.299 121.173 183.42 121.173C182.342 121.173 181.495 121.571 180.88 122.368C180.271 123.165 179.966 124.299 179.966 125.769V127.009C179.966 128.397 180.256 129.502 180.836 130.322C181.416 131.142 182.228 131.553 183.271 131.553C184.208 131.553 184.926 131.342 185.424 130.92C185.928 130.492 186.262 129.751 186.426 128.696H188.122ZM191.805 124.398C192.525 123.514 193.463 123.071 194.617 123.071C196.627 123.071 197.641 124.205 197.658 126.473V132.757H196.032V126.464C196.026 125.778 195.868 125.271 195.558 124.943C195.253 124.615 194.775 124.451 194.125 124.451C193.598 124.451 193.135 124.592 192.736 124.873C192.338 125.154 192.027 125.523 191.805 125.98V132.757H190.179V119.257H191.805V124.398ZM201.859 132.757H200.233V123.247H201.859V132.757ZM200.102 120.725C200.102 120.461 200.181 120.238 200.339 120.057C200.503 119.875 200.743 119.784 201.06 119.784C201.376 119.784 201.616 119.875 201.78 120.057C201.944 120.238 202.026 120.461 202.026 120.725C202.026 120.988 201.944 121.208 201.78 121.384C201.616 121.559 201.376 121.647 201.06 121.647C200.743 121.647 200.503 121.559 200.339 121.384C200.181 121.208 200.102 120.988 200.102 120.725ZM206.236 132.757H204.61V119.257H206.236V132.757ZM208.451 127.923C208.451 126.464 208.797 125.292 209.488 124.407C210.18 123.517 211.085 123.071 212.204 123.071C213.317 123.071 214.199 123.452 214.85 124.214V119.257H216.476V132.757H214.981L214.902 131.737C214.252 132.534 213.347 132.933 212.187 132.933C211.085 132.933 210.186 132.481 209.488 131.579C208.797 130.677 208.451 129.499 208.451 128.046V127.923ZM210.077 128.107C210.077 129.185 210.3 130.029 210.745 130.639C211.19 131.248 211.806 131.553 212.591 131.553C213.622 131.553 214.375 131.09 214.85 130.164V125.796C214.363 124.899 213.616 124.451 212.608 124.451C211.812 124.451 211.19 124.759 210.745 125.374C210.3 125.989 210.077 126.9 210.077 128.107Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M297 126.5C297 114.074 307.074 104 319.5 104H430.902C436.87 104 442.593 106.371 446.812 110.59C451.032 114.81 453.402 120.533 453.402 126.5C453.402 138.926 443.329 149 430.902 149H319.5C307.074 149 297 138.926 297 126.5Z" fill="#FCE5CD" stroke="#783F04" stroke-miterlimit="8" stroke-linejoin="round"/>
<path d="M366.122 128.939C365.964 130.293 365.463 131.339 364.619 132.077C363.781 132.81 362.665 133.176 361.271 133.176C359.759 133.176 358.546 132.634 357.632 131.55C356.724 130.466 356.27 129.016 356.27 127.199V125.969C356.27 124.779 356.48 123.733 356.902 122.831C357.33 121.929 357.934 121.237 358.713 120.757C359.492 120.271 360.395 120.027 361.42 120.027C362.779 120.027 363.869 120.408 364.689 121.17C365.51 121.926 365.987 122.975 366.122 124.316H364.426C364.279 123.297 363.96 122.559 363.468 122.102C362.981 121.645 362.299 121.416 361.42 121.416C360.342 121.416 359.495 121.814 358.88 122.611C358.271 123.408 357.966 124.542 357.966 126.013V127.252C357.966 128.641 358.256 129.745 358.836 130.565C359.416 131.386 360.228 131.796 361.271 131.796C362.208 131.796 362.926 131.585 363.424 131.163C363.928 130.735 364.262 129.994 364.426 128.939H366.122ZM369.805 124.642C370.525 123.757 371.463 123.314 372.617 123.314C374.627 123.314 375.641 124.448 375.658 126.716V133H374.032V126.707C374.026 126.021 373.868 125.515 373.558 125.187C373.253 124.858 372.775 124.694 372.125 124.694C371.598 124.694 371.135 124.835 370.736 125.116C370.338 125.397 370.027 125.767 369.805 126.224V133H368.179V119.5H369.805V124.642ZM379.859 133H378.233V123.49H379.859V133ZM378.102 120.968C378.102 120.704 378.181 120.481 378.339 120.3C378.503 120.118 378.743 120.027 379.06 120.027C379.376 120.027 379.616 120.118 379.78 120.3C379.944 120.481 380.026 120.704 380.026 120.968C380.026 121.231 379.944 121.451 379.78 121.627C379.616 121.803 379.376 121.891 379.06 121.891C378.743 121.891 378.503 121.803 378.339 121.627C378.181 121.451 378.102 121.231 378.102 120.968ZM384.236 133H382.61V119.5H384.236V133ZM386.451 128.166C386.451 126.707 386.797 125.535 387.488 124.65C388.18 123.76 389.085 123.314 390.204 123.314C391.317 123.314 392.199 123.695 392.85 124.457V119.5H394.476V133H392.981L392.902 131.98C392.252 132.777 391.347 133.176 390.187 133.176C389.085 133.176 388.186 132.725 387.488 131.822C386.797 130.92 386.451 129.742 386.451 128.289V128.166ZM388.077 128.351C388.077 129.429 388.3 130.272 388.745 130.882C389.19 131.491 389.806 131.796 390.591 131.796C391.622 131.796 392.375 131.333 392.85 130.407V126.039C392.363 125.143 391.616 124.694 390.608 124.694C389.812 124.694 389.19 125.002 388.745 125.617C388.3 126.232 388.077 127.144 388.077 128.351Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M208 23.5C208 11.0736 218.074 1 230.5 1H341.902C347.87 1 353.593 3.37056 357.812 7.59013C362.032 11.8097 364.402 17.5326 364.402 23.5C364.402 35.9264 354.329 46 341.902 46H230.5C218.074 46 208 35.9264 208 23.5Z" fill="#FCE5CD" stroke="#783F04" stroke-miterlimit="8" stroke-linejoin="round"/>
<path d="M273.923 24.8232H270.917V30H269.221V17.2031H273.457C274.898 17.2031 276.006 17.5312 276.779 18.1875C277.559 18.8438 277.948 19.7988 277.948 21.0527C277.948 21.8496 277.731 22.5439 277.298 23.1357C276.87 23.7275 276.272 24.1699 275.505 24.4629L278.511 29.8945V30H276.7L273.923 24.8232ZM270.917 23.4434H273.51C274.348 23.4434 275.013 23.2266 275.505 22.793C276.003 22.3594 276.252 21.7793 276.252 21.0527C276.252 20.2617 276.015 19.6553 275.54 19.2334C275.071 18.8115 274.392 18.5977 273.501 18.5918H270.917V23.4434ZM279.636 25.1572C279.636 24.2256 279.817 23.3877 280.181 22.6436C280.55 21.8994 281.06 21.3252 281.71 20.9209C282.366 20.5166 283.113 20.3145 283.951 20.3145C285.246 20.3145 286.292 20.7627 287.089 21.6592C287.892 22.5557 288.293 23.748 288.293 25.2363V25.3506C288.293 26.2764 288.114 27.1084 287.757 27.8467C287.405 28.5791 286.898 29.1504 286.236 29.5605C285.58 29.9707 284.824 30.1758 283.969 30.1758C282.68 30.1758 281.634 29.7275 280.831 28.8311C280.034 27.9346 279.636 26.748 279.636 25.2715V25.1572ZM281.271 25.3506C281.271 26.4053 281.514 27.252 282 27.8906C282.492 28.5293 283.148 28.8486 283.969 28.8486C284.795 28.8486 285.451 28.5264 285.938 27.8818C286.424 27.2314 286.667 26.3232 286.667 25.1572C286.667 24.1143 286.418 23.2705 285.92 22.626C285.428 21.9756 284.771 21.6504 283.951 21.6504C283.148 21.6504 282.501 21.9697 282.009 22.6084C281.517 23.2471 281.271 24.1611 281.271 25.3506ZM289.901 25.1572C289.901 24.2256 290.083 23.3877 290.446 22.6436C290.815 21.8994 291.325 21.3252 291.976 20.9209C292.632 20.5166 293.379 20.3145 294.217 20.3145C295.512 20.3145 296.558 20.7627 297.354 21.6592C298.157 22.5557 298.559 23.748 298.559 25.2363V25.3506C298.559 26.2764 298.38 27.1084 298.022 27.8467C297.671 28.5791 297.164 29.1504 296.502 29.5605C295.846 29.9707 295.09 30.1758 294.234 30.1758C292.945 30.1758 291.899 29.7275 291.097 28.8311C290.3 27.9346 289.901 26.748 289.901 25.2715V25.1572ZM291.536 25.3506C291.536 26.4053 291.779 27.252 292.266 27.8906C292.758 28.5293 293.414 28.8486 294.234 28.8486C295.061 28.8486 295.717 28.5264 296.203 27.8818C296.689 27.2314 296.933 26.3232 296.933 25.1572C296.933 24.1143 296.684 23.2705 296.186 22.626C295.693 21.9756 295.037 21.6504 294.217 21.6504C293.414 21.6504 292.767 21.9697 292.274 22.6084C291.782 23.2471 291.536 24.1611 291.536 25.3506ZM302.804 18.1875V20.4902H304.579V21.7471H302.804V27.6445C302.804 28.0254 302.883 28.3125 303.041 28.5059C303.199 28.6934 303.469 28.7871 303.85 28.7871C304.037 28.7871 304.295 28.752 304.623 28.6816V30C304.195 30.1172 303.779 30.1758 303.375 30.1758C302.648 30.1758 302.101 29.9561 301.731 29.5166C301.362 29.0771 301.178 28.4531 301.178 27.6445V21.7471H299.446V20.4902H301.178V18.1875H302.804Z" fill="black"/>
<mask id="path-9-outside-2" maskUnits="userSpaceOnUse" x="183.688" y="245.549" width="205" height="71" fill="black">
<rect fill="white" x="183.688" y="245.549" width="205" height="71"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M284.473 281.722L386.19 314.951L386.811 313.049L375 309.191V252L375.002 251.999L374.378 250.099L284.472 279.617L186.311 247.549L185.689 249.451L194 252.165L194 309.321L185.688 312.05L186.312 313.95L284.473 281.722ZM373 252.657L287.686 280.667L373 308.538V252.657ZM196 308.664L196 252.819L281.26 280.672L196 308.664Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M284.473 281.722L386.19 314.951L386.811 313.049L375 309.191V252L375.002 251.999L374.378 250.099L284.472 279.617L186.311 247.549L185.689 249.451L194 252.165L194 309.321L185.688 312.05L186.312 313.95L284.473 281.722ZM373 252.657L287.686 280.667L373 308.538V252.657ZM196 308.664L196 252.819L281.26 280.672L196 308.664Z" fill="black"/>
<path d="M386.19 314.951L385.879 315.901L386.83 316.212L387.14 315.261L386.19 314.951ZM284.473 281.722L284.784 280.771L284.473 280.669L284.161 280.772L284.473 281.722ZM386.811 313.049L387.761 313.36L388.072 312.409L387.121 312.099L386.811 313.049ZM375 309.191H374V309.916L374.689 310.142L375 309.191ZM375 252L374.634 251.069L374 251.318V252H375ZM375.002 251.999L375.368 252.93L376.247 252.585L375.952 251.687L375.002 251.999ZM374.378 250.099L375.328 249.787L375.016 248.837L374.066 249.149L374.378 250.099ZM284.472 279.617L284.161 280.568L284.473 280.669L284.784 280.567L284.472 279.617ZM186.311 247.549L186.621 246.599L185.67 246.288L185.36 247.239L186.311 247.549ZM185.689 249.451L184.739 249.14L184.428 250.091L185.379 250.401L185.689 249.451ZM194 252.165L195 252.165L195 251.44L194.311 251.215L194 252.165ZM194 309.321L194.312 310.271L195 310.045L195 309.321L194 309.321ZM185.688 312.05L185.376 311.1L184.426 311.412L184.738 312.362L185.688 312.05ZM186.312 313.95L185.362 314.262L185.674 315.212L186.624 314.9L186.312 313.95ZM373 252.657H374V251.276L372.688 251.706L373 252.657ZM287.686 280.667L287.374 279.717L284.473 280.669L287.375 281.618L287.686 280.667ZM373 308.538L372.689 309.488L374 309.916V308.538H373ZM196 252.819L196.311 251.868L195 251.44L195 252.819L196 252.819ZM196 308.664L195 308.664L195 310.045L196.312 309.614L196 308.664ZM281.26 280.672L281.572 281.622L284.473 280.669L281.57 279.721L281.26 280.672ZM386.5 314L284.784 280.771L284.163 282.672L385.879 315.901L386.5 314ZM385.86 312.739L385.239 314.64L387.14 315.261L387.761 313.36L385.86 312.739ZM374.689 310.142L386.5 314L387.121 312.099L375.311 308.241L374.689 310.142ZM374 252V309.191H376V252H374ZM374.636 251.068L374.634 251.069L375.366 252.931L375.368 252.93L374.636 251.068ZM373.428 250.411L374.052 252.311L375.952 251.687L375.328 249.787L373.428 250.411ZM284.784 280.567L374.69 251.049L374.066 249.149L284.16 278.667L284.784 280.567ZM186 248.5L284.161 280.568L284.782 278.667L186.621 246.599L186 248.5ZM186.64 249.761L187.261 247.86L185.36 247.239L184.739 249.14L186.64 249.761ZM194.311 251.215L186 248.5L185.379 250.401L193.689 253.116L194.311 251.215ZM195 309.321L195 252.165L193 252.165L193 309.321L195 309.321ZM186 313L194.312 310.271L193.688 308.371L185.376 311.1L186 313ZM187.262 313.638L186.638 311.738L184.738 312.362L185.362 314.262L187.262 313.638ZM284.161 280.772L186 313L186.624 314.9L284.785 282.672L284.161 280.772ZM372.688 251.706L287.374 279.717L287.998 281.617L373.312 253.607L372.688 251.706ZM287.375 281.618L372.689 309.488L373.311 307.587L287.996 279.716L287.375 281.618ZM374 308.538V252.657H372V308.538H374ZM195 252.819L195 308.664L197 308.664L197 252.819L195 252.819ZM281.57 279.721L196.311 251.868L195.689 253.769L280.949 281.622L281.57 279.721ZM196.312 309.614L281.572 281.622L280.948 279.722L195.688 307.714L196.312 309.614Z" fill="white" mask="url(#path-9-outside-2)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M119 332.257C119 319.83 129.074 309.757 141.5 309.757H252.902C258.87 309.757 264.593 312.127 268.812 316.347C273.032 320.566 275.402 326.289 275.402 332.257C275.402 344.683 265.329 354.757 252.902 354.757H141.5C129.074 354.757 119 344.683 119 332.257Z" fill="#FCE5CD" stroke="#783F04" stroke-miterlimit="8" stroke-linejoin="round"/>
<path d="M188.122 334.696C187.964 336.05 187.463 337.096 186.619 337.834C185.781 338.566 184.665 338.933 183.271 338.933C181.759 338.933 180.546 338.391 179.632 337.307C178.724 336.223 178.27 334.772 178.27 332.956V331.725C178.27 330.536 178.48 329.49 178.902 328.588C179.33 327.685 179.934 326.994 180.713 326.514C181.492 326.027 182.395 325.784 183.42 325.784C184.779 325.784 185.869 326.165 186.689 326.927C187.51 327.683 187.987 328.731 188.122 330.073H186.426C186.279 329.054 185.96 328.315 185.468 327.858C184.981 327.401 184.299 327.173 183.42 327.173C182.342 327.173 181.495 327.571 180.88 328.368C180.271 329.165 179.966 330.299 179.966 331.769V333.009C179.966 334.397 180.256 335.502 180.836 336.322C181.416 337.142 182.228 337.553 183.271 337.553C184.208 337.553 184.926 337.342 185.424 336.92C185.928 336.492 186.262 335.751 186.426 334.696H188.122ZM191.805 330.398C192.525 329.514 193.463 329.071 194.617 329.071C196.627 329.071 197.641 330.205 197.658 332.473V338.757H196.032V332.464C196.026 331.778 195.868 331.271 195.558 330.943C195.253 330.615 194.775 330.451 194.125 330.451C193.598 330.451 193.135 330.592 192.736 330.873C192.338 331.154 192.027 331.523 191.805 331.98V338.757H190.179V325.257H191.805V330.398ZM201.859 338.757H200.233V329.247H201.859V338.757ZM200.102 326.725C200.102 326.461 200.181 326.238 200.339 326.057C200.503 325.875 200.743 325.784 201.06 325.784C201.376 325.784 201.616 325.875 201.78 326.057C201.944 326.238 202.026 326.461 202.026 326.725C202.026 326.988 201.944 327.208 201.78 327.384C201.616 327.559 201.376 327.647 201.06 327.647C200.743 327.647 200.503 327.559 200.339 327.384C200.181 327.208 200.102 326.988 200.102 326.725ZM206.236 338.757H204.61V325.257H206.236V338.757ZM208.451 333.923C208.451 332.464 208.797 331.292 209.488 330.407C210.18 329.517 211.085 329.071 212.204 329.071C213.317 329.071 214.199 329.452 214.85 330.214V325.257H216.476V338.757H214.981L214.902 337.737C214.252 338.534 213.347 338.933 212.187 338.933C211.085 338.933 210.186 338.481 209.488 337.579C208.797 336.677 208.451 335.499 208.451 334.046V333.923ZM210.077 334.107C210.077 335.185 210.3 336.029 210.745 336.639C211.19 337.248 211.806 337.553 212.591 337.553C213.622 337.553 214.375 337.09 214.85 336.164V331.796C214.363 330.899 213.616 330.451 212.608 330.451C211.812 330.451 211.19 330.759 210.745 331.374C210.3 331.989 210.077 332.9 210.077 334.107Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M297 332.5C297 320.074 307.074 310 319.5 310H430.902C436.87 310 442.593 312.371 446.812 316.59C451.032 320.81 453.402 326.533 453.402 332.5C453.402 344.926 443.329 355 430.902 355H319.5C307.074 355 297 344.926 297 332.5Z" fill="#FCE5CD" stroke="#783F04" stroke-miterlimit="8" stroke-linejoin="round"/>
<path d="M366.122 334.939C365.964 336.293 365.463 337.339 364.619 338.077C363.781 338.81 362.665 339.176 361.271 339.176C359.759 339.176 358.546 338.634 357.632 337.55C356.724 336.466 356.27 335.016 356.27 333.199V331.969C356.27 330.779 356.48 329.733 356.902 328.831C357.33 327.929 357.934 327.237 358.713 326.757C359.492 326.271 360.395 326.027 361.42 326.027C362.779 326.027 363.869 326.408 364.689 327.17C365.51 327.926 365.987 328.975 366.122 330.316H364.426C364.279 329.297 363.96 328.559 363.468 328.102C362.981 327.645 362.299 327.416 361.42 327.416C360.342 327.416 359.495 327.814 358.88 328.611C358.271 329.408 357.966 330.542 357.966 332.013V333.252C357.966 334.641 358.256 335.745 358.836 336.565C359.416 337.386 360.228 337.796 361.271 337.796C362.208 337.796 362.926 337.585 363.424 337.163C363.928 336.735 364.262 335.994 364.426 334.939H366.122ZM369.805 330.642C370.525 329.757 371.463 329.314 372.617 329.314C374.627 329.314 375.641 330.448 375.658 332.716V339H374.032V332.707C374.026 332.021 373.868 331.515 373.558 331.187C373.253 330.858 372.775 330.694 372.125 330.694C371.598 330.694 371.135 330.835 370.736 331.116C370.338 331.397 370.027 331.767 369.805 332.224V339H368.179V325.5H369.805V330.642ZM379.859 339H378.233V329.49H379.859V339ZM378.102 326.968C378.102 326.704 378.181 326.481 378.339 326.3C378.503 326.118 378.743 326.027 379.06 326.027C379.376 326.027 379.616 326.118 379.78 326.3C379.944 326.481 380.026 326.704 380.026 326.968C380.026 327.231 379.944 327.451 379.78 327.627C379.616 327.803 379.376 327.891 379.06 327.891C378.743 327.891 378.503 327.803 378.339 327.627C378.181 327.451 378.102 327.231 378.102 326.968ZM384.236 339H382.61V325.5H384.236V339ZM386.451 334.166C386.451 332.707 386.797 331.535 387.488 330.65C388.18 329.76 389.085 329.314 390.204 329.314C391.317 329.314 392.199 329.695 392.85 330.457V325.5H394.476V339H392.981L392.902 337.98C392.252 338.777 391.347 339.176 390.187 339.176C389.085 339.176 388.186 338.725 387.488 337.822C386.797 336.92 386.451 335.742 386.451 334.289V334.166ZM388.077 334.351C388.077 335.429 388.3 336.272 388.745 336.882C389.19 337.491 389.806 337.796 390.591 337.796C391.622 337.796 392.375 337.333 392.85 336.407V332.039C392.363 331.143 391.616 330.694 390.608 330.694C389.812 330.694 389.19 331.002 388.745 331.617C388.3 332.232 388.077 333.144 388.077 334.351Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M119 229.5C119 217.074 129.074 207 141.5 207H252.902C258.87 207 264.593 209.371 268.812 213.59C273.032 217.81 275.402 223.533 275.402 229.5C275.402 241.926 265.329 252 252.902 252H141.5C129.074 252 119 241.926 119 229.5Z" fill="#FCE5CD" stroke="#783F04" stroke-miterlimit="8" stroke-linejoin="round"/>
<path d="M184.923 230.823H181.917V236H180.221V223.203H184.457C185.898 223.203 187.006 223.531 187.779 224.188C188.559 224.844 188.948 225.799 188.948 227.053C188.948 227.85 188.731 228.544 188.298 229.136C187.87 229.728 187.272 230.17 186.505 230.463L189.511 235.895V236H187.7L184.923 230.823ZM181.917 229.443H184.51C185.348 229.443 186.013 229.227 186.505 228.793C187.003 228.359 187.252 227.779 187.252 227.053C187.252 226.262 187.015 225.655 186.54 225.233C186.071 224.812 185.392 224.598 184.501 224.592H181.917V229.443ZM190.636 231.157C190.636 230.226 190.817 229.388 191.181 228.644C191.55 227.899 192.06 227.325 192.71 226.921C193.366 226.517 194.113 226.314 194.951 226.314C196.246 226.314 197.292 226.763 198.089 227.659C198.892 228.556 199.293 229.748 199.293 231.236V231.351C199.293 232.276 199.114 233.108 198.757 233.847C198.405 234.579 197.898 235.15 197.236 235.561C196.58 235.971 195.824 236.176 194.969 236.176C193.68 236.176 192.634 235.728 191.831 234.831C191.034 233.935 190.636 232.748 190.636 231.271V231.157ZM192.271 231.351C192.271 232.405 192.514 233.252 193 233.891C193.492 234.529 194.148 234.849 194.969 234.849C195.795 234.849 196.451 234.526 196.938 233.882C197.424 233.231 197.667 232.323 197.667 231.157C197.667 230.114 197.418 229.271 196.92 228.626C196.428 227.976 195.771 227.65 194.951 227.65C194.148 227.65 193.501 227.97 193.009 228.608C192.517 229.247 192.271 230.161 192.271 231.351ZM200.901 231.157C200.901 230.226 201.083 229.388 201.446 228.644C201.815 227.899 202.325 227.325 202.976 226.921C203.632 226.517 204.379 226.314 205.217 226.314C206.512 226.314 207.558 226.763 208.354 227.659C209.157 228.556 209.559 229.748 209.559 231.236V231.351C209.559 232.276 209.38 233.108 209.022 233.847C208.671 234.579 208.164 235.15 207.502 235.561C206.846 235.971 206.09 236.176 205.234 236.176C203.945 236.176 202.899 235.728 202.097 234.831C201.3 233.935 200.901 232.748 200.901 231.271V231.157ZM202.536 231.351C202.536 232.405 202.779 233.252 203.266 233.891C203.758 234.529 204.414 234.849 205.234 234.849C206.061 234.849 206.717 234.526 207.203 233.882C207.689 233.231 207.933 232.323 207.933 231.157C207.933 230.114 207.684 229.271 207.186 228.626C206.693 227.976 206.037 227.65 205.217 227.65C204.414 227.65 203.767 227.97 203.274 228.608C202.782 229.247 202.536 230.161 202.536 231.351ZM213.804 224.188V226.49H215.579V227.747H213.804V233.645C213.804 234.025 213.883 234.312 214.041 234.506C214.199 234.693 214.469 234.787 214.85 234.787C215.037 234.787 215.295 234.752 215.623 234.682V236C215.195 236.117 214.779 236.176 214.375 236.176C213.648 236.176 213.101 235.956 212.731 235.517C212.362 235.077 212.178 234.453 212.178 233.645V227.747H210.446V226.49H212.178V224.188H213.804Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M296 229.5C296 217.074 306.074 207 318.5 207H429.902C435.87 207 441.593 209.371 445.812 213.59C450.032 217.81 452.402 223.533 452.402 229.5C452.402 241.926 442.329 252 429.902 252H318.5C306.074 252 296 241.926 296 229.5Z" fill="#FCE5CD" stroke="#783F04" stroke-miterlimit="8" stroke-linejoin="round"/>
<path d="M361.923 230.823H358.917V236H357.221V223.203H361.457C362.898 223.203 364.006 223.531 364.779 224.188C365.559 224.844 365.948 225.799 365.948 227.053C365.948 227.85 365.731 228.544 365.298 229.136C364.87 229.728 364.272 230.17 363.505 230.463L366.511 235.895V236H364.7L361.923 230.823ZM358.917 229.443H361.51C362.348 229.443 363.013 229.227 363.505 228.793C364.003 228.359 364.252 227.779 364.252 227.053C364.252 226.262 364.015 225.655 363.54 225.233C363.071 224.812 362.392 224.598 361.501 224.592H358.917V229.443ZM367.636 231.157C367.636 230.226 367.817 229.388 368.181 228.644C368.55 227.899 369.06 227.325 369.71 226.921C370.366 226.517 371.113 226.314 371.951 226.314C373.246 226.314 374.292 226.763 375.089 227.659C375.892 228.556 376.293 229.748 376.293 231.236V231.351C376.293 232.276 376.114 233.108 375.757 233.847C375.405 234.579 374.898 235.15 374.236 235.561C373.58 235.971 372.824 236.176 371.969 236.176C370.68 236.176 369.634 235.728 368.831 234.831C368.034 233.935 367.636 232.748 367.636 231.271V231.157ZM369.271 231.351C369.271 232.405 369.514 233.252 370 233.891C370.492 234.529 371.148 234.849 371.969 234.849C372.795 234.849 373.451 234.526 373.938 233.882C374.424 233.231 374.667 232.323 374.667 231.157C374.667 230.114 374.418 229.271 373.92 228.626C373.428 227.976 372.771 227.65 371.951 227.65C371.148 227.65 370.501 227.97 370.009 228.608C369.517 229.247 369.271 230.161 369.271 231.351ZM377.901 231.157C377.901 230.226 378.083 229.388 378.446 228.644C378.815 227.899 379.325 227.325 379.976 226.921C380.632 226.517 381.379 226.314 382.217 226.314C383.512 226.314 384.558 226.763 385.354 227.659C386.157 228.556 386.559 229.748 386.559 231.236V231.351C386.559 232.276 386.38 233.108 386.022 233.847C385.671 234.579 385.164 235.15 384.502 235.561C383.846 235.971 383.09 236.176 382.234 236.176C380.945 236.176 379.899 235.728 379.097 234.831C378.3 233.935 377.901 232.748 377.901 231.271V231.157ZM379.536 231.351C379.536 232.405 379.779 233.252 380.266 233.891C380.758 234.529 381.414 234.849 382.234 234.849C383.061 234.849 383.717 234.526 384.203 233.882C384.689 233.231 384.933 232.323 384.933 231.157C384.933 230.114 384.684 229.271 384.186 228.626C383.693 227.976 383.037 227.65 382.217 227.65C381.414 227.65 380.767 227.97 380.274 228.608C379.782 229.247 379.536 230.161 379.536 231.351ZM390.804 224.188V226.49H392.579V227.747H390.804V233.645C390.804 234.025 390.883 234.312 391.041 234.506C391.199 234.693 391.469 234.787 391.85 234.787C392.037 234.787 392.295 234.752 392.623 234.682V236C392.195 236.117 391.779 236.176 391.375 236.176C390.648 236.176 390.101 235.956 389.731 235.517C389.362 235.077 389.178 234.453 389.178 233.645V227.747H387.446V226.49H389.178V224.188H390.804Z" fill="black"/>
<circle cx="39" cy="67" r="38" fill="#D6FCCD" stroke="#297804" stroke-width="2"/>
<circle cx="39" cy="273" r="38" fill="#FCCDCD" stroke="#780404" stroke-width="2"/>
<path d="M25.5711 288.04L23.4111 285.88L36.5311 272.68L23.4111 259.48L25.5711 257.32L38.6911 270.52L51.7311 257.32L53.8911 259.48L40.7711 272.68L53.8911 285.88L51.7311 288.04L38.6911 274.92L25.5711 288.04Z" fill="#780404"/>
<path d="M31.778 82.76C31.778 82.4133 31.7113 82.24 31.578 82.24L30.658 82.68C30.658 82.4933 30.5513 82.36 30.338 82.28L30.018 82.24C29.8046 82.24 29.538 82.3333 29.218 82.52C29.1646 82.3867 29.098 82.2533 29.018 82.12C28.938 81.9867 28.8713 81.8667 28.818 81.76C28.4713 81.0933 28.1246 80.36 27.778 79.56C27.458 78.7333 27.1513 77.9467 26.858 77.2C26.5913 76.4533 26.378 75.8667 26.218 75.44C26.1113 75.0933 25.9913 74.5733 25.858 73.88C25.7246 73.1867 25.5913 72.3067 25.458 71.24C25.7513 71.4267 25.978 71.52 26.138 71.52C26.3246 71.52 26.498 71.24 26.658 70.68C26.738 70.7867 26.8846 70.84 27.098 70.84C27.258 70.84 27.378 70.7867 27.458 70.68L28.098 69.72L28.818 69.96H28.858C28.9113 69.96 28.9646 69.9333 29.018 69.88C29.0713 69.8267 29.1513 69.7733 29.258 69.72C29.4713 69.5867 29.6313 69.52 29.738 69.52L29.858 69.56C30.5246 69.88 30.9513 70.4667 31.138 71.32C31.618 73.3467 32.098 74.36 32.578 74.36C33.058 74.36 33.618 73.8533 34.258 72.84C34.578 72.3333 34.898 71.7467 35.218 71.08C35.5646 70.4133 35.9113 69.6667 36.258 68.84C36.3113 69.16 36.3646 69.32 36.418 69.32C36.5513 69.32 36.778 68.9867 37.098 68.32C37.4446 67.6533 37.9913 66.7333 38.738 65.56C39.1646 64.84 39.698 64.0267 40.338 63.12C41.0046 62.2133 41.7113 61.28 42.458 60.32C43.2046 59.36 43.9246 58.4533 44.618 57.6C45.338 56.7467 45.978 56.0133 46.538 55.4C47.098 54.7867 47.5113 54.3867 47.778 54.2C48.7913 53.5067 49.5913 52.84 50.178 52.2C50.1513 52.3867 50.1113 52.56 50.058 52.72C50.0313 52.8533 50.018 52.9467 50.018 53C50.018 53.1067 50.0713 53.16 50.178 53.16L51.298 52.6V52.76C51.298 52.9733 51.3513 53.08 51.458 53.08C51.538 53.08 51.698 52.96 51.938 52.72C52.178 52.48 52.3113 52.3067 52.338 52.2L52.258 52.76L53.618 51.96L53.298 52.68C53.7246 52.3867 54.0313 52.24 54.218 52.24C54.3246 52.24 54.4046 52.3067 54.458 52.44C54.5113 52.5467 54.538 52.6533 54.538 52.76C54.538 52.92 54.4713 53.1067 54.338 53.32C54.2046 53.5333 54.0313 53.7867 53.818 54.08C53.658 54.2933 53.3913 54.6133 53.018 55.04C52.6713 55.44 52.138 56.04 51.418 56.84C50.698 57.6133 49.738 58.6933 48.538 60.08C48.218 60.4267 47.7246 61.04 47.058 61.92C46.3913 62.7733 45.6313 63.7733 44.778 64.92C43.9513 66.04 43.1246 67.1733 42.298 68.32C41.4713 69.4667 40.738 70.5067 40.098 71.44C39.458 72.3467 39.0046 73.0267 38.738 73.48L36.258 77.68C35.7246 78.5867 35.2846 79.3333 34.938 79.92C34.5913 80.48 34.3246 80.8667 34.138 81.08C33.738 81.56 33.298 81.9867 32.818 82.36L32.458 82.16L32.138 82.36L31.778 82.76Z" fill="#297804"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

14
content/blog/understanding-the-dom/dom_relationships.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

24
content/blog/understanding-the-dom/dom_tree.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

18
content/blog/understanding-the-dom/dom_tree_with_css.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

6
content/blog/understanding-the-dom/index.md
View File

@@ -51,11 +51,9 @@ At the root of any HTML file, you have three things: Tags, attributes, and text
When you type a tag, like `header` or `a`, you're creating an _element node_. These nodes then compose to create _"leaves"_ on the DOM tree. Attributes are then able to manually add information to said nodes. When you have another element node inside of a seperate element node, you add a _"child"_ to said node. This relationship between the nodes allow you to preserve metadata between them, allows CSS to apply, and more.
![A chart showing a parent and child](./dom_tree_parent.svg)
There's also the idea of a _"sibling"_ node. When a node's parent has more than one child, those other nodes are that child node's _"siblings"_.
![A chart showing a parent and child](./dom_tree_sibling.svg)
![A chart showing the relationships between parents and siblings](./dom_relationships.svg)
Altogether, the terminologies used to refer between these node "leaves" are extremely similar to the terminology often used with family trees.
@@ -67,7 +65,7 @@ There are some rules to this tree that's created from these "nodes":
- But may not have many parents
- A non-root node may have many siblings as a result of the parent having many children
!!!!!!! INSERT CHART SHOWING ALLOWED AND DISALLOWED PROPERTIES
![A chart showing the aforementioned rules of the node relationships](./dom_relationship_rules.svg)
### How It's Used By The Browser {#how-the-browser-uses-the-dom}