What is parent element html

How To Traverse the DOM

The previous tutorial in this series, How to Access Elements in the DOM, covers how to use the built-in methods of the document object to access HTML elements by ID, class, tag name, and query selectors. We know that the DOM is structured as a tree of nodes with the document node at the root and every other node (including elements, comments, and text nodes) as the various branches.

Often, you will want to move through the DOM without specifying each and every element beforehand. Learning how to navigate up and down the DOM tree and move from branch to branch is essential to understanding how to work with JavaScript and HTML.

In this tutorial, we will go over how to traverse the DOM (also known as walking or navigating the DOM) with parent, child, and sibling properties.

Setup

To begin, we will create a new file called nodes.html comprised of the following code.

DOCTYPE html> html> head> title>Learning About Nodestitle> style> *  border: 2px solid #dedede; padding: 15px; margin: 15px; > html  margin: 0; padding: 0; > body  max-width: 600px; font-family: sans-serif; color: #333; > style> head> body> h1>Shark Worldh1> p>The world's leading source on strong>sharkstrong> related information.p> h2>Types of Sharksh2> ul> li>Hammerheadli> li>Tigerli> li>Great Whiteli> ul> body> script> const h1 = document.getElementsByTagName('h1')[0]; const p = document.getElementsByTagName('p')[0]; const ul = document.getElementsByTagName('ul')[0]; script> html> 

When we load the file in a web browser, we’ll see rendering that looks like the following screenshot.

In this example website, we have an HTML document with a few elements. Some basic CSS has been added in a style tag to make each element obviously visible, and a few variables have been created in the script for ease of access of a few elements. Since there is only one of each h1 , p , and ul , we can access the first index on each respective getElementsByTagName property.

Root Nodes

The document object is the root of every node in the DOM. This object is actually a property of the window object, which is the global, top-level object representing a tab in the browser. The window object has access to such information as the toolbar, height and width of the window, prompts, and alerts. The document consists of what is inside of the inner window .

Below is a chart consisting of the root elements that every document will contain. Even if a blank HTML file is loaded into a browser, these three nodes will be added and parsed into the DOM.

Property	Node	Node Type
document	#document	DOCUMENT_NODE
document.documentElement	html	ELEMENT_NODE
document.head	head	ELEMENT_NODE
document.body	body	ELEMENT_NODE

Since the html , head , and body elements are so common, they have their own properties on the document .

Open the Console in DevTools and test each of these four properties by submitting them and viewing the output. You can also test h1 , p , and ul which will return the elements due to the variables we added in the script tag.

Parent Nodes

The nodes in the DOM are referred to as parents, children, and siblings, depending on their relation to other nodes. The parent of any node is the node that is one level above it, or closer to the document in the DOM hierarchy. There are two properties to get the parent — parentNode and parentElement .

• html is the parent of head , body , and script .
• body is the parent of h1 , h2 , p and ul , but not li , since li is two levels down from body .

We can test what the parent of our p element is with the parentNode property. This p variable comes from our custom document.getElementsByTagName(‘p’)[0] declaration.

The parent of p is body , but how can we get the grandparent, which is two levels above? We can do so by chaining properties together.

Using parentNode twice, we retrieved the grandparent of p .

There are properties to retrieve the parent of a node, but only one small difference between them, as demonstrated in this snippet below.

The parent of almost any node is an element node, as text and comments cannot be parents to other nodes. However, the parent of html is a document node, so parentElement returns null . Generally, parentNode is more commonly used when traversing the DOM.

Children Nodes

The children of a node are the nodes that are one level below it. Any nodes beyond one level of nesting are usually referred to as descendants.

Property	Gets
childNodes	Child Nodes
firstChild	First Child Node
lastChild	Last Child Node
children	Element Child Nodes
firstElementChild	First Child Element Node
lastElementChild	Last Child Element Node

The childNodes property will return a live list of every child of a node. You might expect the ul element to get three li elements. Let’s test what it retrieves.

Output
► (7) [text, li, text, li, text, li, text] 

In addition to the three li elements, it also gets four text nodes. This is because we wrote our own HTML (it was not generated by JavaScript) and the indentation between elements is counted in the DOM as text nodes. This is not intuitive, as the Elements tab of DevTools strips out white space nodes.

If we attempted to change the background color of the first child node using the firstChild property, it would fail because the first node is text.

The children , firstElementChild and lastElementChild properties exist in these types of situations to retrieve only the element nodes. ul.children will only return the three li elements.

Using firstElementChild , we can change the background color of the first li in the ul .

When you run the code above, your webpage will be updated to modify the background color.

When doing basic DOM manipulation such as in this example, the element-specific properties are extremely helpful. In JavaScript-generated web apps, the properties that select all nodes are more likely to be used, as white-space newlines and indentation will not exist in this case.

A for. of loop can be used to iterate through all children elements.

Now, each child element will have a yellow background.

Since our p element has both text and elements inside of it, the childNodes property is helpful for accessing that information.

Output
"The world's leading source on " ​shark​​ " related information." 

childNodes and children do not return arrays with all the Array properties and methods, but they appear and behave similarly to JavaScript arrays. You can access nodes by index number, or find their length property.

The above code will find the last element child ( li ) of the fourth child element ( ul ) of body and apply a style.

Using parent and child properties, you can retrieve any node in the DOM.

Sibling Nodes

The siblings of a node are any node on the same tree level in the DOM. Siblings do not have to be the same type of node — text, element, and comment nodes can all be siblings.

Property	Gets
previousSibling	Previous Sibling Node
nextSibling	Next Sibling Node
previousElementSibling	Previous Sibling Element Node
nextElementSibling	Next Sibling Element Node

Sibling properties work the same way as the children nodes, in that there is a set of properties to traverse all nodes, and a set of properties for only element nodes. previousSibling and nextSibling will get the next node that immediately precedes or follows the specified node, and previousElementSibling and nextElementSibling will only get element nodes.

In our nodes.html example, let’s select the middle element of ul .

Since we created our DOM from scratch and not as a JavaScript web app, we will need to use the element sibling properties to access the previous and next element nodes, as there is white space in the DOM.

Running this code should have applied coral to the background of Hammerhead and aquamarine to the background of Great White .

Sibling properties can be chained together, just like parent and node properties.

Conclusion

In this tutorial, we covered how to access the root nodes of every HTML document and how to walk the DOM tree through parent, child, and sibling properties.

With what you learned in How to Access Elements in the DOM and this tutorial, you should be able to confidently access any node in the DOM of any website.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Tutorial Series: Understanding the DOM — Document Object Model

The Document Object Model, usually referred to as the DOM, is an essential part of making websites interactive. It is an interface that allows a programming language to manipulate the content, structure, and style of a website. JavaScript is the client-side scripting language that connects to the DOM in an internet browser.

Источник

HTML DOM parentElement Property

Click on an element () to hide its parent element ():

Description

The parentElement property returns the parent element of the specified element.

The difference between parentElement and parentNode, is that parentElement returns null if the parent node is not an element node:

document.body.parentNode; // Returns the element
document.body.parentElement; // Returns the element

document.documentElement.parentNode; // Returns the Document node
document.documentElement.parentElement; // Returns null ( does not have a parent ELEMENT node)

In most cases, it does not matter which property you use, however, parentNode is probably the most popular.

This property is read-only.

HTML Nodes vs Elements

In the HTML DOM (Document Object Model), an HTML document is a collection of nodes with (or without) child nodes.

Nodes are element nodes, text nodes, and comment nodes.

Whitespace between elements are also text nodes.

Elements are only element nodes.

childNodes vs children

childNodes returns child nodes (element nodes, text nodes, and comment nodes).

children returns child elements (not text and comment nodes).

Siblings vs Element Siblings

Siblings are «brothers» and «sisters».

Siblings are nodes with the same parent (in the same childNodes list).

Element Siblings are elements with the same parent (in the same children list).

Syntax

Technical Details

Return Value:	An Element object, representing the parent element node of a node, or null if the node has no parent

Browser Support

element.parentElement is a DOM Level 3 (2004) feature.

It is fully supported in all modern browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	11

Источник