Taming the browser with the YUI Dom Component
-
Upload
christian-heilmann -
Category
Technology
-
view
11.326 -
download
3
description
Transcript of Taming the browser with the YUI Dom Component
![Page 1: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/1.jpg)
Using YUI Dom
to tame the Browser
Christian HeilmannYahoo! F2E Summit Asia 2007
![Page 2: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/2.jpg)
Quick reminder
• Development according to web standards means first and foremost separation.
• Specifically separation of web development layers.
![Page 3: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/3.jpg)
addClass batch generateId get getAncestorBy getAncestorByClassNamegetAncestorByTagName getChildrengetChildrenBy getClientHeightgetClientWidth getDocumentHeightgetDocumentScrollLeftgetDocumentScrollTop getDocumentWidthgetElementsBy getElementsByClassNamegetFirstChild getFirstChildBygetLastChild getLastChildBygetNextSibling getNextSiblingBygetPreviousSibling getPreviousSiblingBygetRegion getStyle getViewportHeightgetViewportWidth getX getXY getYhasClass inDocument insertAfterinsertBefore isAncestor removeClassreplaceClass setStyle setX setXY setY
![Page 4: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/4.jpg)
Use cases for the DOM utility
• Using CSS Classes• Getting elements from the DOM • Using the browser dimensions• Using element dimensions• Styling elements
![Page 5: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/5.jpg)
Using CSS Classes
• addClass()• removeClass()• hasClass()• replaceClass()• getElementsByClassName()
![Page 6: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/6.jpg)
Why?
![Page 7: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/7.jpg)
Why?
• CSS is the supercharged DOM Scripting.• CSS is much closer connected to the
HTML• Therefore it is more likely to change at the
same time.• I hate loops.
![Page 8: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/8.jpg)
Why?
• CSS is the supercharged DOM Scripting.• CSS is much closer connected to the
HTML• Therefore it is more likely to change at the
same time.• I hate loops.
![Page 9: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/9.jpg)
Why?
• CSS is the supercharged DOM Scripting.• CSS is much closer connected to the
HTML• Therefore it is more likely to change at the
same time.• I hate loops.
![Page 10: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/10.jpg)
Why?
• CSS is the supercharged DOM Scripting.• CSS is much closer connected to the
HTML• Therefore it is more likely to change at the
same time.• I hate loops.
![Page 11: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/11.jpg)
Example:
Hiding all “trigger” links in a main section when JS is available.
![Page 12: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/12.jpg)
Example:
var main = document.getElementById('main');if(main){
var triggers = main.getElementsByTagName('a');for(var i=0,j=triggers.length;i<j;i++){
if(triggers[i].className === 'trigger'){triggers[i].style.display = 'none';
}}
}
![Page 13: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/13.jpg)
Example:
var main = document.getElementById('main');if(main){
var triggers = main.getElementsByTagName('a');for(var i=0,j=triggers.length;i<j;i++){
if(triggers[i].className === 'trigger'){triggers[i].style.display = 'none';
} }
}
display:none is a bad plan!
![Page 14: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/14.jpg)
Example:
var main = document.getElementById('main');if(main){
var triggers = main.getElementsByTagName('a');for(var i=0,j=triggers.length;i<j;i++){
if(triggers[i].className === 'trigger'){triggers[i].style.display = 'none';
} }
}
Off-left is better.
![Page 15: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/15.jpg)
Example:
var main = document.getElementById('main');if(main){
var triggers = main.getElementsByTagName('a');for(var i=0,j=triggers.length;i<j;i++){
if(triggers[i].className === 'trigger'){triggers[i].style.position = 'absolute'; triggers[i].style.left = '-6000px';
} }
}
![Page 16: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/16.jpg)
Magic JavaScript Pixy Solution
$('#main a.trigger').hide();
![Page 17: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/17.jpg)
My fave:
document.body.className = 'js';
// or var b = document.body;var bc = b.className;b.className = bc ? bc + ' js' : 'js';
![Page 18: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/18.jpg)
Getting elements from the DOM
• inDocument()• isAncestor()• getElementsByClassName• getElementsBy• get• batch
![Page 19: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/19.jpg)
Using the browser dimensions
• getViewportWidth()• getViewportHeight()• getDocumentWidth()• getDocumentHeight()
![Page 20: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/20.jpg)
Using element dimensions
• getX(), getY(), getXY()• setX(), setY(), setXY()• getRegion()
– Region union– Region intersect – Region contains
![Page 21: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/21.jpg)
Using element dimensions
![Page 22: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/22.jpg)
Using element dimensions
• Each of these methods can take an ID, a reference of an HTMLelement or an array of elements as the parameter.
• This allows you to easily access a lot of elements.
![Page 23: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/23.jpg)
Using element dimensions
• The Dom utility does not care if the element is positioned absolute, relative or static.
• It also sorts out differences in render mode for you.
• However, each element needs to be part of the Dom and not hidden with display:none!
![Page 24: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/24.jpg)
Using element dimensions
• The get and set methods of x and y are very straight forward.
• They return the left, the top or both values in pixels or an array with this data for each element you parsed in.
• You can also set the position in pixels with the setter methods.
![Page 25: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/25.jpg)
Using element dimensions
var xy = YAHOO.util.Dom.getXY('hd');
// = [128, 0];YAHOO.util.Dom.setXY('hd',[128,-
10]);// shifts header 10 pixels up
![Page 26: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/26.jpg)
Using element dimensions
• By using the getRegion() method you can read out the screen estate the element occupies.
• This is incredibly useful for positioning elements or avoiding overlap.
• The return is an object with several properties.
![Page 27: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/27.jpg)
Using element dimensions
var h = YAHOO.util.Dom.getRegion('hd');
// h = // {0:128// 1:0,// top:0,// right:878, // bottom:79, // left:128}
![Page 28: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/28.jpg)
Using element dimensions
• top, left, right, bottom are the pixel locations on the page.
• There are shortcuts for left and top named 0 and 1 to allow for compatibility with setX,setY and setXY.
![Page 29: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/29.jpg)
Using element dimensions
• Using these properties you can also calculate the dimensions of the element.
• Simply subtract left from right for the width.• And top from bottom for the height.
![Page 30: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/30.jpg)
Using element dimensions
• The Region() component does a lot more for you though.
• By calculating the region occupied by two elements, you can find out:– if one element contains the other – how big the area containing both of them is
and– if and where they intersect
![Page 31: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/31.jpg)
Using element dimensions
YD = YAHOO.util.Dom;reg1 = YD.getRegion('r1');reg2 = YD.getRegion('r2');contains = reg1.contains(reg2);
Region #1 Region #2
![Page 32: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/32.jpg)
Using element dimensions
YD = YAHOO.util.Dom;reg1 = YD.getRegion('r1');reg2 = YD.getRegion('r2');contains = reg1.contains(reg2);
false
Region #1 Region #2
![Page 33: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/33.jpg)
Using element dimensions
YD = YAHOO.util.Dom;reg1 = YD.getRegion('r1');reg2 = YD.getRegion('r2');contains = reg1.contains(reg2);
Region #1
Region #2
![Page 34: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/34.jpg)
Using element dimensions
YD = YAHOO.util.Dom;reg1 = YD.getRegion('r1');reg2 = YD.getRegion('r2');contains = reg1.contains(reg2);
true
Region #1
Region #2
![Page 35: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/35.jpg)
Using element dimensions
YD = YAHOO.util.Dom;reg1 = YD.getRegion('r1');reg2 = YD.getRegion('r2');is = reg1.intersect(reg2);
Region #1
Region #2
![Page 36: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/36.jpg)
Using element dimensions
YD = YAHOO.util.Dom;reg1 = YD.getRegion('r1');reg2 = YD.getRegion('r2');is = reg1.intersect(reg2);
Region #1
Region #2
![Page 37: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/37.jpg)
Using element dimensions
YD = YAHOO.util.Dom;reg1 = YD.getRegion('r1');reg2 = YD.getRegion('r2');is = reg1.union(reg2);
Region #1
Region #2
Region #1
Region #2
![Page 38: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/38.jpg)
Using element dimensions
YD = YAHOO.util.Dom;reg1 = YD.getRegion('r1');reg2 = YD.getRegion('r2');is = reg1.union(reg2);
Region #1
Region #2
Region #1
Region #2
![Page 39: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/39.jpg)
Styling elements
• getStyle()• setStyle()
![Page 40: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/40.jpg)
Styling Elements
• You might wonder why you’d need these two methods as seemingly element.style.property = valuewould do the same.
• The two methods however work around several browser problems and differences between computedStyle and currentStyle.
![Page 41: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/41.jpg)
Styling Elements
• The other benefit is that you can use the CSS selector names instead of the camelCased JavaScript ones.
• Furthermore you can use the opacityproperty without needing to branch for different browsers.
![Page 42: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/42.jpg)
CSS normalization
obj.style.marginTop = '10px';
vs.
YAHOO.util.Dom.setStyle(obj, 'margin-top','10px');
![Page 43: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/43.jpg)
CSS normalization
• Furthermore, opacity is not a nightmare any longer:
YAHOO.util.Dom.setStyle(obj, 'opacity','.2');
![Page 44: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/44.jpg)
CSS normalization
• And last but not least, float can be used:
YAHOO.util.Dom.setStyle(obj, 'float','left');
![Page 45: Taming the browser with the YUI Dom Component](https://reader033.fdocuments.in/reader033/viewer/2022052507/558963fbd8b42ab34b8b45b6/html5/thumbnails/45.jpg)
Thanks!