Html2ja: parses the html target element into a JavaScript array literal. The values of each element are tagName, className, id, and other CSS selector combinations;
ShowJa: indent the array generated by html2ja to be formatted and displayed;
Lateral DOM: traverses the DOM target element (the Good Parts from the old path ).
Ja2html: Process opposite to html
PS: the following code is a simple concept test. Please complete it yourself.
Code snippet:
Copy to ClipboardReference: [www.bkjia.com]/*
<Html>
<Head>
<Title> HTML RESTructure </title>
<Style>
</Style>
<Script>
*/
// WorkDOM function traverses the target element or node
// There are two modes:
// 1. 'element' mode (default) (including defined element items)
// 2. 'node' mode (all nodes including text nodes)
Function compute dom (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 HTML target elements to JavaScript arrays,
// This function calls the eval function and specifies the range of each target.
// Add an index attribute to the element (this is specially set ).
Function html2ja (elt ){
Var walk = empty dom (),
Lis;
Walk (elt, function (el ){
Var pe = el. parentElement,
Pes = el. previuselementsibling;
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.doc umentElement ));
};
/*
</Script>
</Head>
<Body>
<Div id = "header">
<H1 align = "center"> HTML RESTructure <P align = "right"> [HTML] + [REST] + [JSON] = [HTML RESTructure] </p>
</Div>
<Div id = "main">
<Div class = "article" id = "art_1">
<H2> HTML <==> REST <P>
<Pre>
Html dom is a tree-like document model,
Therefore, it is easy to convert it into other data structures.
Here, I map the DOM to JSON. Specifically,
It is represented literally by JavaScript Array.
REST can save its status in JSON format.
And the logical structure.
HTML to REST (or reverse) Bridge, Data
The structure will become abnormal and clear, making content management easier.
Jie.
</Pre>
</P>
</Div>
<Div class = "article" id = "art_2">
<H2> XHTML Core Elements <P>
<Pre>
Generally, this is enough:
1. DIV: Block
2. P: paragraph
3. SPAN: Section
4. A: Anchor
5. H1-H6: Title
6. UL & LI: unordered list
7. PRE: PRE-formatted text
</Pre>
</P>
</Div>
<Div class = "article" id = "art_3">
<H2> JavaScript Array <P>
<Pre id = "code-pre">
</Pre>
</P>
</Div>
</Div>
<Div id = "footer">
<P align = "center">©<A class = "user-name" href = "mailto: rugby@gmail.com"> rugby </a>, 2011 </p>
</Div>
</Body>
</Html>
*/
Code snippet:
Copy to ClipboardReference: [www.bkjia.com]/*
<Script>
*/
// Convert the JavaScript nested array into an html dom Structure
// Opposite to 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>
*/
