DOM 操作

DOM 操作

对 HTMLElement 类型的探索

自标准化以来的 20 多年里,JavaScript 取得了长足的进步。虽然在 2020 年,JavaScript 可以用于服务器、数据科学甚至物联网设备,但重要的是要记住它最流行的用例:网络浏览器。

网站由 HTML 和/或 XML 文档组成。这些文件是静态的,它们不会改变。文档对象模型 (DOM) 是由浏览器实现的编程接口,目的是使静态网站发挥作用。DOM API 可用于更改文档结构、样式和内容。该 API 非常强大,以至于围绕它开发了无数前端框架(jQuery、React、Angular 等),以使动态网站更易于开发。

TypeScript 是 JavaScript 的类型化超集,它为 DOM API 提供了类型定义。这些定义在任何默认的 TypeScript 项目中都很容易获得。在 lib.dom.d.ts 的 20,000 多行定义中,有一行脱颖而出:HTMLElement。这种类型是使用 TypeScript 进行 DOM 操作的支柱。

您可以浏览 DOM 类型定义 的源代码

基本示例

给定一个简化的 index.html 文件:

<!DOCTYPE html>
<html lang="en">
  <head><title>TypeScript Dom Manipulation</title></head>
  <body>
    <div id="app"></div>
    
    <script src="index.js"></script>
  </body>
</html>

7WOhfauxnq3XXJsnonnr7T/0UAWm7s2ww5/EBqkbGCMGCCdGExKhY4vryZ9VNVZWCZcw6I8iuaynn/u4Io5IFNtZZcZyLcp8HRpteWcFZdK4RXYp0hE3ahxzrcdEkKZnmcD2i/AIHytYaPVqVOGYdrAsOC2maE0OfHuw5DLYi3yXL17EPkS+HGcRdDkOTfEx

// 1. Select the div element using the id property
const app = document.getElementById("app");

// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");

// 3. Add the text content
p.textContent = "Hello, World!";

// 4. Append the p element to the div element
app?.appendChild(p);

QbU7wh9dYHNJiR6MzhigldZjjPSD/SRF6cylaExQFMlcxSlHcUoNrPb8ta6IAHjF6XiENh/DuT11Phaw5+9aLg==

<div id="app">
  <p>Hello, World!</p>
</div>

Document 接口

I78Ivr+irjfB5CVJhWGybe/TCOusYjx6T1+N/NpsMb/onq6D8XHC5jiu0DwqKUdDPZ0lq6WQqOlK/VU8Kr4Tqx0NqQiztcJ2olvO4E5rSf3qj1PjjkWt+l8YlxKM4pT7x52XMoWisSbIVy3xBnPcFjiu4BNgQOlsj3jBwjOXc3/klFgUVJQmInsa5cTiEtV+MjtuShdorad1ljhwJGEHmNyr7VXWTILRqiqMjkyr+xZvMuQS5FU0fAX0+H8o9oO18Wq39JaomqRnDrPARBdEjP+KtzNBpQs1PAmOjj/7EcoX7PRjAwumtRoejNhKw+Edtxmr9RIH7NxYtnRny8KjysO91BGjCK+ColhMTKROt1Yr8+9+DkB8xALxhV/ij5Na

Document.getElementById

uGA4kpK7+2WBLDahJQwNbAD3NM/5GzIlZaZM1oFty/k=

getElementById(elementId: string): HTMLElement | null;

nySwpL5M4bI1kTBryG+3K19+s+hLJHdSpcNSuVzXg/gtaHyiaqtFi8HBdDJ+BkdKsQnrwk8SaskfSJsnV89Luk2KesIUZKASy3kgoPj9Y8M220pUkJOJqm6DV+MJXg6ctS+j53sHH/ZwQSlNXrlNTg6b++HOq9swin7t4PizKxWQ04ulKK05n2a9jrgBh/HT+ID+hWki1EBugPoSuv38cF4KPR2ee8y6+XMNVa68ZFctxvLNOM9cSs+eLYIDvFzmAZ7hRXenfUgf/fpagTsMX3Y1DOA6ZeG4GFIXacAW6/kIITMr6JW8xK1eGKdfCA53GTZehu6+GiIPxo038xY1dlkAxrR8+1gCryxarG88lT7y3LZ9yMMzrsB4V2C+8560ZXvNObS9K9c+MGfpAkogJD87qghH1gYamMw3CDewWSWiedT7fk36/NyhGp0CZJKHzNPJU9sJwOb7KfxyElDnN0xpLON4OgbGii9Q6zO3VdBOllkuMciXdZTs+vUPdiP88hLIzvQidba7oayyrd/RN8idfaj/OGoktQrNqwRN1GDiN1UBcNVVJYBiMwm96YqBg6wncFsv2/v/6cViq5MHC3R78hh+vrFjatWcMO1zPkiKwTTCH0ac659g7aYaJ6C5shTaKOU4dt2UyKPrEE4LVcaf7roJ6kjfIvJBO//FO8HjG5OdB0LiAvMvXCrgpz2Q7D8RtZlEOg3nZDnEtA4Pcn5jKb5uIgQI5jGQ4sEvX/OaY0nZuKEMOHHR2LCbXJLz

Document.createElement

YaTCrEEN/E6rss0PxD5scKVVV7qHUW3GMXRWbDnIEOQrEr8EHWb7p+onWEvgT8DxrbChgPfhPlIetpJg7ofbMQ==

createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];
createElement(tagName: string, options?: ElementCreationOptions): HTMLElement;

EHt5tU74iY2mYoXTSx8IdhXo4B/y7KQTsg/DqLfz2SJgEaUP84DG0eFJkTtYGr4fQsy1NFryXcdNZjiYUTkMBVojno5z5KG3EnU4rlsqZhJsuO/L7rYZ22/08Xjj75zi6MeWe7RHPfWlrtvRJqXB/zA2rrPTdn0YQP/va1JMt989l55+uMzxjCiLfgDNrqpsLfrzX0wictmSIaA4b/nO6uw5wWyLZ/MIGBsrq93/L/hT0l/141qlxfs6CA8P1MmUyuiZmwZ6wx6qTP8h3g366FRCZiFhO/taPGSp08eX1/rFPt/ehwrfx5rmCDIq7SGllYMH+WFN13kNpWDTp8+RgvC8dw3F8s1DfV5ScOxgrjp7diJMxC6tpv3twodxvUwj

kUYLOeNe9tCF9ArxIKr1vlcRJ3u8dEFXPxrECceIDNDEi85Ge035q9zaipMT+jY2xTbIxyOOee8OwBOy821g2zn879GWAu8DBjn3SJArZWjy3wPDi8pdxXc58JajQfqSxQcPER2TyXqYekUfbhhpMteTTO490Jq6bP+utyuO1x4P6Sy1SCmIpko867VPP/m3gbNyX091zCJleuMg+CP97Q==

bpB3PXeNFP2HC4q3GRWcqlp5R0jged1sAzPL8C7I4AS8m4l9/uwOe7kw+OTqGCy6So3gjsZuZgRRiyBQ0vphVZBIALFCg6kUdP41RpVToTezfp50VD9e8B97zNr8hEx3HG0Nc4XVx0XHs6VDSxeRpYl1VkH6b+gpRUmNtFbEzOk=

jhda4AmRJ0S2YOXbAAl1lYy5KML267WySNZPejYS9GGWL92EvmoygZtb2iU/cttjVF24rtpIf+Ymt5NvwquJftQubd7C7fSgeNGqxdLMzU/A8hQQQYNYSgbfHVDlqRrwz9+CB2tjduQZkHth9xG7slZ9Yyk2IFmayvKZ2YhaSoB9Lo+ngwEIx4INeqf7j8Sju+JwN5JIhpAnv30eEIzNZQyGyO+aWEyw8+uql10ENUAMq7oO8fQ2/bQZLJUxf1MQNq2IVvTg/SUX8oSASUA3BsGLXdGUdUcgpa96jTp2JTqYcunnBLxICOLFns/v8K021T9wRaV+jsTpPAQWY43xG8B7FCLJM3hrd2VDtJyao2FM90GjlYAkt5exjyF9lI2KLsLHb5TEUJPwFR8h9nyTYmpg266LvkcFXgzNbvDyQsdHXBRznBgh0JRfNNWocB5LWDqrNGVXPs/aPPhCmqh9KsxdC1i1GIg55BSZOwKhoj22b4E3s8ZW37OHxxUxXYOPYxfN09bWkL8ZAbes5pvdw9+7oy+blnODK1kgUgyHzZaZgaVpS2gk9DDiMeZK7ojK7+skKGyxMcV14I2wN6V0tg==

interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

+V3rE7JX8QhsxidUw3VKaXl6P3c6x3o4Ann/jktFjI85PNmDT+YOEXWXdcD/+cK0gSHxkFzrC0HrM9mK5keFXopGURDmY+DmiIwDqN4EeG5Use+DHtinQu58wLRoTiW3CTpCxsFLUdQXdLwzmGV9500/ykA0JA0YK96hz+KqZPdbyZkv7zmL/9+K7ATWKRRDIPdrDnsgqUnd6aYnNI6YN6gDsQy3UduieTEvSVIoJHe+ysGlJZYESt5eTEMoxlX14OvsdsloytX548CA2zYXF8mE5I2RGHvlqx/v0YJfkRzFDBoH1qtnfyLq6WtSuE8lV3HAMdfVr78yugUfYGy/qA==

eVth/zRx4F/MoqlbQn926y36N4HyU3kaqVUz8JFgMB33cELf0dk56uhW7sI5c4zt7MxQX0uoxN5Kzrywm8cRpZNeKaAM3ea2KItWe1U8k9hYJJcbaLeQgQYSOXGiwHVIYWtaUQjYQCuOcXh0rzscty7m7DbmqGKf5eBj8Fh2Tp2TPzKBS2SLP9vuw+SiRNPCQOd69Hhcd3zUMcqKzv+fPqDlYzwL8hoOGcRtno9HcSmXneo99bWcgr1tvIs2ZR+mFF0nbEivMtvZzP6uCBG7FRTFFkKuA1om0g2+u7tL0Q56ytYsv5szYSIet34+T7YIyd8ojDvDap2k0f5Y2fFcOLF7bktpzJFrfd1/nKUgCOG747ze3hdDjiugoNrGVyPkguxzyXWveMxOgRheBKl49O3JtCCMRiIZ5FC3I0VlX+OSFjjowQ2/pFPVRn9D8lF9XbVT8bBM4re1Rzbim9Lmq9DWQbh4Pu3KtIKkYf/fOmrqfUADQ9DMjt+4ZiP9dwyxovWw17y5MwjXlLH9u4euMsyyhHtSXr8Riq4tpPF8WvC0r3lol5teoyIJAMs1I9Z7ftIwUl2gUKX6Dhq3uvd/dx/tqKVK2Cq/VULzLK/XqXsSZzd5afmUTjmQah2jTomIqGoV1T1qn9P22lhDcO9tC+nECv8VcAmLVIjkBsoLeW66z8gUcO+xAL0Mm63/bgPFsNmQyarv5n2lS/6yxgCk5fd50/jAYO089u2rGRHR6Qq7DAlA4q2J0XYRshOdYh6QMVE8p3+k0io8o+DZt6JJFlaEIgpxPOPPVKwBIkesFQsRIm7w8JlALAuqb7qeTESVxpS+9FcVu4+BTMQLwPyjuBmxSBAz9v/alwUKcCldHwzt5cAIorQQrLjpxH5ElQC+svGs0b48x2ZMIdKjR76dmm6jv57Qz5fIOD24xqFzKmjWYlqorPgd2hj5Zdm6SDuHwoCnpFSu3hRIgaz+cb5Af97QHH/pto68Vky7z8GnxOszXK2Ip+NRvXvJrRSn0VWemGSArklCD78SN2TKiT8QKZIImI41MJGTb2i+eBp5uramGvm43jw0fQFpSte5yZijRT171a1/TvXQ2NQoXM3s3ZnKzDUKu1H69DlBFB9sh/AcxTXxvvBb+1N1L6M3RvH3XYmI09GZmIAGmdi62+X6C7CFNZASRU24llgHfElWdC/EP6p7YoK4MggOWCX/bLZkZtMCZ0XC0jl/PDbYt+5KRg==

Node 接口

3dnMs5Hkp44bRBHNsBkMzEQYnQso6V/+G8tAzVdfaZvlRxaCg8MDtIM2uBYTqCBUmUi/98Nxm6lywxFyPhQ9RtQ2YBXCDYUcaxRo+ymaTGO2UFj6jdwItc31YapLGzDqtY3h0goeNfS32uFd+8yQnEJZAjO24QpHREre6VgsK9W4Fp5gDckNKX15QKuYUqgOnhVcVrP6wy2Y+ZyOHubkp1zjDDtQnu5fUhj8bv5emqU/vNeFdYeFKSXfQBgu5LKyN9VAFFeigfwmFSIKO8Bo2XnTLzK8C/QciqLPSbYy9k4vwG2rXY+ZtP8h3rPAsBE70xAfNP8+3wRUzx3oA0jniGiRR3GK+51Omn72OJcbgBO9B0/3TpZ2FjxV9HHp0yclzrvyRPr+cFRda9OctoY2B1P7R84a56Ls6ZyU0W0OnVQGDUeiTqMw+5taorc9cMfiF2SHmHd5Z85/FJhp0IDXpwMXRMnm+CqbqgE2NubJA+9ho4XSD10gs2/K7wYBMysNyTpQ/QH1VGgbkAE9pvwUYvGmkYFFlRTFKqO5CzX6WbOqKICxAdpNJSg07IW7jJE+

Node.appendChild

FsAsOI6aRaECPllPjJLR76UMYglNLc1T7GSK2NONTRGxHLOYTWtBGz2exBtF7YAy0o00gFofbAH0fRwSUyque7INrbU7y1TuSQT9tg8VHSgiaFDSC6co+NEOGrHGb/cB160kMWKYBcjtlXek1IR5mUG4kKzr/G/mOiFi+wk4tzVZGzRLWQiSYE5uoj5JqyUsmrdGnp4LJJXUdo8iCV0yUAApkDz3H9xfpmjmBAeDJA73PrIFuNrlLZHZkB4UpVMV50e/pJkl+0PrVNOkiaEmdDIUzA9iSg97+a3bV1sOPveab93IIbegaN1GyMnWcJfctahT+sQokJsdLhJu+8BMeXxysfUAKhQqDX4+y+KmzZNNVgsIYB14+SHVX1IFKHjO

appendChild<T extends Node>(newChild: T): T;

JsCBL9OFo3+jXFD2aI3huCDu5vUiUv0dQU3LDZ3hXWbBICVVOrMLFkP1OcVnAMdkyGu/9QFimJ84ZnUy6bLXAGUvPSUvVG8j6oRSsQa9pduDPlcV+AVM4gsZeyxnv1vYkd7uennGjxx9YOU01zvzjZcPczIVBHNIn9ZPhqvNvux1BVc/l+CxvRSUQ3XQYkxjC0nSWkTDjLDgL1720E3ifmkHIAhB1UZqKjJAcGoQUnFRcdt2QcPhyYLuSWW1AQbPC1nsihLXmqNOl1pHT9QO6dnozvkNep0eCyGfx2FgttiGYYd8KUeOs9rRNgzrE3yt

children 和 childNodes 的区别

LKh9C9ECkeI8SefDXbanI3lefATD4v95aePnfvG8dxJTqIOYGf+ps9Yx/PtWA0sVR1Sc4FK6zQGILs/vswcUGQgwBkAx+6qUvjt4MBFfZ+HrSNSHL46HUVifWQM4bSxmtS51tim2X2kyLAp0TssVfNz4p13CF6k9LnRG+pfUlsHnzrG8CX+g9lqzL/ewV5ybIDFPCo4SurS9esWSqQF7j/+kf19m0wudxnV9priOYKrcMazaRobb+ISvQ6WvKLNy5AflVkWJvdS7uBl54MclVRSq9luVmsEMeyr5m3HqS8oRLTliqtt9IlfEMgZiYKkXtd7JA2z5HGyiqAwNk1Eu0A/uzYxRl5xBxLdJbWX+cqYdrmqaL8nYXx2/zcYndHAc

<div>
  <p>Hello, World</p>
  <p>TypeScript!</p>
</div>;

const div = document.getElementsByTagName("div")[0];

div.children;
// HTMLCollection(2) [p, p]

div.childNodes;
// NodeList(2) [p, p]

NXq7CLfxtFfwa1GyJCJqcKB73Vrmbdt4bzxMIoUxoiR7Q5ye+sVoDxQ4TDkHdlukFvlujFnS0wI0IidfkMl7+7LXHKZyuxtIyv2r32fFz8doVJ/7wPYsDeJj2Qn9d8vWqC0r43UvNYHLApOR6ogE0EW1QlobxsNSNGS5AlyLbCz4I25z+0sZhc9+llI6KYoP/XdLUP6TYXFtNuXRVP5wTsHtHVo9d4z5QXkv4khOmEjGqMLZY38y3HcxBtr64DCgzHbSMeyBoMrA9xtiJJXNZOf+3IlWc6NXlok4BcUY7oB42E5cuFTaZ90be2oCDmOaPEjZSwOIC8V3nYFRAjzmw0A1UbXk6M4aLMNThIZS46/6nx6mz9KoAlQpIuS5TvB9d6NpeKYubyyvFB8A9txSmiV/uIecXYKGrB6tSgNMmIz2RYnUOVvqJXGB3qzmWFjrwy76BmjVex0friUFN+3OB7YPV6N71BqDyUhPf1qO0VQMgZePkMlBH9C9fYTFM5LswPqAl3RLe/MBaY9o/8Zlmfng9xKkLsmA0VzsMp6/g6snlbTN2CtHLojkHB4GvAfkZpXeXWM54o7+wVy2ObSBJg==

/t2ZFG6Bs4XTmLmtnXOM8qiUAIGctlokSzmg3Hk85AplWgBCSB6FmzjNRfWZoPZDz7f3tzKZE0+lfj3x4WOzq99tS4aXahLuUT4BWDVF40c=

<div>
  <p>Hello, World</p>
  TypeScript!
</div>;

const div = document.getElementsByTagName("div")[0];

div.children;
// HTMLCollection(1) [p]

div.childNodes;
// NodeList(2) [p, text]

/Q1lCCB8df5eldxBuo/4lTWoQsenE7vOS7ii9LIMa1fhc3Ty7zjYupQaMWYJ5zgF/pPnv8P0ueuwdSy2TE9W0pwfe0CzancQfUqqzMSWEG0W2z+OuNFqyBL/Y2PjbbAYiTThvobcVNqhD5IJe5E+1TnSTEbAHbRjCxbgDd4Hj5g0Y2SiRZVxneKoFFFClVkFcP/huCXLh3FvfMiou57dIJJfLplkeTUKmB+ABAjH2xuX9vnWg8CMNXW0k8g4A8W/2z3LV0LlsVK3Dt6eg6yzNScUYyh30rJKiUW7Ar8VfcZpHSCtrACUKIxQRMiqawiZ1OtVCdxGaRnRIFFjIR8S/1thR8dbvo5Vl4gHe1PkLtU41WuRgCte/7TcedJyPJ047cTjHIv+7QHCIsPKyTYORd6GGanYOG5SEtfkIDinTy0QXY5yh3+114Z1k11IVxTRCE3rgqLrPnJ4tw+27+OJrrHzjpDtboitI2OCmuyOxgSJCEiYDp09EzzQYO8N+Fu3pwmEdJ+dEyR2u99EE7jRLeRm/0Y9/P8Kc4dC/F086Q+50dR8zy7xU0tgKXTrOkuOCpqh9RxF+gkun3xvXMWWeOug8qvdXBxJ3K81ePRsvp4=

querySelector 和 querySelectorAll 方法

nsECM06QLw2zXWF466W2tUNkkyOS19Y2QTokjN9yiH5Mq9Amb/TNxjKF8xBsz+uvUeUPRF2Ljia7RR4IEtdyZKG+3kN0Mi1MmxFPqrpn26fHtXnFXTJCEooNuc7r+IrMlPExXoSB4NrJiZ3yRqJFnQtlzTCZfXxJRxMeyGfYWF4=

/**
 * Returns the first element that is a descendant of node that matches selectors.
 */
querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
querySelector<E extends Element = Element>(selectors: string): E | null;

/**
 * Returns all element descendants of node that match selectors.
 */
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

4YTG4PaJCJWCGiSyZ8kQMoQ9XvN91AkbexRxWy6JZPTayemschCBG1UgC1a+2jN39G1GvEsaQOnYtU5+WG+R1xzM6i7kV9ZKUXvMdi8tYTE/1LF7UykPlBmHW001oQhR+Z0Iq3wGwsB8WEgF8sf8F0ugtTugAf/xn18u74HtqN5uca0xPuVOQIdxgYnqaRYalnNW61wzUGpeP5qWwvkZEugfi/iMq8BQa90c6dNJNrnYA5X6k2mIs0xrlukSPrGSC/m5oz5mWthmDL1pxPAhoBmb7jlwIayYJ222uPvxKqeJ4byF3mD7jJBGVzSKdFgdtMBVgthClfHv1vabewneI/FHZVitcPQjVUZHVjNsFtoaRwoB9j+3ZmvOrIC7COjikDy5GD2Rsr48cAEp8taPcOayOVm1h19AYVpdzQotK4TWGjg5dfHbEuCJUFSLdTZorn44QgLqyqe7mYBHHxtWEbQIgcMui+uZTU1Cj1JmYeSdzjcdGp0OQSqUO/9d8Z068s5xBS1z+B66zbvRfcVZKieCSUWTFExEv1zpDMhaj2ASL4aGBC5th+NZsd5m5hIg4Uf9goAKUjyOYpb9URxWLqEPli8HSQh9E9yidf09Oq5zGtdA0+8O3mta65W88O2UxSdDGT9dEwIgykzfvJuZsnnp3gBO2ubjtwlapTRPB9A53brr6fM+f6zs94KDbaHqtXy8xP754GpeUM4/r8MW2r49hTTKfXE/zcE84WG07DxPVpfFR32RNhYgzhqJbanSWfDkzX+n2hE8BpNeKvLtDUfEYv8lLAZ3gf5lqi6ezJAG/84k4iPvajDI/sF9hfuv2Gr4C9Nzb0Eh7BQrVnEMzBZzgfN0omi+BYJiiaRYDqJag/8RdCwNLZ+cG2Xp6DhIcCs6e4DwShuMT0xANV0fU0KLixsbqRyRGZJZsucjIPb/KwF/+eOmIkx6EZNZKBwaayi503CooH1RwMEYD0KWZdks+jy+b385U4063/yvDgmZKRSYJ/s5doOYKT+tN4LEQyJ41rMqK89UL6DEWbI8nQ==

PTuiACRAzazRP4+Wrg8186OWR/Ix6GNd64dslnaXf3LEjocxX3f264zbR6hIUqPSQ18NLxIK22H9eYgtaEvCM9y4WD5J3CVjCYqO63mibEY=

<ul>
  <li>First :)</li>
  <li>Second!</li>
  <li>Third times a charm.</li>
</ul>;

const first = document.querySelector("li"); // returns the first li element
const all = document.querySelectorAll("li"); // returns the list of all li elements

有兴趣了解更多吗?

bcIJz32rMxi9RCLeSMFT0JU6C+CoVPIS72krXda9mLWGvYh1vnBgYKY+SGL2p2gjfKGpz5qanm1vXsTwKzKhvk8CNXoFPWL177+1NTTwZOdLXxgLi4pJIP537VDYe+fmAg3V0lkKd7OURJPljzRcIcogKHrQsOqDT/o6b1sLBuZbnbVd7ZZwczudAz7egoHldC8CdVeUjE99ce6X72befyo3CuhMd5ghow4xYnPbOFVDRf5+U8eNNCiWfo/IrmUBb2FmV/UzgkqhiCCAT6IsiT1CI3jTs3C1Dw8l6SWDyLBbBwmZIbGQvUJuBp9IvhPbde3IC5lx3aNMK7zVRPtFgJQG4bvtJ9GruHY0OAhudm8+AScul94ui5nB4B/UIIcPNWtbWnvaXz1iout1jgunMlW7PdcsnmDhwatpGRRXguBPORKz4oKa5zXpCw+GVT9NFUn6djhcCnBDIgMTv5cY3n1CqcCIOTLrLCNQIRY+Syj4MXvY/2y6EilN922v33VJdH+SSaJfgW5x0n0BQ0WdQ7i6KqkdlmYIbbTrj7IvqWxLEFwstYZ2w+w2BghqKJh7A2127AlcDNG98PzusDz8Tm0J9D2XAIqfDj+TyIFNOX3qz2yaDvstaDUmKvasuLmcwFVBBZq4ukvZgvcZ1afwvrs3tffF5ZrpS9Mkojm5m7KZ6PVWwJlu7tU2t4xmrsMi

vvENPagAYVMGW6CzEJw3yw==

    1EE9qpXVMO3LmO6Hw0af5wh/+N93lUqVrURPLatmIVPbJ4tPtXm7KcsUd9FjfJS+W9B0mKyRNxi0I+SFKkOHdGv7LWT3je+HQhGSOOqMNPwsnJWtLYN8lV7FMZmk/BghZTVJUI21vD6HyEqoIE3AolSN2ULrkSekmivnZEkFQ1GUBPjDLwxElIs+oKmFKNwBEJbaYnM3wkDGvVrLcnSalA==