Common considerations for developing cross-browser JavaScript_javascript tips

1. Append rows to a table
In the past experience of using Ajax, you are likely to use JavaScript to append rows to an existing table, or create a new table containing table rows from scratch. The document.createElement and document.appendChiid methods make this easy, just use document.createElement to create table cells, and then use the document.app-endChild method to add these table cells to table rows. The next editing step is to add table rows to the table using document.append-
Child.
This is possible in current browsers such as Firefox, Safari and Opera. However, if you are using lE, the table rows will not appear in the table. To make matters worse, IE doesn't even throw any errors or provide any clues as to why the table rows were indeed appended to the table but won't show up.
In this case, the solution is simple. IE allows the tr element to be added to the tbody element instead of directly to the table element. For example, if you define an empty table as follows:



The correct way to add rows to this table is to add rows to the table body rather than to the table, as shown below:
var cell=document.createElement("td").appendChild(document.createTextNode ("foo"));
vat row=document.createElement("tr").appendChild(cell);
document.getElementByld("myTableBody").appendChiid(row);
Thank you Yes, this method works on all current browsers, including IE. If you develop a habit of always using the table body in the table, you don't have to worry about this problem.
2 Styling elements through javascript
Using Ajax technology, web applications created by developers can communicate seamlessly with the server without requiring a complete page refresh. But for A1ax requests, this kind of page flickering will not occur, so users may not know that some data on the page has been updated. You may want to modify the styles of certain elements to indicate that some data on the page has changed. For example, if a stock's price has been updated seamlessly via an Ajax request, you can highlight the stock's name.
You can style an element through JavaScript using the element's setAttribute method. For example, you want to modify the text in the span element to be displayed in red and bold. You can use setAttribute therapy as follows:
var spanElement = document.getElementById("mySpan");
spanElement.setAttribute("style", "font-weight:bold; color:red;");
except IE, this method is feasible on other current browsers. For IE, the solution is to use the cssText property of the element's style object to set the desired style. Although this property is not standard, it is widely supported, as shown below:
var spanElement = document.getElementById("mySpan");
spanElement.style.cssText = "font-weight:bold; color: red;";
This method works well on IE and most other browsers, except Opera. To make the code portable across all current browsers, you can use both methods at the same time, that is, use both the setAttribute method and the cssText attribute of the element's style object, as follows:
var spanElement = document.getElementById ("mySpan");
spanElement.setAttribute("style", "font-weight:bold; color:red;");
spanElement.style.cssText = "font-weight:bold; color:red ;";
In this way, elements can be styled normally on all current browsers.
3. Set the class attribute of the element
After reading the previous section, you learned that you can set the inline style of the element through JavaScript. You may take it for granted that simply setting the element without element The class attribute should be the easiest. Sadly, not so. Similar to setting an element's inline style, there are some specificities when setting an element's class attribute dynamically via JavaScript.
As you may have guessed, IE is an outlier among current browsers, but the solution is quite simple. When using browsers such as Firefox and Safari, you can use the setAttribute method of the element to set the class attribute of the redundant element, as follows:
var element = document.getElementById("myElement");
element.setAttribute ("class", "styleC1ass");
The strange thing is that if you use the setAttribute method and specify the attribute name as class, IE will not set the class attribute of the element. On the contrary, IE will recognize the className attribute by itself when only using the setAttribute method. For this situation, the complete solution is: when using the setAttribute method of the element, use both class and className as attribute names, as follows:
var element = document.getElementById("myElement");
element.setAttribute("class", "styleC1ass");
element.setAttribute("className", "styleC1ass");
Currently, most browsers will use the class attribute name and ignore className. IE is just the opposite. .
4. Create input elements
Input elements provide users with a means to interact with the page. HTML itself has a limited set of input elements, including single-line text boxes, multi-line text boxes, select boxes, buttons, check boxes, and radio buttons. You may want to use JavaScript to dynamically construct such input elements as part of your Ajax implementation.
Single-line text boxes, buttons, check boxes and radio buttons can all be created as input elements, but the value of the type attribute is different. Selection boxes and text areas have their own unique markup. Dynamically creating input elements through JavaScript is easy (except for radio buttons, which are explained in the "Building Radio Buttons" section), as long as you follow a few simple rules. Select boxes and text areas can be easily created using the document.createElement method by simply passing the element's tagname, such as select or textarea, to document.cr
eateElement.
Single-line text boxes, buttons, check boxes and radio buttons are a little more difficult because they all have the same element name input, but the value of the type attribute is different. Therefore, to create these elements, you not only need to use the document.createElement method, but also later call the setAttribute method of the element to set the value of the type attribute. This is not difficult, but it does require an extra line of code.
When considering where to add the newly created input element to its parent element, you must pay attention to the order of document.createElement and setAttribute statements.In some browsers, the newly created element will be added to its parent element only if the element is created and the type attribute is set correctly. For example, the following code snippet may behave strangely in some browsers:
document.getElementById("formElement").appendChild(button);
button.setAttribute("type", "button");
To avoid strange behavior, make sure to set all attributes of the input element after creating it, especially the type attribute, and then add it to the parent element, as follows:
var button = document.createElement("input "):
button.setAttribute("type", "button");
document.getElementById("formElement").appendChild(button);
Follow this simple rule to help eliminate problems in the future Some problems that may arise that are difficult to diagnose.
Adding event handlers to five-way input elements
Adding an event handler to an input element should be as easy as using the setAttribute method and specifying the name of the event handler and the name of the desired function handler, Right? Wrong. The standard way to set an event handler for an element is to use the element's setAttribute method, which uses the event name as the attribute name and the function handler as the attribute value. As shown below:
var formElement = document,getElementById("formElement");
formElement.setAttribute("onclick", "doFoo();");
Except for IE, the above code works in all current browsers It can work in all devices. If you use JavaScript to set the event handler of an element in IE, you must use dot notation on the element to reference the required event handler, instead of assigning it to an anonymous function. This anonymous function needs to call the required event handler. As shown below:
var formElement = document,getElementById("formElement");
formElement.onclick = function() { doFoo(); };
Note how to reference from formElement through dot notation onclick event handler. The onclick event handler is assigned to an anonymous function, and this anonymous function just calls the required event handler. In this case the event handler is doFoo.
Fortunately, this technology is supported by IE and all other current browsers. So it is completely possible to dynamically set the event handler of the form element through JavaScript.
6. Create radio buttons
Always save the best for last. Dynamically creating radio buttons through JavaScript is cumbersome because the method of creating radio buttons in IE is very different from the method used by other browsers.
Except IE, all other browsers currently allow the creation of radio buttons using the following methods (these methods should be conceivable):
var radioButton = document.createElement("input");
radioButton.setAttribute( "type", "radlo");
radioButton.setAttribute("name", "radioButton");
radioButton.setAttribute("value", "checked");
This can be used in addition to IE Radio buttons are created in all current browsers except , and work fine. In IE, the radio buttons do show up. But we can't select it because clicking the radio button row doesn't select it as we expected. In IE, the method of creating radio buttons is completely different and not at all compatible with the method used by other browsers. For the radio button created previously, it can be created as follows in IE:
var radioButton = decument.createElement("name='radioButton' value='checked'>");
Fortunately, it is indeed possible to dynamically create radio buttons through JavaScript in IE, but it is more difficult and incompatible with other browsers.
How to overcome this limitation? The answer is simple, it requires some kind of browser-sniffing mechanism so that the script knows which method to use when creating the radio button. Fortunately, you don't have to check a ton of different browsers. Assuming only modern browsers are used, the script only needs to differentiate between IE and other browsers.
IE can recognize the special attribute of the document object named uniqueID, named uniqueID. IE is also the only browser that recognizes this attribute, so uniqueID is very suitable for determining whether the script is running in IE.
When using the docurnent.uniqueID attribute to determine which browser the script is running in, you can combine IE-specific methods with standards-compliant methods, which results in the following code:
if(document.uniqueID) {
//Internet Explorer
var radioButton = decument.createElement("name='radioButton' value='checked'>");
}
else {
//Standards Compliant
var radioButton = document.createElement("input");
radioButton.setAttribute("type", "radlo");
radioButton.setAttribute("name", "radioButton" ");
radioButton.setAttribute("value", "checked");
}