Question: I have this simple html document:

```
    <header>
      <div><p>Fail</p></div>
      <p>Success!</p>
    </header>

```

How can I select the second paragraph using just the tag name.
I don't want to use something like this:

```
let successParagraph = document
   .getElementsByTagName("header")[0]
   .getElementsByTagName("p")[1];

```

because if I will insert another div that contains a paragraph I will have to change the children's number.

If I use something like this it doesn't work:

```
let successParagraph = document.getElementsByTagName("header > p");

```

Answer: 
You cannot using [`getElementsByTagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName)

1. by passing anything other than a tag name as a parameter
2. to get a single element.(It always returns a collection or null)

> 
> **Syntax**: getElementsByTagName(tagName)
> 
> 
> **Parameters**  
> 
> tagName is the qualified name to look for. The special string "\*" represents all elements. For compatibility with XHTML, lower-case should be used.
> 
> 
> **Return value**  
> 
> A live HTMLCollection of elements with a matching tag name, in the order they
> appear. If no elements are found, the HTMLCollection is empty.
> 
> 
> 

As you can see from the documentation, the function expects *a qualified name to look for*, not something like `header > p`

Also the return type is `HtmlCollection | null`. It cannot select an element anyway.

---

The best option available is to use [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)

```js
const elm = document.querySelector('header > p');
console.log(elm);
```

```html
<header>
  <div><p>Fail</p></div>
  <p>Success!</p>
</header>
```
you can use `querySelectorAll`

```
const paragraphs = document.querySelectorAll("p");

```

`paragraphs[1]` would be the second one.