Conversion between HTML (DOM) and JavaScript nested arrays

Source: Internet
Author: User
Tags tagname javascript array

Html2ja: Parse HTML target element into JavaScript array literal, each item's value is TagName, ClassName, ID and so on CSS selector combination;
Showja: Indents the Html2ja generated array into a formatted display;
Walkdom: Traverse the DOM target element (the good Parts from the road).
Ja2html: The opposite process to HTML
PS: The above code is just a simple concept test, the actual use please self-improvement.
? 1. Code [JavaScript] Code

/*
<title>html restructure</title>
<style>
</style>
<script>
*/
Workdom function traversal target element or node
There are two types of modes:
1. ' element ' mode (default) (contains the defined element item)
2. ' node ' mode (all nodes that contain text nodes)
function Walkdom (mode) {
var m = Mode | | "Element";
var f = "Firstelementchild",
n = "nextelementsibling";
if (m = = = "Node") {
f = "FirstChild";
n = "nextSibling";
}

return function _ (val, func) {
Func (Val);
val = val[f];
while (Val) {
_ (Val, func);
val = val[n];
}
};
}
The Html2ja function converts an HTML target element into a JavaScript array.
The Eval function is called in this function, and for each target range
An index attribute is added to the element (this is deliberately set).
function Html2ja (ELT) {
var walk = Walkdom (),
Lis
Walk (ELT, function (EL) {
var pe = el.parentelement,
pes = el.previouselementsibling;

var sel = El.tagname;
if (el.classname)
Sel + = '. ' + el.classname;
if (el.id)
sel + = ' # ' + el.id;

if (el = = = ELT) {
El.index = ' 0 ';
LIS = [SEL];
} else {
if (PES) {
El.rank = Pes.rank + 1;
} else {
El.rank = 1;
}
var t = pe.index.split (', '). Slice (0,-1). Concat (El.rank);
El.index = T.concat (0). Join (', ');
Eval (' lis[' + t.join ('] [') + '] = [sel]; ');
}
});
return LIS;
}

Window.onload = function () {
var ind = ';
var Showja = function _ (o) {
var i,
s = ';
for (i = 0; i < o.length; i++) {
var S1;
if (typeof o[i] = = = ' object ') {
IND + = ' \ t ';
s = S.slice (0,-1) + ', \ n ' + ind + _ (O[i]) + '] ';
} else {
s = S.slice (0,-1) + ' ["' + o[i] + '"];
}
}
IND = Ind.slice (0,-1);
return s;
};

document.getElementById ("Code-pre"). InnerText = Showja (Html2ja (document.documentelement));
};
/*
</script>
<body>
<div id= "Header" >
&LT;H1 align= "center" >html restructure<p align= "right" >[html] + [REST] + [JSON] = [HTML restructure]</p>
</div>http://www.enterdesk.com/special/shouhui/?
<div id= "Main" > Hand-painted pictures
<div class= "article" id= "art_1" >
<p>
<pre>
The HTML Dom is a tree-shaped document model,
So it is convenient to convert it into other data structures.
Here, I map the DOM to JSON, specifically,
Is represented by the JavaScript array literal.
And rest can also save its state in JSON mode
and logical structure, if you use JSON to mount the
HTML to rest (or vice versa) of the bridge, the data
Structure will become exceptionally clear and content management more
Jie.
</pre>
</p>
</div>
<div class= "article" id= "Art_2" >
<p>
<pre>
Typically, this is sufficient:
1. DIV: Block
2. P: Paragraph
3. SPAN: Section
4. A: Anchor
5. H1-h6: Title
6. UL & LI: Unordered list
7. Pre: preformatted text
</pre>
</p>
</div>
<div class= "article" id= "Art_3" >
<p>
<pre id= "Code-pre" >
</pre>
</p>
</div>
</div>
<div id= "Footer" >
<p align= "center" >&copy; <a class= "User-name" href= "mailto: [email protected]" &GT;RUGBY&LT;/A&GT;, 2011</p>
</div>
</body>
*/
2. [Code][javascript] Code
/*
<script>
*/
Convert JavaScript nested arrays to HTML DOM structure
Just the opposite of the html2ja above.
var ja2html = function _ (ja, DST) {
var els = Ja[0].split ("),
ELT = Document.createelement (Els[0]);
if (Dst.tagname!== els[0]) {
if (Els.length > 1) {
if (Els.length < 3) {
var sig = Els[1].slice (0,1);
if (sig = = = '. ')
Elt.classname = Els[1].slice (1);
Else
Elt.id = Els[1].slice (1);
} else {
Elt.classname = Els[1].slice (1);
Elt.id = Els[2].slice (1);
}
}
Dst.appendchild (ELT);
DST = ELT;
}
var j = 1;
while (J < ja.length) {
_ (Ja[j], DST);
j + = 1;
}
};

Test
var ja = (
["HTML",
["HEAD",
["TITLE"],
["STYLE"],
["SCRIPT"]],
["BODY",
["DIV #header",
["H1"],
["P"]],
["DIV #main",
["DIV. Article #art_1",
["H2"],
["P"],
["PRE"],
["P"]],
["DIV. Article #art_2",
["H2"],
["P"],
["PRE"],
["P"]],
["DIV. Article #art_3",
["H2"],
["P"],
["PRE #code-pre"],
["P"]],
["DIV #footer",
["P",
["A. User-name"]]]
);
Alert (JA);
Window.onload = function () {ja2html (ja[2], document.body);};
/*
</script>
*/
?

Conversion between HTML (DOM) and JavaScript nested arrays

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.