path: root/files/zh-tw/learn/javascript/client-side_web_apis/manipulating_documents/index.html

---
title: 文檔操作(文件操作)
slug: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div>

<p class="summary">當你在撰寫網頁(web pages)或網路應用程式(web apps)，其中一個最常見的事，你會希望能夠操作(網頁)文件結構。最常看見的方式是基於<a href="/zh-TW/docs/Web/API/Document_Object_Model"><strong>文件物件模型</strong> ( Document Object Model, DOM )</a> 概念上，透過使用 API (<a href="/zh-TW/docs/Web/API/">Web APIs</a>) 來控制 HTML 及 樣式；而這種方式也被大量使用在操作 <code><a href="/zh-TW/docs/Web/API/Document">Document</a></code> 物件上。接下來的文章中，我們將會詳細的介紹如何操作 DOM，藉著使用有趣的 API 能帶來些新奇的體驗。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">你事先需要了解:</th>
   <td>基礎電腦知識, 了解基礎 HTML、CSS、JavaScript 概念 — 包含 JavaScript 物件概念.</td>
  </tr>
  <tr>
   <th scope="row">你將學會:</th>
   <td>更加熟悉 DOM 核心 API, 和常用來操作 DOM 的 API</td>
  </tr>
 </tbody>
</table>

<h2 id="The_important_parts_of_a_web_browser">The important parts of a web browser</h2>

<p>Web browsers are very complicated pieces of software with a lot of moving parts, many of which can't be controlled or manipulated by a web developer using JavaScript. You might think that such limitations are a bad thing, but browsers are locked down for good reasons, mostly centering around security. Imagine if a web site could get access to your stored passwords or other sensitive information, and log into websites as if it were you?</p>

<p>Despite the limitations, Web APIs still give us access to a lot of functionality that enable us to do a great many things with web pages. There are a few really obvious bits you'll reference regularly in your code — consider the following diagram, which represents the main parts of a browser directly involved in viewing web pages:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14557/document-window-navigator.png" style="display: block; margin: 0 auto;"></p>

<ul>
 <li>The window is the browser tab that a web page is loaded into; this is represented in JavaScript by the {{domxref("Window")}} object. Using methods available on this object you can do things like return the window's size (see {{domxref("Window.innerWidth")}} and {{domxref("Window.innerHeight")}}), manipulate the document loaded into that window, store data specific to that document on the client-side (for example using a local database or other storage mechanism), attach an <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#A_series_of_fortunate_events">event handler</a> to the current window, and more.</li>
 <li>The navigator represents the state and identity of the browser (i.e. the user-agent) as it exists on the web. In JavaScript, this is represented by the {{domxref("Navigator")}} object. You can use this object to retrieve things like the user's preferred language, a media stream from the user's webcam, etc.</li>
 <li>The document (represented by the DOM in browsers) is the actual page loaded into the window, and is represented in JavaScript by the {{domxref("Document")}} object. You can use this object to return and manipulate information on the HTML and CSS that comprises the document, for example get a reference to an element in the DOM, change its text content, apply new styles to it, create new elements and add them to the current element as children, or even delete it altogether.</li>
</ul>

<p>In this article we'll focus mostly on manipulating the document, but we'll show a few other useful bits besides.</p>

<h2 id="The_document_object_model">The document object model</h2>

<p>The document currently loaded in each one of your browser tabs is represented by a document object model. This is a "tree structure" representation created by the browser that enables the HTML structure to be easily accessed by programming languages — for example the browser itself uses it to apply styling and other information to the correct elements as it renders a page, and developers like you can manipulate the DOM with JavaScript after the page has been rendered.</p>

<p>We have created a simple example page at <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html">see it live also</a>). Try opening this up in your browser — it is a very simple page containing a {{htmlelement("section")}} element inside which you can find an image, and a paragraph with a link inside. The HTML source code looks like this:</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Simple DOM example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;section&gt;
        &lt;img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."&gt;
        &lt;p&gt;Here we will add a link to the &lt;a href="https://www.mozilla.org/"&gt;Mozilla homepage&lt;/a&gt;&lt;/p&gt;
      &lt;/section&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>The DOM on the other hand looks like this:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14559/dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>

<div class="note">
<p><strong>Note</strong>: This DOM tree diagram was created using Ian Hickson's <a href="https://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM viewer</a>.</p>
</div>

<p>You can see here that each element and bit of text in the document has its own entry in the tree — each one is called a <strong>node</strong>. You will also encounter various terms used to describe the type of node, and their position in the tree in relation to one another:</p>

<ul>
 <li><strong>Element node</strong>: An element, as it exists in the DOM.</li>
 <li><strong>Root node</strong>: The top node in the tree, which in the case of HTML is always the <code>HTML</code> node (other markup vocabularies like SVG and custom XML will have different root elements).</li>
 <li><strong>Child node</strong>: A node <em>directly</em> inside another node. For example, <code>IMG</code> is a child of <code>SECTION</code> in the above example.</li>
 <li><strong>Descendant node</strong>: A node <em>anywhere</em> inside another node. For example, <code>IMG</code> is a child of <code>SECTION</code> in the above example, and it is also a descendant. <code>IMG</code> is not a child of <code>BODY</code>, as it is two levels below it in the tree, but it is a descendant of <code>BODY</code>.</li>
 <li><strong>Parent node</strong>: A node which has another node inside it. For example, <code>BODY</code> is the parent node of <code>SECTION</code> in the above example.</li>
 <li><strong>Sibling nodes</strong>: Nodes that sit on the same level in the DOM tree. For example, <code>IMG</code> and <code>P</code> are siblings in the above example.</li>
 <li><strong>Text node</strong>: A node containing a text string.</li>
</ul>

<p>It is useful to familiarize yourself with this terminology before working with the DOM, as a number of the code terms you'll come across make use of them. You may have also come across them if you have studied CSS (e.g. descendant selector, child selector).</p>

<h2 id="Active_learning_Basic_DOM_manipulation">Active learning: Basic DOM manipulation</h2>

<p>To start learning about DOM manipulation, let's begin with a practical example.</p>

<ol>
 <li>Take a local copy of the <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html page</a> and the <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dinosaur.png">image</a> that goes along with it.</li>
 <li>Add a <code>&lt;script&gt;&lt;/script&gt;</code> element just above the closing <code>&lt;/body&gt;</code> tag.</li>
 <li>To manipulate an element inside the DOM, you first need to select it and store a reference to it inside a variable. Inside your script element, add the following line:
  <pre class="brush: js">var link = document.querySelector('a');</pre>
 </li>
 <li>Now we have the element reference stored in a variable, we can start to manipulate it using properties and methods available to it (these are defined on interfaces like {{domxref("HTMLAnchorElement")}} in the case of {{htmlelement("a")}} element, its more general parent interface {{domxref("HTMLElement")}}, and {{domxref("Node")}} — which represents all nodes in a DOM). First of all, let's change the text inside the link by updating the value of the {{domxref("Node.textContent")}} property. Add the following line below the previous one:
  <pre class="brush: js">link.textContent = 'Mozilla Developer Network';</pre>
 </li>
 <li>We should also change the URL the link is pointing to, so that it doesn't go to the wrong place when it is clicked on. Add the following line, again at the bottom:
  <pre class="brush: js">link.href = 'https://developer.mozilla.org';</pre>
 </li>
</ol>

<div>
<p>Note that, as with many things in JavaScript, there are many ways to select an element and store a reference to it in a variable. {{domxref("Document.querySelector()")}} is the recommended modern approach, which is convenient because it allows you to select elements using CSS selectors. The above <code>querySelector()</code> call will match the first {{htmlelement("a")}} element that appears in the document. If you wanted to match and do things to multiple elements, you could use {{domxref("Document.querySelectorAll()")}}, which matches every element in the document that matches the selector, and stores references to them in an <a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">array</a>-like object called a NodeList.</p>

<p>There are older methods available for grabbing element references, such as:</p>

<ul>
 <li>{{domxref("Document.getElementById()")}}, which selects an element with a given <code>id</code> attribute value, e.g. <code>&lt;p id="myId"&gt;My paragraph&lt;/p&gt;</code>. The ID is passed to the function as a parameter, i.e. <code>var elementRef = document.getElementById('myId')</code>.</li>
 <li>{{domxref("Document.getElementsByTagName()")}}, which returns an array containing all the elements on the page of a given type, for example <code>&lt;p&gt;</code>s, <code>&lt;a&gt;</code>s, etc. The element type is passed to the function as a parameter, i.e. <code>var elementRefArray = document.getElementsByTagName('p')</code>.</li>
</ul>

<p>These two work in older browsers than the modern methods like <code>querySelector()</code>, but are not as convenient. Have a look and see what others you can find!</p>
</div>

<h3 id="Creating_and_placing_new_nodes">Creating and placing new nodes</h3>

<p>The above has given you a little taste of what you can do, but let's go further and look at how we can create new elements.</p>

<ol>
 <li>Going back to the current example, let's start by grabbing a reference to the our {{htmlelement("section")}} element — add the following code at the bottom of your existing script (do the same with the other lines too):
  <pre class="brush: js">var sect = document.querySelector('section');</pre>
 </li>
 <li>Now let's create a new paragraph using {{domxref("Document.createElement()")}} and give it some text content in the same way as before:
  <pre class="brush: js">var para = document.createElement('p');
para.textContent = 'We hope you enjoyed the ride.';</pre>
 </li>
 <li>You can now append the new paragraph at the end of the section using {{domxref("Node.appendChild()")}}:
  <pre class="brush: js">sect.appendChild(para);</pre>
 </li>
 <li>Finally for this part, let's add a text node to the paragraph the link sits inside, to round off the sentence nicely. First we will create the text node using {{domxref("Document.createTextNode()")}}:
  <pre class="brush: js">var text = document.createTextNode(' — the premier source for web development knowledge.');</pre>
 </li>
 <li>Now we'll grab a reference to the paragraph the link is inside, and append the text node to it:
  <pre class="brush: js">var linkPara = document.querySelector('p');
linkPara.appendChild(text);</pre>
 </li>
</ol>

<p>That's most of what you need for adding nodes to the DOM — you'll make a lot of use of these methods when building dynamic interfaces (we'll look at some examples later).</p>

<h3 id="Moving_and_removing_elements">Moving and removing elements</h3>

<p>There may be times when you want to move nodes, or delete them from the DOM altogether. This is perfectly possible.</p>

<p>If we wanted to move the paragraph with the link inside it to the bottom of the section, we could simply do this:</p>

<pre class="brush: js">sect.appendChild(linkPara);</pre>

<p>This moves the paragraph down to the bottom of the section. You might have thought it would make a second copy of it, but this is not the case — <code>linkPara</code> is a reference to the one and only copy of that paragraph. If you wanted to make a copy and add that as well, you'd need to use {{domxref("Node.cloneNode()")}} instead.</p>

<p>Removing a node is pretty simple as well, at least when you have a reference to the node to be removed and its parent. In our current case, we just use {{domxref("Node.removeChild()")}}, like this:</p>

<pre class="brush: js">sect.removeChild(linkPara);</pre>

<p>It gets slightly more complex when you want to remove a node based only on a reference to itself, which is fairly common. There is no method to tell a node to remove itself, so you'd have to do the following.</p>

<pre class="brush: js">linkPara.parentNode.removeChild(linkPara);</pre>

<p>Have a go at adding the above lines to your code.</p>

<h3 id="Manipulating_styles">Manipulating styles</h3>

<p>It is possible to manipulate CSS styles via JavaScript in a variety of ways.</p>

<p>To start with, you can get a list of all the stylesheets attached to a document using {{domxref("Document.stylesheets")}}, which returns an array of {{domxref("CSSStyleSheet")}} objects. You can then add/remove styles as wished. However, we're not going to expand on those features because they are a somewhat archaic and difficult way to manipulate style. There are much easier ways.</p>

<p>The first way is to add inline styles directly onto elements you want to dynamically style. This is done with the {{domxref("HTMLElement.style")}} property, which contains inline styling information for each element in the document. You can set properties of this object to directly update element styles.</p>

<ol>
 <li>As an example, try adding these lines to our ongoing example:
  <pre class="brush: js">para.style.color = 'white';
para.style.backgroundColor = 'black';
para.style.padding = '10px';
para.style.width = '250px';
para.style.textAlign = 'center';</pre>
 </li>
 <li>Reload the page and you'll see that the styles have been applied to the paragraph. If you look at that paragraph in your browser's <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector/DOM inspector</a>, you'll see that these lines are indeed adding inline styles to the document:
  <pre class="brush: html">&lt;p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;"&gt;We hope you enjoyed the ride.&lt;/p&gt;</pre>
 </li>
</ol>

<div class="note">
<p><strong>Note</strong>: Notice how the JavaScript property versions of the CSS styles are written in lower camel case whereas the CSS versions are hyphenated (e.g. <code>backgroundColor</code> versus <code>background-color</code>). Make sure you don't get these mixed up, otherwise it won't work.</p>
</div>

<p>There is another common way to dynamically manipulate styles on your document, which we'll look at now.</p>

<ol>
 <li>Delete the previous five lines you added to the JavaScript.</li>
 <li>Add the following inside your HTML {{htmlelement("head")}}:
  <pre>&lt;style&gt;
.highlight {
  color: white;
  background-color: black;
  padding: 10px;
  width: 250px;
  text-align: center;
}
&lt;/style&gt;</pre>
 </li>
 <li>Now we'll turn to a very useful method for general HTML manipulation — {{domxref("Element.setAttribute()")}} — this takes two arguments, the attribute you want to set on the element, and the value you want to set it to. In this case we will set a class name of highlight on our paragraph:
  <pre class="brush: js">para.setAttribute('class', 'highlight');</pre>
 </li>
 <li>Refresh your page, and you'll see no change — the CSS is still applied to the paragraph, but this time by giving it a class that is selected by our CSS rule, not as inline CSS styles.</li>
</ol>

<p>Which method you choose is up to you; both have their advantages and disadvantages. The first method takes less setup and is good for simple uses, whereas the second method is more purist (no mixing CSS and JavaScript, no inline styles, which are seen as a bad practice). As you start building larger and more involved apps, you will probably start using the second method more, but it is really up to you.</p>

<p>At this point, we haven't really done anything useful! There is no point using JavaScript to create static content — you might as well just write it into your HTML and not use JavaScript. It is more complex than HTML, and creating your content with JavaScript also has other issues attached to it (such as not being readable by search engines).</p>

<p>In the next couple of sections we will look at a couple of more practical uses of DOM APIs.</p>

<div class="note">
<p><strong>Note</strong>: You can find our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html">finished version of the dom-example.html</a> demo on GitHub (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html">see it live also</a>).</p>
</div>

<h2 id="Active_learning_Getting_useful_information_from_the_Window_object">Active learning: Getting useful information from the Window object</h2>

<p>So far we've only really looked at using {{domxref("Node")}} and {{domxref("Document")}} features to manipulate documents, but there is no reason why you can't get data from other sources and use it in your UI. Think back to our simple <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">maps-example.html</a> demo from the last article — there we retrieved some location data and used it to display a map of your area. You just have to make sure your data is in the right format; JavaScript makes it easier than many other languages, being weakly typed — for example numbers will convert to strings automatically when you want to print them to the screen.</p>

<p>In this example we will solve a common problem — making sure your application is as big as the window it is viewed in, whatever size it is. This is often useful in situations like games, where you want to use as much of the screen area as possible to play the game in.</p>

<p>To start with, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example.html">window-resize-example.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/bgtile.png">bgtile.png</a> demo files. Open it and have a look — you'll see that we've got a {{htmlelement("div")}} element covering a small part of the screen, which has got a background tile applied to it. We'll use that to represent our app UI area.</p>

<ol>
 <li>First of all, let's grab a reference to the div, and then grab the width and height of the viewport (the inner window, where your document is displayed) and store them in variables — these two values are handily contained in the {{domxref("Window.innerWidth")}} and {{domxref("Window.innerHeight")}} properties. Add the following lines inside the existing {{htmlelement("script")}} element:
  <pre class="brush: js">var div = document.querySelector('div');
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;</pre>
 </li>
 <li>Next, we'll dynamically alter the width and height of the div to equal that of the viewport. Add the following two lines below your first ones:
  <pre class="brush: js">div.style.width = WIDTH + 'px';
div.style.height = HEIGHT + 'px';</pre>
 </li>
 <li>Save and try refreshing your browser — you should now see the div become as big as your viewport, whatever size of screen your are using. If you now try resizing your window to make it bigger, you'll see that the div stays the same size — we are only setting it once.</li>
 <li>How about we use an event so that the div resizes as we resize the window? The {{domxref("Window")}} object has an event available on it called resize, which is fired every time the window is resized — let's access that via the {{domxref("Window.onresize")}} event handler and rerun our sizing code each time it changes. Add the following to the bottom of your code:
  <pre class="brush: js">window.onresize = function() {
  WIDTH = window.innerWidth;
  HEIGHT = window.innerHeight;
  div.style.width = WIDTH + 'px';
  div.style.height = HEIGHT + 'px';
}</pre>
 </li>
</ol>

<div class="note">
<p><strong>Note</strong>: If you get stuck, have a look at our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html">finished window resize example</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html">see it live also</a>).</p>
</div>

<h2 id="Active_learning_A_dynamic_shopping_list">Active learning: A dynamic shopping list</h2>

<p>To round off the article, we'd like to set you a little challenge — we want to make a simple shopping list example that allows you to dynamically add items to the list using a form input and button. When you add an item to the input and press the button:</p>

<ul>
 <li>The item should appear in the list.</li>
 <li>Each item should be given a button that can be pressed to delete that item off the list.</li>
 <li>The input should be emptied and focused ready for you to enter another item.</li>
</ul>

<p>The finished demo will look something like this:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14563/shopping-list.png" style="border-style: solid; border-width: 1px; display: block; height: 225px; margin: 0px auto; width: 369px;"></p>

<p>To complete the exercise, follow the steps below, and make sure that the list behaves as described above.</p>

<ol>
 <li>To start with, download a copy of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list.html">shopping-list.html</a> starting file and make a copy of it somewhere. You'll see that it has some minimal CSS, a list with a label, input, and button, and an empty list and {{htmlelement("script")}} element. You'll be making all your additions inside the script.</li>
 <li>Create three variables that hold references to the list ({{htmlelement("ul")}}), {{htmlelement("input")}}, and {{htmlelement("button")}} elements.</li>
 <li>Create a <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">function</a> that will run in response to the button being clicked.</li>
 <li>Inside the function body, start off by storing the current <a href="/en-US/docs/Web/API/HTMLInputElement#Properties">value</a> of the input element in a variable.</li>
 <li>Next, empty the input element by setting its value to an empty string — <code>''</code>.</li>
 <li>Create three new elements — a list item ({{htmlelement('li')}}), {{htmlelement('span')}}, and {{htmlelement('button')}}, and store them in variables.</li>
 <li>Append the span and the button as children of the list item.</li>
 <li>Set the text content of the span to the input element value you saved earlier, and the text content of the button to 'Delete'.</li>
 <li>Append the list item as a child of the list.</li>
 <li>Attach an event handler to the delete button, so that when clicked it will delete the entire list item it is inside.</li>
 <li>Finally, use the <code><a href="/en-US/docs/Web/API/HTMLElement/focus">focus()</a></code> method to focus the input element ready for entering the next shopping list item.</li>
</ol>

<div class="note">
<p><strong>Note</strong>: If you get really stuck, have a look at our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html">finished shopping list</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html">see it running live also</a>.)</p>
</div>

<h2 id="Summary">Summary</h2>

<p>We have reached the end of our study of document and DOM manipulation. At this point you should understand what the important parts of a web browser are with respect to controlling documents and other aspects of the user's web experience. Most importantly, you should understand what the Document Object Model is, and how to manipulate it to create useful functionality.</p>

<h2 id="See_also">See also</h2>

<p>There are lots more features you can use to manipulate your documents. Check out some of our references and see what you can discover:</p>

<ul>
 <li>{{domxref("Document")}}</li>
 <li>{{domxref("Window")}}</li>
 <li>{{domxref("Node")}}</li>
 <li>{{domxref("HTMLElement")}}, {{domxref("HTMLInputElement")}}, {{domxref("HTMLImageElement")}}, etc.</li>
</ul>

<p>(See our <a href="https://developer.mozilla.org/en-US/docs/Web/API">Web API index</a> for the full list of Web APIs documented on MDN!)</p>

<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div>

<div>
<h2 id="In_this_module">In this module</h2>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li>
</ul>
</div>