I am just beginning to learn client-side JavaScript and using an online tutorial, so please bear with me.
This question is based on my understanding of the following:
To access the properties of the document's body, the syntax is "document.body", which returns all the elements in the body.
Similarly when you access the head, you use "document.head". Makes sense and most importantly, it works.
However, when I attempt to access elements WITHIN the body or head following the same logic, I get a return value of "undefined". For example, document.body.h1, returns "undefined", in spite of there being an h1 element inside the body element.
Further, when I enter document.head.title -- "undefined".
Strangely, however, when I enter "document.title", it returns the string value associated with the title tag.
I thought in order to access the title, you would have to access it through the head, since it is an element nested inside the head. But ok, that's fine. Using the same logic, I should then be able to enter document.h1 and get its value. Nope, instead, I get undefined.
Would someone be kind enough to explain to me why this behavior is so inconsistent. Thanks in advance.
I am just beginning to learn client-side JavaScript and using an online tutorial, so please bear with me.
This question is based on my understanding of the following:
To access the properties of the document's body, the syntax is "document.body", which returns all the elements in the body.
Similarly when you access the head, you use "document.head". Makes sense and most importantly, it works.
However, when I attempt to access elements WITHIN the body or head following the same logic, I get a return value of "undefined". For example, document.body.h1, returns "undefined", in spite of there being an h1 element inside the body element.
Further, when I enter document.head.title -- "undefined".
Strangely, however, when I enter "document.title", it returns the string value associated with the title tag.
I thought in order to access the title, you would have to access it through the head, since it is an element nested inside the head. But ok, that's fine. Using the same logic, I should then be able to enter document.h1 and get its value. Nope, instead, I get undefined.
Would someone be kind enough to explain to me why this behavior is so inconsistent. Thanks in advance.
Share Improve this question asked Apr 30, 2018 at 16:32 efwefw 4694 silver badges16 bronze badges 6-
document.h1this won't work neitherdocument.body.h1... imagine that you are trying to get values from adiv, how many divs your DOM can have? How document will know which one it needs to return? to access elements from DOM, such as tags, you need to use selectors, such asdocument.getElementById("IdYouWant")ordocument.querySelector("#idYouWant);or evendocument.getElementsByTagName("h1")– Calvin Nunes Commented Apr 30, 2018 at 16:38 -
its grown historically.
document.titleis a special API. Same is true fordocument.bodyanddocument.head. However from there you can usechildrento do DOM traversal (not that you should do that) – Lux Commented Apr 30, 2018 at 16:39 -
FYI,
document.bodydoes not return all the elements, it returns the<body>element – Asons Commented Apr 30, 2018 at 16:44 - Thanks, lux. Ok, that makes sense to me. These are special cases. – efw Commented Apr 30, 2018 at 16:44
-
If you search for
html document propertiesyou find which one is predefined... developer.mozilla/en-US/docs/Web/API/Document – Asons Commented Apr 30, 2018 at 16:46
2 Answers
Reset to default 7You've really asked two questions:
- Why
document.titlerather thandocument.head.title?
and
- Why doesn't
document.body.h1return an element if there's anh1in thebody?
document.title
document.title is historical. Various parts of the browser environment were developed somewhat ad hoc by multiple different people/organizations in the 1990s. :-) That said, it's the title of the document, so this isn't an unreasonable place to put it, even if you use the title tag in head.
document.body.h1
One answer is: Because no one decided to design it that way. There were some early things like document.all (a list of all elements in the document) and even tag-specific ones (I forget exactly what they were, but they weren't a million miles off your document.body.h1 — I think document.tags.h1 or something, where again it was a list.)
But another answer is: Because the DOM is a tree. body can have multiple h1 elements, both as direct children and as children of children (or deeper); collectively, descendants. Creating automatic lists with all of these proved not to be scalable to large documents.
Instead, you can query the DOM (either the entire document, or just the contents of a specific element) via a variety of methods:
getElementById- (Just ondocument) Get an element using itsidattribute value.querySelector- Find the first element matching a CSS selector (can use it ondocumentor on an element). Returnsnullif there were no matches.querySelectorAll- Get a list of all elements matching a CSS selector (can use it ondocumentor on an element). You can rely on getting back a list; itslengthmay be0, of course.getElementsByTagName- Get a list of all elements with a given tag name (such as"h1").getElementsByClassName- (No support in IE8 and earlier) Get a list of all elements with a given class.
There are many more. See MDN's web documentation and/or the WHAT-WG DOM Standard for more.
Some of the automatic lists persist (they got so much use that they had to be maintained/kept), such as document.forms, document.links, the rows property on HTMLTableElement and HTMLTableSectionElement instances, the cells property on HTMLTableRowElement instances, and various others.
document.head.title is a thing... but not what you might think.
title is an attribute that is applicable to all html elements; that is, it is a global attribute. It's meaning is 'advisory information'; one use is to display a tooltip:
<span title="hover over me and you'll see this">information</span>
So, all elements have a title attribute - including head. The title element - which is pletely different - should be a child of the head though. So you might be tempted to set its value via document.head.title = "my title" , but document.head.title is not the head's title element, it's a property of the head element.
What you're actually doing is setting the title property on the head element:
<head title="my title">.... </head>
... which isn't what you want at all.
The correct way to set the title is document.title, which is a shortcut way of doing
document.querySelector("title").innerText = "my title"
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744894222a4599595.html
评论列表（0条）