Instructions for developing cross-browser JavaScript methods_javascript skills

IE is a different breed of current browsers, but the solution is quite simple. When browsing with Firefox and Safari, you can use the setArribute method of the element to set the class attribute of the element

Developing cross-browser JavaScript

1. The difference between childNodes in ff and ie.

The nodes (nodeType = 1) in ff are all separated by textNode (nodeType = 3), but this is not the case in ie/op.

content

Under ff, box1 has 3 childNodes, and under ie 1.

2. Set the style class name of a node object.

To set the class of a certain node in ie, use "className" as attr to set or get.

ff and other browsers use "class" as attr to set or get.

Code:

if(typeof node1.getAttribute("className") == "string") {

.

}

3. Set the style content of a node object.

Take the

code directly as an example:

var oStyle = oNode.getAttribute("style");

// ie

if(oStyle == "[object]") {

oStyle.setAttribute("cssText", strStyle);

oNode.setAttribute("style", oStyle);

} else {

oNode.setAttribute("style", strStyle);

}

4. Event object.

ie use event

ff use evnt

5. Event action object

ie use objEvent.srcElement

ff use objEvent. target

This is related to xml file writing. Set IE's preserveWhiteSpace to true and take a look. The following is the code taken from Microsoft's documentation
:

var xmlDoc = new ActiveXObject(" Msxml2.DOMDocument.4.0");

xmlDoc.async = false;

xmlDoc.preserveWhiteSpace = true;

xmlDoc.load("books.xml");

alert(xmlDoc.xml);

xmlDoc.async = false;

xmlDoc.preserveWhiteSpace = false;

xmlDoc.load("books.xml ");

alert(xmlDoc.xml);

-----------------------

1. Append rows to the table:

The document.createElement and document.appendChild methods make it easy to append rows to the table or create a new table containing table rows from scratch: Use document.createElement to create a table , use the document.appendChild method to add these table cells to table rows; then use document.appendChild to add table rows to the table.

IE allows tr elements to be added to tbody instead of directly to table.







The correct way to add rows to this table is to add rows to the table body instead of to the table, as shown:

var cell=document.createElement("td").appendChild (document.createTextNode("foo");

var row = document.createElement("tr").appendChild(cell);

document.getElementById("mysqlTableBody").appendChild( row);

Fortunately, this method is common in all current browsers, including IE. If you make a habit of always using the table body, you don't have to worry about this problem.

2 Set the style of the element through Javascrīpt

You can use the setAttribute method of the element to set the style of the element. For example, if you want to modify the text in the span element to be displayed in red bold, you can. Use the setAttribute method as follows:

var spanElement = document.getElementById("mySpan");

spanElement.setAttribute("style","font-weight:bold; color: red;") ;

Except for IE, this method is currently available on other browsers. For IE, the solution is to use the cssText attribute of the element's style object to set the desired style, although this attribute is not standard , but widely supported, as follows:

var spanElement = document.getElementById("mySpan");

spanElement.style.cssText = "font-weight:blod; color: red;";

This method works well on IE and most other browsers, except Opera. To make the code portable on all current browsers, use both This method is to use both the setAttribute method and the cssText attribute of the style object, as shown below:

var spanElement = document.getElementById("mySpan");

spanElement.setAttribute ("style","font-weight:bold ; color: red;");

spanElement.style.cssText = "font-weight:blod ; color:red;";

3 Set the class attribute of the element

IE is a different type of current browser, but the solution is It is also quite simple. When browsing using Firefox and Safari, you can use the setArribute method of the element to set the class attribute of the element, as shown below:

var element = document.getElementById("myElement");

element.setAttribute("class","styleClass");

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 element's setAttribute method, use both class and className as attribute names, as shown below:

var element = document.getElementById ("myElement");

element.setAttribute("class","styleClass");

element.setAttribute("className","styleClass");

Currently, most browsers use the class attribute name and ignore className. IE is just the opposite.

4 Create input elements

Input elements provide users with a means of page interaction. HTML itself has a limited set of input elements, including single-line text boxes, multi-line text boxes, select boxes, select Boxes, buttons, checkboxes and buttons. You may want to use Javascript to dynamically create such input elements as part of an 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, and it is easy to dynamically create input elements through Javascript (except for radio buttons), as long as you follow some simple rules. Select boxes and text areas can be easily created using the document.createElement method. Simply pass the element's tagname, such as select or textarea, to document.createElement.

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. It's 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, a newly created element is 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, be sure to set all its attributes when creating the input element, especially the type attribute, as follows:

var button = document.createElement( "input");

button.setAttribute("type","button");

document.getElementById("formElement").appendChild(buttion);

Following this simple rule will help eliminate some difficult-to-diagnose problems that may arise later.

5. Adding an event handler to an input element

Adding an event handler to an input element should be as easy as using the setAttribute method and specifying the name of the event routine and the name of the required function routine, for ? wrong. The standard way to set an event handler for an element is to use the element's setAttribute method, which takes the event name as the attribute name and the function handler as the attribute value, like this:

var formElement = document.getElementById( "formElement");

formElement.setAttribute("onclick","doFoo();");

Except IE, the above code will work in all current browsers, if When using Javascript to set the event handler in IE, you must use dot notation for the element to reference the required event handler, and assign it to an anonymous function. This anonymous function calls the required event handler, as shown below :
var formElement = documentgetElementById("formElement");

formElement.onclick = function(){ doFoo(); };

Fortunately, this technique has been adopted by IE and all other current browsers support it, so it's entirely possible to dynamically set event handlers for form elements via Javascript.

6 Create radio buttons

Except for IE, all other browsers currently allow the following methods to be used to create radio buttons (these methods should be conceivable);

var readioButtion = document.createElement("input");

readioButtion.setAttribute("type","radio");

readioButtion.setAttribute("name","radioButtion");

readioButtion.setAttribute("value","checked") ;

This will create radio buttons in all current browsers except IE and will work fine. In IE, the radio button does appear, but it cannot be selected because clicking the radio button does not select it as we expected. The method of creating single-line buttons in IE 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 radioButtion = document.createElement("" );

This requires some kind of browser-sniffing mechanism. IE can recognize a special attribute of the document object named uniqueID, named uniqueID. IE is also the only browser that recognizes this attribute, so uniqueID is suitable for determining whether the script is running in IE.

When using the document.uniqueID attribute to determine which browser the script is running in, you can combine IE-specific methods with standards-compliant methods, and you will get the following code:

if(document .uniqueID){

//Internet Explorer

var radioButtion = document.createElement("") ;

}

else{

//Standards Compliant

var readioButtion = document.createElement("input");

readioButtion.setAttribute("type","radio");

readioButtion.setAttribute("name","radioButtion");

readioButtion.setAttribute("value","checked") ;

}