0

Im trying to learn some key concepts of DOM traversal using vanilla javascript and just generally trying to get my head around some basic concepts ive mostly skipped... There are a few concepts I am not quite understanding.

if we take a simple HTML page:

<html>
<head>
<title>hello</title>
</head>
</html>

to my way of thinking I should be able to retrieve the string "hello" using the following:

window.document.head.title.innerHTML;

However this just returns an empty string. Can anyone explain why?

Ash
  • 424
  • 6
  • 26
  • 1
    empty string or `undefined` ? why do you expect retrieve the title content with this line of code ? – Hacketo Mar 22 '16 at 12:37
  • 2
    Possible duplicate of [How to get the title of HTML page with JavaScript?](http://stackoverflow.com/questions/1057059/how-to-get-the-title-of-html-page-with-javascript) – Craicerjack Mar 22 '16 at 12:37
  • If you do something like `document.body.div.innerHTML` you can see why this whole thing breaks down when there's more than one div. This indicates that you should use a querySelector to get what you need. – apokryfos Mar 22 '16 at 12:40
  • 1
    Neither [`document.title`](https://developer.mozilla.org/en-US/docs/Web/API/Document/title) nor [`document.head.title`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/title) are references to the `` element. They're strings, which have no `.innerHTML` property. – Bergi Mar 22 '16 at 12:40
  • @Hacketo honestly i may be completely misunderstanding the concept but to me i am defining the node with "window.document.head.title" and then accessing the property "innerHTML" which should be the actual content of the node? If you could let me know where im going wrong would be appreciated – Ash Mar 22 '16 at 12:42
  • @Bergi I dont follow you.. would i not be referencing the specific title element by using head.title? (title element is property of head?) – Ash Mar 22 '16 at 12:44
  • 1
    @Ash: No, the title element is not a property of the head element. That's where your confusion about the DOM starts. `document.head` and `document.body` are special cases (because they are so common, and there must be only exactly one of them). You'd need to use `document.getElementsByTagName("head")[0]` or `document.head.children[0]` or something like that to access the title element in the dom tree. – Bergi Mar 22 '16 at 12:46
  • @Bergi ah i understand, perfect thank you. Do you want to put this as an answer so I can choose it? – Ash Mar 22 '16 at 12:54

3 Answers3

4

There are several ways of accessing a page's title, some of which you can find below:

// search for the node
document.querySelectorAll('title')[0].innerHTML
// with html5
document.querySelector('title').innerHTML
// get by tag name
document.getElementsByTagName('title')[0].innerHTML
// or simply use this
document.title

You can't simply write the name of a specific tag and expect to get the result you want. Just because there happens to be only one <title> tag on the entire page doesn't mean that this is a feasible way of accessing any node. There are some special cases such as document.head, document.body, and document.title that always refer to certain elements. They don't necessarily follow the DOM structure in the way you expect them to do.

AryKay
  • 308
  • 1
  • 8
  • 2
    What's this `apply` stuff doing there? Also, OP is asking for why his approach returns an empty string. – Bergi Mar 22 '16 at 12:43
  • @Bergi, sorry, my bad. I removed the apply stuff since that's not what OP is after. However, they could come in handy when wanting to change the title on the go. – AryKay Mar 22 '16 at 12:49
1
document.querySelector('title').innerHTML

This is the correct way to get the text of the title

Georgi-it
  • 3,676
  • 1
  • 20
  • 23
0

That is because it is just document.title

edit: explanation. That is because, .title returns the title of an element, you are trying to return the .title attribute of the head element, which you never gave it one so it is an empty string

<head title="head title"></head>

so document.head.title will return head title

Train
  • 3,420
  • 2
  • 29
  • 59