HTML DOM: All about

Concept

Javascript – DOM parser speed

The DOM isn’t slow, your code is slow.

Notes

  • Do not use JQUERY to create HTML element
  • Stop using DOM libraries, use pure Javascript
  • [html]
    jQuery: the most popular DOM library, a very safe choice with a strong community.
    Dojo: Toolkit An excellent well supported library that offers a lot excellent utility even beyond the DOM.
    YUI: Yahoo’s DOM Library
    Prototype: One of the founding fathers of the JavaScript library movement.
    MooTools: MooTools is a beautifully designed API similar to Prototype.
    Zepto: ZeptoJS is a Webkit specific subset implementation of the jQuery API. Useful when smaller downloads are important and you don’t need to support other browsers.
    [/html]

  • Use document fragments https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment
  • Use Profiler https://developers.google.com/chrome-developer-tools/docs/cpu-profiling to measure load

Get/ Set element attribute

jQuery

Get element base on node by node structure

[js]
alert ($(‘#granparentID > div > ul > li > a’).attr(‘title’));
[/js]

Get element base on index

[js]
alert ($(‘#granparentID > div > ul:eq(3) > li:eq(1) > a’).attr(‘title’));
[/js]

Get element base on Parent-Child structure

[js]
alert ($(“#parentID nodeName”).attr(“category”));
[/js]

Get element having attribute

[js]
alert ($(“#tableID td[category]”).attr(“category”));
[/js]

Get element inside a loop

[js]
$(‘#elementID tr’).each( function(index) {
alert(
$(this).find(“td[type=’aaaa’]”).attr(“category”) );
});
[/js]

Get next sibling element

[js]
$(“#tblRes tr:eq(1) td:eq(1)”).next().attr(‘align’, ‘right’);
[/js]

Get index of an element

[js]
alert($(“#elementID nodeName”).index());
[/js]

Get attribute value of a n position child element

[js]
alert ($(‘#rtbCommentsTop > div > ul:eq(3) > li:eq(1) > a’).attr(‘title’));
[/js]

C#

Set style for a TableCell

[js]
var tblCell = new TableCell();
tblCell.Style[“property”] = “value”
[/js]

[js]
tblCell.Attributes.Add(“class”, “className”);
[/js]

Get attribute of a TableCell

[js]
String typeValue = tblCell.Attributes[“type”];
[/js]

Be the first to comment

Leave a Reply

Your email address will not be published.


*