Why do elements created under a `new Document` contain the wrong prototype? Announcing the...
Bright yellow or light yellow?
Why I cannot instantiate a class whose constructor is private in a friend class?
false 'Security alert' from Google - every login generates mails from 'no-reply@accounts.google.com'
Is a self contained air-bullet cartridge feasible?
Coin Game with infinite paradox
In search of the origins of term censor, I hit a dead end stuck with the greek term, to censor, λογοκρίνω
How long can a nation maintain a technological edge over the rest of the world?
My admission is revoked after accepting the admission offer
Israeli soda type drink
Was Objective-C really a hindrance to Apple software development?
What is a 'Key' in computer science?
/bin/ls sorts differently than just ls
Why isn't everyone flabbergasted about Bran's "gift"?
What do you call an IPA symbol that lacks a name (e.g. ɲ)?
How did Elite on the NES work?
What to do with someone that cheated their way though university and a PhD program?
Did war bonds have better investment alternatives during WWII?
Can gravitational waves pass through a black hole?
What happened to Viserion in Season 7?
Will I lose my paid in full property
How to begin with a paragraph in latex
What is the purpose of the side handle on a hand ("eggbeater") drill?
Was there ever a LEGO store in Miami International Airport?
SQL Server placement of master database files vs resource database files
Why do elements created under a `new Document` contain the wrong prototype?
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30 pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!When to use document.implementation.createHTMLDocument?Why don't self-closing script elements work?Event binding on dynamically created elements?What is the most efficient way to create HTML elements using jQuery?Creating a new DOM element from an HTML string using built-in DOM methods or PrototypeCreating a div element in jQueryWhat is JSONP, and why was it created?How to create an array containing 1…NTest if an element contains a class?Unable to understand useCapture parameter in addEventListenerHow can I add new array elements at the beginning of an array in Javascript?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
When creating a div it is an instance of HTMLDivElement:
var d = document.createElement('div');
d instanceof HTMLDivElement; // true
d instanceof Element; // true
This also holds true when obtaining an external document and window:
var frame = document.createElement('iframe');
document.body.appendChild(frame);
var doc2 = frame.contentWindow.document;
var d2 = doc2.createElement('div');
d2 instanceof frame.contentWindow.HTMLDivElement; // true
d2 instanceof Element; // false, different realm/dom
I've tried creating a document with the Document constructor to process an external HTML document:
var doc = new Document();
var d = doc.createElement('div');
d instanceof Element; // true
So, it creates Elements and the elements are in the same realm as the one we're in. However to my surprise it does not type its elements:
d instanceof HTMLDivElement; // false
d.constructor.name; // "Element"
Why is that and why does the current document create typed elements while a new document creates only Element?
javascript html dom
|
show 2 more comments
When creating a div it is an instance of HTMLDivElement:
var d = document.createElement('div');
d instanceof HTMLDivElement; // true
d instanceof Element; // true
This also holds true when obtaining an external document and window:
var frame = document.createElement('iframe');
document.body.appendChild(frame);
var doc2 = frame.contentWindow.document;
var d2 = doc2.createElement('div');
d2 instanceof frame.contentWindow.HTMLDivElement; // true
d2 instanceof Element; // false, different realm/dom
I've tried creating a document with the Document constructor to process an external HTML document:
var doc = new Document();
var d = doc.createElement('div');
d instanceof Element; // true
So, it creates Elements and the elements are in the same realm as the one we're in. However to my surprise it does not type its elements:
d instanceof HTMLDivElement; // false
d.constructor.name; // "Element"
Why is that and why does the current document create typed elements while a new document creates only Element?
javascript html dom
6
I suspect it's related tonew Documentbeing a document and not an HTMLDocument?
– Benjamin Gruenbaum
10 hours ago
Welldocument.constructor.namecertainly isHTMLDocument
– Pointy
10 hours ago
2
developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/…
– vzwick
10 hours ago
@vzwick thanks, TIL! I never heard aboutdocument.implementation. This solves things more nicely than my workaround (of creating a frame and running it in another realm). Still - I'm not sure whynew DocumentcreatesElementsthat are notHTMLDivElements.
– Benjamin Gruenbaum
10 hours ago
2
@Pointywindow.document.constructor.name; // => "HTMLDocument"vs.new Document().constructor.name; // => "Document"vs.document.implementation.createHTMLDocument().constructor.name; // => "HTMLDocument"
– vzwick
10 hours ago
|
show 2 more comments
When creating a div it is an instance of HTMLDivElement:
var d = document.createElement('div');
d instanceof HTMLDivElement; // true
d instanceof Element; // true
This also holds true when obtaining an external document and window:
var frame = document.createElement('iframe');
document.body.appendChild(frame);
var doc2 = frame.contentWindow.document;
var d2 = doc2.createElement('div');
d2 instanceof frame.contentWindow.HTMLDivElement; // true
d2 instanceof Element; // false, different realm/dom
I've tried creating a document with the Document constructor to process an external HTML document:
var doc = new Document();
var d = doc.createElement('div');
d instanceof Element; // true
So, it creates Elements and the elements are in the same realm as the one we're in. However to my surprise it does not type its elements:
d instanceof HTMLDivElement; // false
d.constructor.name; // "Element"
Why is that and why does the current document create typed elements while a new document creates only Element?
javascript html dom
When creating a div it is an instance of HTMLDivElement:
var d = document.createElement('div');
d instanceof HTMLDivElement; // true
d instanceof Element; // true
This also holds true when obtaining an external document and window:
var frame = document.createElement('iframe');
document.body.appendChild(frame);
var doc2 = frame.contentWindow.document;
var d2 = doc2.createElement('div');
d2 instanceof frame.contentWindow.HTMLDivElement; // true
d2 instanceof Element; // false, different realm/dom
I've tried creating a document with the Document constructor to process an external HTML document:
var doc = new Document();
var d = doc.createElement('div');
d instanceof Element; // true
So, it creates Elements and the elements are in the same realm as the one we're in. However to my surprise it does not type its elements:
d instanceof HTMLDivElement; // false
d.constructor.name; // "Element"
Why is that and why does the current document create typed elements while a new document creates only Element?
javascript html dom
javascript html dom
edited 10 hours ago
Daniel A. White
151k38298378
151k38298378
asked 10 hours ago
Benjamin GruenbaumBenjamin Gruenbaum
193k65409443
193k65409443
6
I suspect it's related tonew Documentbeing a document and not an HTMLDocument?
– Benjamin Gruenbaum
10 hours ago
Welldocument.constructor.namecertainly isHTMLDocument
– Pointy
10 hours ago
2
developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/…
– vzwick
10 hours ago
@vzwick thanks, TIL! I never heard aboutdocument.implementation. This solves things more nicely than my workaround (of creating a frame and running it in another realm). Still - I'm not sure whynew DocumentcreatesElementsthat are notHTMLDivElements.
– Benjamin Gruenbaum
10 hours ago
2
@Pointywindow.document.constructor.name; // => "HTMLDocument"vs.new Document().constructor.name; // => "Document"vs.document.implementation.createHTMLDocument().constructor.name; // => "HTMLDocument"
– vzwick
10 hours ago
|
show 2 more comments
6
I suspect it's related tonew Documentbeing a document and not an HTMLDocument?
– Benjamin Gruenbaum
10 hours ago
Welldocument.constructor.namecertainly isHTMLDocument
– Pointy
10 hours ago
2
developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/…
– vzwick
10 hours ago
@vzwick thanks, TIL! I never heard aboutdocument.implementation. This solves things more nicely than my workaround (of creating a frame and running it in another realm). Still - I'm not sure whynew DocumentcreatesElementsthat are notHTMLDivElements.
– Benjamin Gruenbaum
10 hours ago
2
@Pointywindow.document.constructor.name; // => "HTMLDocument"vs.new Document().constructor.name; // => "Document"vs.document.implementation.createHTMLDocument().constructor.name; // => "HTMLDocument"
– vzwick
10 hours ago
6
6
I suspect it's related to
new Document being a document and not an HTMLDocument?– Benjamin Gruenbaum
10 hours ago
I suspect it's related to
new Document being a document and not an HTMLDocument?– Benjamin Gruenbaum
10 hours ago
Well
document.constructor.name certainly is HTMLDocument– Pointy
10 hours ago
Well
document.constructor.name certainly is HTMLDocument– Pointy
10 hours ago
2
2
developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/…
– vzwick
10 hours ago
developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/…
– vzwick
10 hours ago
@vzwick thanks, TIL! I never heard about
document.implementation. This solves things more nicely than my workaround (of creating a frame and running it in another realm). Still - I'm not sure why new Document creates Elements that are not HTMLDivElements.– Benjamin Gruenbaum
10 hours ago
@vzwick thanks, TIL! I never heard about
document.implementation. This solves things more nicely than my workaround (of creating a frame and running it in another realm). Still - I'm not sure why new Document creates Elements that are not HTMLDivElements.– Benjamin Gruenbaum
10 hours ago
2
2
@Pointy
window.document.constructor.name; // => "HTMLDocument" vs. new Document().constructor.name; // => "Document" vs. document.implementation.createHTMLDocument().constructor.name; // => "HTMLDocument"– vzwick
10 hours ago
@Pointy
window.document.constructor.name; // => "HTMLDocument" vs. new Document().constructor.name; // => "Document" vs. document.implementation.createHTMLDocument().constructor.name; // => "HTMLDocument"– vzwick
10 hours ago
|
show 2 more comments
2 Answers
2
active
oldest
votes
The Document constructor is not specific to HTML (as there are XML documents), you need to construct an HTMLDocument, but its constructor is uncallable.
As the comments mention, the correct way to create a document is via the DOMImplementation#createHTMLDocument method.
var doc = document.implementation.createHTMLDocument();
var d = doc.createElement('div');
d instanceof Element; // true;
d instanceof HTMLDivElement; // true
d.constructor.name; // "HTMLDivElement"
From what I can gather, there has been a separation at some point from a general-purpose document (which was shared for HTML and XML) into two distinct constructors. At the same opportunity, they made the new constructors uncallable, and added the .createDocument() (for XML) and .createHTMLDocument() (for HTML) methods.
Sure it's standard - it just doesn't do the thing I expect it to :D The spec says it's both standard and a constructor.
– Benjamin Gruenbaum
10 hours ago
1
This is the best answer I have ever seen.
– Linkgoron
10 hours ago
add a comment |
Because you have an instance of Document and not HTMLDocument, it'll create an Element, not an HTMLElement. Document and Element are basic interfaces to shared by all document types. EG an HTMLDocument will create an HTMLElement.
From MDN,
The Document interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. HTML, XML, SVG, …), a larger API is available: HTML documents, served with the "text/html" content type, also implement the HTMLDocument interface, whereas XML and SVG documents implement the XMLDocument interface.
Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. For example, the HTMLElement interface is the base interface for HTML elements, while the SVGElement interface is the basis for all SVG elements. Most functionality is specified further down the class hierarchy.
You probably want to use DOMImplementation.createHTMLDocument() to create a HTML Document.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55812500%2fwhy-do-elements-created-under-a-new-document-contain-the-wrong-prototype%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The Document constructor is not specific to HTML (as there are XML documents), you need to construct an HTMLDocument, but its constructor is uncallable.
As the comments mention, the correct way to create a document is via the DOMImplementation#createHTMLDocument method.
var doc = document.implementation.createHTMLDocument();
var d = doc.createElement('div');
d instanceof Element; // true;
d instanceof HTMLDivElement; // true
d.constructor.name; // "HTMLDivElement"
From what I can gather, there has been a separation at some point from a general-purpose document (which was shared for HTML and XML) into two distinct constructors. At the same opportunity, they made the new constructors uncallable, and added the .createDocument() (for XML) and .createHTMLDocument() (for HTML) methods.
Sure it's standard - it just doesn't do the thing I expect it to :D The spec says it's both standard and a constructor.
– Benjamin Gruenbaum
10 hours ago
1
This is the best answer I have ever seen.
– Linkgoron
10 hours ago
add a comment |
The Document constructor is not specific to HTML (as there are XML documents), you need to construct an HTMLDocument, but its constructor is uncallable.
As the comments mention, the correct way to create a document is via the DOMImplementation#createHTMLDocument method.
var doc = document.implementation.createHTMLDocument();
var d = doc.createElement('div');
d instanceof Element; // true;
d instanceof HTMLDivElement; // true
d.constructor.name; // "HTMLDivElement"
From what I can gather, there has been a separation at some point from a general-purpose document (which was shared for HTML and XML) into two distinct constructors. At the same opportunity, they made the new constructors uncallable, and added the .createDocument() (for XML) and .createHTMLDocument() (for HTML) methods.
Sure it's standard - it just doesn't do the thing I expect it to :D The spec says it's both standard and a constructor.
– Benjamin Gruenbaum
10 hours ago
1
This is the best answer I have ever seen.
– Linkgoron
10 hours ago
add a comment |
The Document constructor is not specific to HTML (as there are XML documents), you need to construct an HTMLDocument, but its constructor is uncallable.
As the comments mention, the correct way to create a document is via the DOMImplementation#createHTMLDocument method.
var doc = document.implementation.createHTMLDocument();
var d = doc.createElement('div');
d instanceof Element; // true;
d instanceof HTMLDivElement; // true
d.constructor.name; // "HTMLDivElement"
From what I can gather, there has been a separation at some point from a general-purpose document (which was shared for HTML and XML) into two distinct constructors. At the same opportunity, they made the new constructors uncallable, and added the .createDocument() (for XML) and .createHTMLDocument() (for HTML) methods.
The Document constructor is not specific to HTML (as there are XML documents), you need to construct an HTMLDocument, but its constructor is uncallable.
As the comments mention, the correct way to create a document is via the DOMImplementation#createHTMLDocument method.
var doc = document.implementation.createHTMLDocument();
var d = doc.createElement('div');
d instanceof Element; // true;
d instanceof HTMLDivElement; // true
d.constructor.name; // "HTMLDivElement"
From what I can gather, there has been a separation at some point from a general-purpose document (which was shared for HTML and XML) into two distinct constructors. At the same opportunity, they made the new constructors uncallable, and added the .createDocument() (for XML) and .createHTMLDocument() (for HTML) methods.
edited 10 hours ago
answered 10 hours ago
Madara Uchiha♦Madara Uchiha
120k44215264
120k44215264
Sure it's standard - it just doesn't do the thing I expect it to :D The spec says it's both standard and a constructor.
– Benjamin Gruenbaum
10 hours ago
1
This is the best answer I have ever seen.
– Linkgoron
10 hours ago
add a comment |
Sure it's standard - it just doesn't do the thing I expect it to :D The spec says it's both standard and a constructor.
– Benjamin Gruenbaum
10 hours ago
1
This is the best answer I have ever seen.
– Linkgoron
10 hours ago
Sure it's standard - it just doesn't do the thing I expect it to :D The spec says it's both standard and a constructor.
– Benjamin Gruenbaum
10 hours ago
Sure it's standard - it just doesn't do the thing I expect it to :D The spec says it's both standard and a constructor.
– Benjamin Gruenbaum
10 hours ago
1
1
This is the best answer I have ever seen.
– Linkgoron
10 hours ago
This is the best answer I have ever seen.
– Linkgoron
10 hours ago
add a comment |
Because you have an instance of Document and not HTMLDocument, it'll create an Element, not an HTMLElement. Document and Element are basic interfaces to shared by all document types. EG an HTMLDocument will create an HTMLElement.
From MDN,
The Document interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. HTML, XML, SVG, …), a larger API is available: HTML documents, served with the "text/html" content type, also implement the HTMLDocument interface, whereas XML and SVG documents implement the XMLDocument interface.
Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. For example, the HTMLElement interface is the base interface for HTML elements, while the SVGElement interface is the basis for all SVG elements. Most functionality is specified further down the class hierarchy.
You probably want to use DOMImplementation.createHTMLDocument() to create a HTML Document.
add a comment |
Because you have an instance of Document and not HTMLDocument, it'll create an Element, not an HTMLElement. Document and Element are basic interfaces to shared by all document types. EG an HTMLDocument will create an HTMLElement.
From MDN,
The Document interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. HTML, XML, SVG, …), a larger API is available: HTML documents, served with the "text/html" content type, also implement the HTMLDocument interface, whereas XML and SVG documents implement the XMLDocument interface.
Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. For example, the HTMLElement interface is the base interface for HTML elements, while the SVGElement interface is the basis for all SVG elements. Most functionality is specified further down the class hierarchy.
You probably want to use DOMImplementation.createHTMLDocument() to create a HTML Document.
add a comment |
Because you have an instance of Document and not HTMLDocument, it'll create an Element, not an HTMLElement. Document and Element are basic interfaces to shared by all document types. EG an HTMLDocument will create an HTMLElement.
From MDN,
The Document interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. HTML, XML, SVG, …), a larger API is available: HTML documents, served with the "text/html" content type, also implement the HTMLDocument interface, whereas XML and SVG documents implement the XMLDocument interface.
Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. For example, the HTMLElement interface is the base interface for HTML elements, while the SVGElement interface is the basis for all SVG elements. Most functionality is specified further down the class hierarchy.
You probably want to use DOMImplementation.createHTMLDocument() to create a HTML Document.
Because you have an instance of Document and not HTMLDocument, it'll create an Element, not an HTMLElement. Document and Element are basic interfaces to shared by all document types. EG an HTMLDocument will create an HTMLElement.
From MDN,
The Document interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. HTML, XML, SVG, …), a larger API is available: HTML documents, served with the "text/html" content type, also implement the HTMLDocument interface, whereas XML and SVG documents implement the XMLDocument interface.
Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. For example, the HTMLElement interface is the base interface for HTML elements, while the SVGElement interface is the basis for all SVG elements. Most functionality is specified further down the class hierarchy.
You probably want to use DOMImplementation.createHTMLDocument() to create a HTML Document.
edited 10 hours ago
answered 10 hours ago
ShrekOverflowShrekOverflow
5,24623145
5,24623145
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55812500%2fwhy-do-elements-created-under-a-new-document-contain-the-wrong-prototype%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
6
I suspect it's related to
new Documentbeing a document and not an HTMLDocument?– Benjamin Gruenbaum
10 hours ago
Well
document.constructor.namecertainly isHTMLDocument– Pointy
10 hours ago
2
developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/…
– vzwick
10 hours ago
@vzwick thanks, TIL! I never heard about
document.implementation. This solves things more nicely than my workaround (of creating a frame and running it in another realm). Still - I'm not sure whynew DocumentcreatesElementsthat are notHTMLDivElements.– Benjamin Gruenbaum
10 hours ago
2
@Pointy
window.document.constructor.name; // => "HTMLDocument"vs.new Document().constructor.name; // => "Document"vs.document.implementation.createHTMLDocument().constructor.name; // => "HTMLDocument"– vzwick
10 hours ago