Content

Classified in Computers

Written at June 8, 2023 on English with a size of 9.51 KB.

The document.GetElementById() method returns the DOM node whose id attribute is the same as the method's parameter.
Ex: document.GetElementById("early_languages") returns the p node in the HTML below.
The document.GetElementsByTagName() method returns an array containing all the DOM nodes whose type is the same as the method's parameter.
Ex: document.GetElementsByTagName("li") returns a list of the four li nodes from in the HTML below.
The document.GetElementsByClassName() method returns an array containing all the DOM nodes whose class attribute matches the method's parameter.
Ex: document.GetElementsByClassName("traditional") returns an array containing the ol node with the class attribute matching the word traditional.
The document.QuerySelectorAll() method returns an array containing all the DOM nodes that match the CSS selector passed as the method's parameter.
Ex: document.QuerySelectorAll("li a") returns an array containing the two a nodes in the HTML below.
The document.QuerySelector() method returns the first element found in the DOM that matches the CSS selector passed as the method's parameter. querySelector() expects the same types of parameters as querySelectorAll() but only returns the first element found while navigating the DOM tree in a depth-first traversal.
Ex: document.QuerySelector("li") returns the li node about Fortran

The appendChild() method appends a DOM node to the child nodes of the method's caller. The code below moves the first ordered list's first list item to the last list item of the same ordered list.

ol = document.getElementsByTagName("ol")[0];
Li = ol.getElementsByTagName("li")[0];
Ol.appendChild(li);

The insertBefore() method inserts a DOM node as a child node before an existing child node of the method's caller. The code below moves the first ordered list's fourth list item to the first list item of the same ordered list.

ol = document.getElementsByTagName("ol")[0];
Items = ol.getElementsByTagName("li");
Ol.insertBefore(items[0], items[3]);

The removeChild() method removes a node from the method's caller's children. The most common usage pattern is to get a DOM node, n, and call removeChild() on n's parent passing n as an argument. Ex: n.ParentNode.RemoveChild(n)

The nodeValue property sets or gets the value of text nodes. As the DOM tree represents textual content separately from HTML elements, the textual content of an HTML element is the first child node of the HTML element's node. So, to access the textual content of an HTML element within the DOM, firstChild.NodeValue is used to access the value of the HTML's element's first child.

Ex: document.GetElementById("saleprice").FirstChild.NodeValue = "$25.99":

Gets the DOM node for the element with id "saleprice",
uses .FirstChild to access the textual content node for the element, and then
uses nodeValue to update the content.

The innerHTML property sets or gets a DOM node's content, including all of the node's children, as a string instead of as a tree. Ex: The innerHTML property of an ordered list element can be assigned a string containing multiple list items elements using "<li>first item</li><li>second item</li><li>third item</li>"

Many web developers prefer to modify the DOM using innerHTML because multiple changes to the DOM can be made with one line of code. Additionally, the innerHTML property depends on the internal parser for the web browser, which is better optimized than manually written DOM API methods. For those reasons, good practice is to use innerHTML whenever possible.

The createElement() method creates a DOM node from a string parameter for an HTML element. Ex: document.CreateElement("p") creates a new paragraph DOM node. The createElement method does not add the created DOM node to the DOM tree, so the programmer must use appendChild or insertBefore to add the new node to the existing DOM tree. A common error is to forget to add a newly created node to the DOM tree.
The createTextNode() method creates a DOM node containing the text specified by a string argument. Ex: document.CreateTextNode("new paragraph contents") creates the text "new paragraph contents", which can be added to the paragraph node created above. A text node must be added to the DOM using appendChild or insertBefore.
The cloneNode() method creates a DOM node or tree identical to the tree rooted at the method's caller. The method's boolean argument indicates whether the method should clone the node's children. Ex: x.CloneNode(true) creates an identical tree as that rooted at x, and x.CloneNode(false) creates a single node identical to x. The created tree or node must be added to the DOM using appendChild or insertBefore. A common error is to forget to modify any id attributes in the cloned tree. The cloneNode method does not ensure that new nodes have unique id attributes.

A change event is caused by an element value being modified. Ex: Selecting an item in a radio button group causes a change event.
An input event is caused when the value of an input or textarea element is changed.
A load event is caused when the browser completes loading a resource and dependent resources. Usually load is used with the body element to execute code once all the web page's CSS, JavaScript, images, etc. Have finished loading.
A DOMContentLoaded event is caused when the HTML file has been loaded and parsed, although other related resources such as CSS, JavaScript, and image files may not yet be loaded.
A focus event is caused when an element becomes the current receiver of keyboard input. Ex: Clicking in an input field causes a focus event.
A blur event is caused when an element loses focus and the element will no longer receive future keyboard input.
A submit event is caused when the user submits a form to the web server.
addEventListener() method to register an event handler for a DOM object. Ex: document.GetElementById("myButton").addEventListener("click", clickHandler)

Entradas relacionadas:

Tags:

Content