javascript

Chapter 10: The Document Object Model
Scrolling
One of the issues not addressed by the DOM specification is how to scroll areas of a page. To fill this gap,
browsers have implemented several methods that control scrolling in different ways. Each of the
following methods exists as an extension to the HTMLElement type and therefore each is available on all
elements:
❑
❑
❑
❑
scrollIntoView( alignWithTop ) — Scrolls the browser window or container element so the
element is visible in the viewport. If alignWithTop is set to true or is omitted, the window
scrolls so that the top of the element is at the top of the viewport (if possible). This is implemented
in all browsers.
scrollIntoViewIfNeeded( alignCenter ) — Scrolls the browser window or container
element so that the element is visible in the viewport only if it ’ s not already visible; if
the element is already visible in the viewport, this method does nothing. The optional
alignCenter argument will attempt to place the element in the center of the viewport if set to
true . This is implemented in Safari and Chrome.
scrollByLines( lineCount ) — Scrolls the contents of the element by the height of the given
number of text lines, which may be positive or negative. This is implemented in Safari and Chrome.
scrollByPages( pageCount ) — Scrolls the contents of the element by the height of a page,
which is determined by the height of the element. This is implemented in Safari and Chrome.
Keep in mind that scrollIntoView() and scrollIntoViewIfNeeded() act on the element ’ s
container, whereas scrollByLines() and scrollByPages() affect the element itself. Following is an
example of how this may be used:
//scroll body by five lines
document.body.scrollByLines(5);
//make sure this element is visible
document.forms[0].scrollIntoView();
//make sure this element is visible only if it’s not already
document.images[0].scrollIntoViewIfNeeded();
//scroll the body back up one page
document.body.scrollByPages(-1);
Because scrollIntoView() is the only method supported in all browsers, this is typically the only
one used.
The children Property
The differences in how IE and other browsers interpret white space in text nodes led to the creation of
the children property. The children property is an HTMLCollection that contains only an element ’ s
child nodes that are also elements. Otherwise the children property is the same as childNodes and
may contain the same items when an element has only elements as children. The children property is
accessed as follows:
298