- if (window.event &&. - window.event.srcElement) el = window.event.srcElement;. - while (el.nodeName.toLowerCase. - el.nodeName.toLowerCase. - if (el.nodeName.toLowerCase. - if (document.getElementById('newwin') &&. - document.getElementById('newwin').checked. - window.open(el.href);. - if (window.event). - window.event.cancelBubble = true;. - window.event.returnValue = false;. - if (!document.getElementById) return;. - var all_links = document.getElementsByTagName('a');. - It also attaches the cancelClick function as the old-style click event listener for each link—this will permit us to cancel the default action of each link in Safari.. - we check for a window.event object and, if it exists, use it to get window.event.srcElement , the clicked link. - Some browsers may pass the text node inside a link as the clicked-on node, instead of the link itself. - tag, we ascend the DOM tree, getting its parent (and that node’s parent, and so on) until we get to the a element. - Note that we also use toLowerCase on the nodeName of the element. - document.getElementById('newwin').checked). - The window.open method creates a new window and navigates it to the specified URL.. - We don’t want the link to have its normal effect of navigating the current window to the link’s destination. - Note the location of the cursor. - <td></td>. - <td>Column 1</td>. - <td>Column 2</td>. - <td>Column 3</td>. - <td>Column 4</td>. - <td>Row 1</td>. - <td>1,1</td><td>1,2</td><td>1,3</td><td>1,4</td>. - <td>Row 2</td>. - <td>2,1</td><td>2,2</td><td>2,3</td><td>2,4</td>. - <td>Row 3</td>. - <td>3,1</td><td>3,2</td><td>3,3</td><td>3,4</td>. - <td>Row 4</td>. - <td>4,1</td><td>4,2</td><td>4,3</td><td>4,4</td>. - Notice that none of the styles have any effect because, as yet, there are no elements with class="hi". - Here’s an outline of the script:. - Notice how similar the function outline is to the smart links example. - climb up the tree to the supplied tag.. - return (e.nodeName.toLowerCase. - cell.className. - if (!document.getElementsByTagName) return;. - var all_cells = document.getElementsByTagName('td');. - This marches up the tree from the element supplied in the first argu- ment to find the first enclosing tag whose name matches the second argument.. - The ascendDOM function is called quite often in the code, so you can see the benefit of putting that code into a function. - The rest of the code is simply concerned with picking out the right elements for these lines to work on.. - Our intention here is to apply the class hi to the other cells in the row that con- tains the moused-over cell, and its column. - tag, whereas the column is a list of cells scattered across all the rows in the table. - Ac- cording to the DOM Level 2 specification, table cell elements have a cellIndex property, which indicates the cell’s index in the row. - To find the other cells in this column, we could iterate through all the rows in the table and find within each row the cell that has the same cellIndex. - ci is the cellIndex , and can be used to highlight other cells with the same cellIndex in the other rows in the table:. - All the table’s rows are held in the table’s rows array. - We walk through that array, applying the hi class to the cell in each row that has the same index as the moused-over cell.. - The upshot of this exercise is that all the cells in the same column as the moused- over cell will have class hi . - Our CSS code takes care of the appearance of these cells:. - If a match for the regular ex- pression is found in the string, it is replaced by the substitute string. - In our ex- ample, we look for matches to the expression \b ?hi\b (note that regular expres- sions are delimited by slashes, not quotes)—that is, a word boundary followed by an optional space, the word ‘hi’, and another word boundary—and replace it with a blank string, thus removing it from the className. - For example, the HTML of the page contains two tables, one with a class of extra . - Errors should not be shown to the user:. - The three categories in the middle of the list are of concern to us in this chapter.. - In the following discussion, we’ll see that classifying browsers by type isn’t as good as detecting features on a case-by-case basis.. - In the bad old days, before browser manufacturers standardized on the DOM, JavaScript developers relied on detection of the browser’s brand and version via a process known as browser sniffing. - We can, for example, find the name of the browser (the “user agent string”) as follows:. - some, such as Opera, can be configured to deliver a user agent string of the user’s choice. - 1 For example, if your DHTML shows and hides some areas of the page, those areas should show initially, then be hidden with DHTML, so that they are available to non-DHTML browsers.. - document.implementation.hasFeature method that you can use to detect DOM support.. - Browser sniffing—what little of it remains—should be confined to the dustbin of history. - Put it in the. - if (document.getElementById). - if (document.getElementById()). - If we do not in- clude the brackets, we’re referring to the JavaScript Function object that underlies the method. - Including the brackets would mean that we were testing the return value of the method call, which we do not want to do. - This feature of JavaScript—the ability to test whether a method exists—has been part of the language since its inception. - This will cover browsers in the fourth category above: the ones that implement some—but not all—of the DOM.. - A large subset of DHTML scripts work by setting on page load some event listeners that will be called as various elements in the browser fire events. - if (!document.getElementById. - !document.getElementsByTagName. - !document.createElement. - var foo = document.getElementById('foo. - we check for the existence of the DOM methods getElementById , getElementsByTagName , and createElement. - The if statement says: “if the JavaScript Function object document.getElementById does not exist, or if the Function object document.getElementsByTagName does not exist, or if the Function object document.createElement does not exist, exit the myScriptInit function.” This means that, should any of those objects not be supported, the myScriptInit function will exit at that point: it will not even get as far as setting up the event listeners. - Therefore, as above, the listener function myScriptEventListener can feel safe in using document.getElementById without first checking to ensure that it is supported. - Even though the scripts are read by the browser at load time, no checks are done on the objects stated in the scripts until the code is run. - Feature sniffing can be used on any JavaScript object: not just methods, and not just those methods that are part of the DOM. - These JavaScript properties are an extension to the DOM provided by all the major browsers. - var foo = document.getElementById('foo');
Xem thử không khả dụng, vui lòng xem tại trang nguồn hoặc xem
Tóm tắt