HTML DOM cookie Property Last Updated : 30 Aug, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Almost every website stores cookies (small text files) on the user's computer for recognition and to keep track of his preferences. DOM cookie property sets or gets all the key/value pairs of cookies associated with the current document.Getting all the Cookies: The document.cookie method returns a string containing semicolon-separated list of all the cookies(key=value pairs) of the current document.Syntax: document.cookieExample: Below is the program to get all of the cookies associated with the current document: HTML <!DOCTYPE html> <html> <head> <title>Cookie</title> <style> h1 { color: green } </style> </head> <body onload="getCookies()"> <h1>GeeksforGeeks!</h1> <h3>Here are the cookies baked by this document:</h3> <!-- Paragraph element to display all cookies --> <p id="cookies"></p> <!-- Fetch cookies and display them in the above paragraph element --> <script> function getCookies() { document.getElementById("cookies").innerHTML = document.cookie; } </script> </body> </html> Output: Setting a Cookie: A new cookie can be written for the current document by providing a string containing key=value pair separated by a colon with other cookies(key=value pairs) or any of the following optional values: expires=date: where the date is in GMT format. By default, the cookie expires when the browser is closed.path=path: specifies the directory to store cookies the on computer. By default, the path is set to the path of the current document location.max-age=secondsdomain=domainname: specifies the domain name of the cookie. If not specified, defaults to the domain name of the current page.secure=boolean: specifies if the cookie has to be sent through https server.Syntax: document.cookie = NewCookieExample: In this example, we are setting a cookie. HTML <!DOCTYPE html> <html> <head> <title>Cookie</title> <style> h1 { color: green } </style> </head> <body> <h1>GeeksforGeeks!</h1> <!-- Name for Cookie --> <input type="text" id="key" placeholder="Name"> <!-- Value for the cookie --> <input type="text" id="val" placeholder="Value"> <br> <!-- button to set cookie --> <button onclick="setCookie()">Set a cookie</button> <br> <!-- Button to get cookie --> <button onclick="getCookie()">Get cookies</button> <!-- Empty Paragraph element to display Cookies --> <p id="cookies"></p> <script> // Set cookies function setCookie() { document.cookie = document.getElementById('key').value + "=" + document.getElementById('val').value; } // Get cookies function getCookie() { document.getElementById("cookies").innerHTML = document.cookie; } </script> </body> </html> Output: Supported Browser: The browsers supported by DOM cookie Property are listed below:Google ChromeEdge FirefoxOperaSafari Comment More infoAdvertise with us A Archana choudhary Follow Improve Article Tags : JavaScript Web technologies HTML-DOM HTML-Property Similar Reads HTML DOM referrer Property The DOM referrer property in HTML is used to return the URI of the page that linked to the current page. If the user navigates to the page directly or through a bookmark, then this value is an empty string. Syntax:document.referrer The below program illustrates the referrer property in HTML: Example 3 min read HTML DOM getNamedItem() Method The DOM getNamedItem() method in HTML is used to return the attribute node from the NamedNodeMap object.Syntax: namednodemap.getNamedItem( nodename )Parameter's Value: This method contains a single parameter nodename which is mandatory. The nodename is returned from the NamedNodeMap object. Return V 2 min read HTML DOM createEvent() Event Method The createEvent() method in HTML creates an event object of the specified type. The created event must be initialized before use. Syntax:document.createEvent(event_type)event_type: It is the required parameter and is used to specify the type of event. There are many types of events which are listed 2 min read HTML DOM getElementsByTagName() Method The getElementsByTagName() method in the HTML DOM allows the selection of elements by their tag name. It returns a collection of elements with the specified tag name within the specified document or element. To extract any info just iterate through all the elements using the length property. Syntax: 3 min read HTML DOM length Property The DOM length property in HTML is used to get the number of items in a NodeList object. A NodeList is a collection of child Nodes. For example, the NodeList of the body will contain all the child nodes in the body i.e. paragraphs, comments, headings, script, etc.Syntax: nodelist.lengthReturn Value: 2 min read HTML DOM value Property The DOM value property in HTML is used to set or return the value of any attribute.Syntax: It returns the attribute value. attribute.valueIt is used to set a value to the property. attribute.value = valueProperty Value: value: It defines the value of the attribute.Return Value: It returns a string v 2 min read HTML DOM normalize() Method The normalize() method in HTML is used to merge the adjacent text nodes with the first text node and flush out the empty nodes. The normalize() method does not require any parameter. Syntax: node.normalize() Example 1: In this example, we will use normalize() method. HTML <!DOCTYPE html> <h 2 min read HTML DOM links Collection The DOM links collection is used to return the collection of all <a> and <area> elements with the "href" attribute in the HTML document. The elements in the collection are sorted as they appear in the sourcecode. Syntax: document.links Properties: It contains a single property length whi 4 min read HTML DOM open() Method The DOM Open() method in HTML is the combination of the following three steps: Opens an output stream to collect the output.Collects output from the document.write() or document.writeln() methods.Runs the document.close to display the output written to the output stream. Syntax: document.open( MIMEt 2 min read HTML DOM designMode Property The DOM designMode property in HTML is used to specify whether the document is editable or not. It can also be used to set the document editable. Syntax:Set: This property is used to set whether the document is editable or not.document.designMode = "on|off";Get: This property is used to return wheth 2 min read Like