# Node: firstChild property



The read-only **`firstChild`** property of the [Node](https://developer.mozilla.org/en-US/docs/Web/API/Node) interface
returns the node's first child in the tree,
or `null` if the node has no children.

If the node is a [Document](https://developer.mozilla.org/en-US/docs/Web/API/Document),
this property returns the first node in the list of its direct children.

> **NOTE:**
> This property returns any type of node that is the first child of this one.
> It may be a [Text](https://developer.mozilla.org/en-US/docs/Web/API/Text) or a [Comment](https://developer.mozilla.org/en-US/docs/Web/API/Comment) node.
> If you want to get the first [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that is a child of another element,
> consider using [Element.firstElementChild](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild).

## Value

A [Node](https://developer.mozilla.org/en-US/docs/Web/API/Node), or `null` if there are none.

## Example

This example demonstrates the use of `firstChild` and how whitespace nodes
might interfere with using this property.

```html
<p id="para-01">
  <span>First span</span>
</p>
```

```js
const p01 = document.getElementById("para-01");
console.log(p01.firstChild.nodeName);
```

In the above, the console will show '#text'
because a text node is inserted to maintain the whitespace between the end of the
opening `<p>` and `<span>` tags. **Any**
[whitespace](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Text/Whitespace#working_with_whitespace_in_the_dom)
will create a `#text` node, from a single space to multiple spaces, returns,
tabs, and so on.

Another `#text` node is inserted between the closing
`</span>` and `</p>` tags.

If this whitespace is removed from the source, the #text nodes are not inserted and the
span element becomes the paragraph's first child.

```html
<p id="para-01"><span>First span</span></p>
```

```js
const p01 = document.getElementById("para-01");
console.log(p01.firstChild.nodeName);
```

Now the console will show 'SPAN'.

To avoid the issue with `node.firstChild` returning `#text` or
`#comment` nodes, [Element.firstElementChild](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild) can be used to
return only the first element node.

## Specifications

## Browser compatibility

## See also

- [Element.firstElementChild](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild)
- [Node.lastChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)