DOM manipulation


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. // ------------------------------------------------
  2. // document.getElementById()
  3.  
  4. /*
  5. DOM browsers use the document.getElementById method to reference the element. You can use a simple if statement to check for the existence of this method.
  6. */
  7.  
  8. if( document.getElementById ){
  9. var myReference = document.getElementById('divID');
  10. }
  11.  
  12.  
  13. // ------------------------------------------------
  14. // Changing the position
  15.  
  16. var noPx = document.childNodes ? 'px' : 0;
  17. if( myReference.style ) { myReference = myReference.style; }
  18. myReference.left = ( parseInt(myReference.left) + 10 ) + noPx;
  19. myReference.top = ( parseInt(myReference.top) + 20 ) + noPx;
  20.  
  21.  
  22. // ------------------------------------------------
  23. // Changing the background color
  24.  
  25. if( myReference.style ) { myReference = myReference.style; }
  26. if( myReference.background ) {
  27. //supported by most browsers
  28. //like Gecko browsers and the IE series
  29. myReference.background = '#00ff00';
  30. } else if( myReference.backgroundColor ) {
  31. //supported by most browsers
  32. myReference.backgroundColor = '#00ff00';
  33. } else if( myReference.bgColor ) {
  34. //used by layers browsers
  35. myReference.bgColor = '#00ff00';
  36. } else {
  37. //FAILURE, there is no way to change the background colour
  38. }
  39.  
  40.  
  41. // ------------------------------------------------
  42. // Changing the z-index
  43.  
  44. /*
  45. The z-index of positioned elements defines what order they should be stacked above each other. The z-index should be a positive integer. The higher the z-index, the more positioned elements it will be stacked on top of. Two elements must not be given the same z-index. To read the z-index of a positioned element, it must be already defined using the inline style syntax.
  46. */
  47.  
  48. if( myReference.style ) { myReference = myReference.style; }
  49. myReference.zIndex = 100;
  50.  
  51. // ------------------------------------------------
  52. // Changing the clipping
  53.  
  54. /*
  55. Clipping can only be used on absolutely positioned elements.
  56.  
  57. This technique is usually used for message scrollers. In browsers that do not support clipping, it is possible to provide them with an iframe so that the contents of that can be scrolled. Please see my scroller example for a more detailed explaination of what clipping is and how it works.
  58. */
  59.  
  60. if( myReference.clip ) {
  61. myReference.clip.left = 0;
  62. myReference.clip.top = 0;
  63. myReference.clip.right = 10;
  64. myReference.clip.bottom = 10;
  65. } else if( myReference.style ) {
  66. //top right bottom left
  67. myReference.style.clip = 'rect(0px, 10px, 10px, 0px)';
  68. } else {
  69. //FAILURE, nothing works
  70. }
  71.  
  72. // ------------------------------------------------
  73. // Changing the size
  74.  
  75. if( myReference.style ) { myReference = myReference.style; }
  76. if( myReference.resizeTo ) {
  77. myReference.resizeTo( newWidth, newHeight );
  78. }
  79. var noPx = document.childNodes ? 'px' : 0;
  80. myReference.width = newWidth + noPx;
  81. myReference.pixelWidth = newWidth;
  82. myReference.height = newHeight + noPx;
  83. myReference.pixelHeight = newHeight;
  84.  
  85.  
  86. // ------------------------------------------------
  87. // Rewriting the contents
  88.  
  89. if( typeof( myReference.innerHTML ) != 'undefined' ) {
  90. //used by all current browsers
  91. myReference.innerHTML = 'some <b>new</b> content';
  92. }
  93.  
  94.  
  95. // ------------------------------------------------
  96. // Creating new positioned elements
  97.  
  98.  
  99. if( document.layers && window.Layer && document.classes ) {
  100. //create a layer 350px wide
  101. document.layers['newName'] = new Layer( 350 );
  102. //write its content
  103. document.layers['newName'].document.open();
  104. document.layers['newName'].document.write('new content');
  105. document.layers['newName'].document.close();
  106. //style it
  107. document.layers['newName'].left = 0;
  108. document.layers['newName'].top = 0;
  109. document.layers['newName'].visibility = 'show';
  110. } else if( document.body ) {
  111. var theString = '<div style="position:absolute;left:0px;top:0px;' +
  112. 'width:350px;">new content</div>';
  113. if( document.body.insertAdjacentHTML ) {
  114. document.body.insertAdjacentHTML( 'beforeEnd', theString );
  115. } else if( typeof( document.body.innerHTML ) != 'undefined' ) {
  116. document.body.innerHTML += theString;
  117. } else {
  118. //FAILURE, nothing works
  119. }
  120. } else {
  121. //FAILURE, nothing works
  122. }
  123.  
  124.  
  125. // ------------------------------------------------
  126. // Changing the display style of any element
  127.  
  128.  
  129. function changeDisplay( elementId, setTo ) {
  130. var theElement;
  131. if( document.getElementById ) {
  132. //DOM
  133. theElement = document.getElementById( elementId );
  134. } else if( document.all ) {
  135. //Proprietary DOM
  136. theElement = document.all[ elementId ];
  137. }
  138. if( !theElement ) {
  139. /* The page has not loaded, or the browser claims to
  140.   support document.getElementById or document.all but
  141.   cannot actually use either */
  142. return;
  143. }
  144. //Reference the style ...
  145. if( theElement.style ) { theElement = theElement.style; }
  146. if( typeof( theElement.display ) == 'undefined' ) {
  147. //The browser does not allow us to change the display style
  148. //Alert something sensible (not what I have here ...)
  149. window.alert( 'Your browser does not support this' );
  150. return;
  151. }
  152. //Change the display style
  153. theElement.display = setTo;
  154. }

URL: http://www.howtocreate.co.uk/tutorials/javascript/dombasics

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.