In the w3school site there are two tutorials:
HTML DOM
XML DOM
I want to know the releationship of them, since I think the HTML DOM is one kind of XML DOM.
So the methods/properties in the XML DOM can be used in HTML DOM, and the HTML DOM may own some special methods.
However, when I try to use this:
HTML:
<span id="con">xxx</span>
var a=document.createElement("a");
document.getElementById("con").appendChild(a);
It does not work in IE.
So I wonder what is the problem?
DOM refers to a tree you make out of XML. The tree is made up of nodes. For example:
<a x="bb">
<b> text </b>
</a>
turns into a tree with three nodes: one for a and one for b and one for the text. The nodes contains the attributes as fields. So the a node will have a field: x="bb".
HTML is (practically) XML so you can build a DOM tree out of it. HTML is just XML with predefined elements. I.e., you can't use whatever names you want for your elements (you can't use <children>, <ball>,...) you can use the predefined names (a, span, div, ...).
I say "practically" because HTML is usually broken XML (for example using <br> is wrong XML. you should use <br /> instead). The browsers have smart parsers that know how to overcome this broken XML and make a usuable tree out of the HTML.
You have an error in your code, it misses an 'e':
document.getElementById('con').appendChild(a);
appendChild() is buggy in IE
Related
I have a problem.
We are doing a Captive Portal.
Go to any site, for example www.php.net
Then in Chrome's console, use this:
$("html").load( "https://www.ccc.co.il/Suspend.aspx" );
You will notice, the DOM is replaced, but not quite the way it should be:
The wrapper elements of the loaded webpage (title, body for example) are missing!
This causes problems of course on the injected page.
How do I replace the entire initial DOM?
And please dont suggest to me using a link, or normal redirect.
Those are the restrictions, I need to replace the entire DOM tree please.
Thanks!
This is fundamentally a feature of browsers.
Here's a snip from the jQuery docs for .load():
jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.
While I don't recommend what you're suggesting at all, I will attempt to answer your question:
Using a server-side language (like PHP, for example), return documents as parsed json:
{
"head": [head string],
"body": [body string]
}
Then your JavaScript can individually replace each element.
You'll need to switch from .load() to something more configurable, like .ajax()
I think you would have to use an iframe in this case as I don't think that you can replace an entire DOM with another.
$('body').html("<iframe height=100% width=100% frameBorder=0 src='https://www.ccc.co.il/Suspend.aspx'></iframe>");
http://jsfiddle.net/c7EbY/
$.get("https://www.ccc.co.il/Suspend.aspx", function(html){$("html").html(html)});
I'm using a regular AJAX function here because it shouldn't strip anything.
Sorry about those 4 htmls in a row. :P
I am trying to give the user an ability to manually edit an SVG document.
Is there a strait forward way to use DOM to extract all the elements from an SVG document and place it in a text box? I tried to use innerHTML but that didn't work (not available for SVG).
Is there a method within JavaScript to extract all SVG elements from an embedded SVG document and store them as a string? I don't want to use jQuery or plugin if I can avoid it..
Sorry for my wording, my english is very poor.
You can use XMLSerializer to do this.
var str = new XMLSerializer().serializeToString(svgDocument);
If you have an <object> tag that references the svg, your svgDocument variable should be set to something like yourObjectElm.contentDocument. If the svg is inline in the html, then you can pass the element(s) instead of the document.
I've got a pretty complicated DOM structure already and I'd like to eliminate the possibility of unterminated image elements causing issues.
Looking at the simplest case:
var prettyPicture = document.createElement("img");
//Add properties...
container.appendChild(prettyPicture );
Works fine, but when I insepct the dom I see the img element without a terminating slash such as <img/>
<img id="iamge-6816177" src="_site/images/detail/6816177.png">
No issues in the simple layout view, but when I look at a view with tons of these elements, random ones, even similar images within the same parent nodes do not render, though their nodes are in the dom inspector. Would missing termination cause any issues with the tree?
The closing tag of an img element is entirely optional - this won't cause you problems in any browser. So much so, in fact, that in HTML5 you're now not supposed to include the /> in img elements at all.
Also, what you see when you inspect the DOM is just how your inspector chooses to display elements with no closing tag - you can be sure that createElement() and appendChild() are generating valid HTML, as you're working directly with the DOM rather than providing text for the browser to parse into DOM objects.
If you're concerned about
<img id="iamge-6816177" src="_site/images/detail/6816177.png">
instead of
<img id="iamge-6816177" src="_site/images/detail/6816177.png"/>
then there is no worry : the days of the painful XHTML have ended and HTML5 confirms that you shouldn't write XML-style self-closing tags.
From the spec :
Void elements only have a start tag; end tags must not be specified
for void elements.
[...]
Void elements
area, base, br, col, command, embed, hr, img, input,
keygen, link, meta, param, source, track, wbr
It's bad practice to clutter your code with ending tags. HTML isn't XHTML.
From http://www.w3schools.com/tags/tag_IMG.asp
In HTML the <img> tag has no end tag.
In XHTML the <img> tag must be properly closed.
In all cases, the browser won't care.
No this should not cause any issues. I would just ignore it as this will not harm w3.org compliance because DOM elements are generated dynamically.
I'm trying to parse HTML in the browser. The browser receives 2 HTML files as strings, eg. HTML1 and HTML2.
I now need to parse these "documents" just as one would parse the current document. This is why I was wondering if it is possible to create custom documents based on these HTML strings (these strings are provided by the server or user).
So that for example the following would be valid:
$(html1Document).$("#someDivID")...
If anything is unclear, please ask me to clarify more.
Thanks.
var $docFragment = $(htmlString);
$docFragment.find("a"); // all anchors in the HMTL string
Note that this ignores any document structure tags (<html>, <head> and <body>), but any contained tags will be available.
With jQuery you can do this:
$(your_document_string).someParsingMethod().another();
You can always append your html to some hidden div (though innerHTML or jQuery .html(..)). It won't be treated exactly as a new document, but still will be able to search its contents.
It has a few side-effects, though. For example, if your html defines any script tags, they'll be loaded. Also, browser may (and probably will) remove html, body and similar tags.
edit
If you specifically need title and similar tags, you may try iframe loading content from your server.
My documents are a mixture of XML and HTML tags, where HTML tags are pulled from xhtml namespace and mine are from various namspaces.
I want to take user interaction events from XML Nodes of my document.
I first tried <do:landingTime xhtml:onclick="fnc">20:48:29.45</do:landingTime> with no Luck. But <xhtml:span onclick="fnc"> works.
So is there any solution/tricks/hacks/backdoor to take events from my XML Nodes?
You need to add the click events using Javascript and accept answers to your questions.