21st Lesson: Property Module 2

The previous lesson focused on the concept of attributes, usage, the difference between intrinsic and custom attributes, the method of class attribute manipulation, and so on, which focuses on compatibility issues with attribute operations.

Ie6-ie8 in some of the properties that represent the URL will return the completion of the modified encoding path, such as: Href,action,background,cite,data,src,url and so on. We only need to use GetAttribute (href,2), we can be very good compatible with a variety of browsers. The second parameter is not supported by the standard browser, so the second parameter is ignored. While IE supports the second parameter, 2 means that only the value of the original string is fetched.

Ie6-7, for a FORM element, call GetAttribute to take the property value, which takes its child element input (id value or input with the name value equal to the property value). As an example:

<form action= "#" >

<input id= "Action" >

<input name= "Length" >

</form>

var el = document.getelementsbytagname ("form") [0];

El.getattribute ("action"); will be taken to <input id= "action" >,ie6-7

El.getattribute ("Length"); <input name= "Length" >,ie6-7

For Boolean attributes, such as CHECKED,IE6-IE8, you cannot get user presets (<input type= "Radio" checked= "Chaojidan" >), either through Elem.getattribute (" Checked "), plus the second parameter 2, or elem.checked, will not get" Chaojidan ".

The NodeType of the comment node equals 8.

The value problem of TabIndex

The TabIndex property specifies the tab control order of an element when the TAB key is used for navigation. <element tabindex="number" >,number The tab control order of the specified elements (1 is the first one). TabIndex is only valid for form elements and links by default, and for these elements, if you do not explicitly set TabIndex, it returns 0 for the standard browser, and 1 for the Div, which does not support the TabIndex property by default. But Ie6-8 returns 0.

There is a problem with the selected value of the option element under Safari, you must first access its parent node select element to get the result.

In Chrome, if you delete the intrinsic attribute from the prototype (delete operator), it will cause an error in the next assignment.

IE7 cannot modify the Type property of a FORM element.

Here's how to determine whether an element's property is a Boolean property:

function Isboolattr (node,prop) {

var isbool = typeof Node[prop] = = = "Boolean" && typeof Defaultprop (node,prop) = = = "Boolean";

If the attribute value of an element is a Boolean type, it proves that it has a chance to be a Boolean property. (also exclude the case where the user enforces node[prop]=true (false), which is not the default for the element, but the user forces the assignment)

return isbool;

}

function Defaultprop (node,prop) {

Return document.createelement (Node.tagname) [prop]; Create a new node element, and then determine whether the prop property of the new nodes is a Boolean type.

}

IE6-IE8 has an href attribute of the bug, the example of the book did not understand, go directly to http://gabriel.nagmay.com/2008/11/javascript-href-bug-in-ie/to see, my understanding is:

<a href= "http://www.google.com" >google.com</a>//fine-changing href won't change text
<a href= "http://www.google.com" >http://www.google.com</a>//bad-changing href would change the inner HTML te Xt

Address = "@pcc. edu addresses"

$ (this). attr ("href", "http://www.pcc.edu/resources/web/forms/email/?to=" +address);

The above code means that when the value of the href attribute of a link is the same as the text value of a link, when you change the value of the href attribute, the text value is replaced.

Workaround:

(1) text is not the same as the value of the href, it is OK. (We need to refer to the following explanation, in fact, if there is no tag element in text, at the same time, the beginning of the www., or contains the @ character, will cause the above problem, the solution here is only for the above example of the special case, such as: google.com not equal to http://www.google.com)

(2) When we replace the href, we use the relative address on the line. $ (this). attr ("href", "/resources/web/forms/email/?to=" +address); (here only the text is the same as the href, not the text of a link does not have a tag element, At the same time, starting with www. or containing the @ character)

(3) var linkhtml = $ (this). html (); Remove the value of text first, $ (this). attr ("href", "http://www.pcc.edu/resources/web/forms/email/?"). To= "+address"). HTML (linkhtml); Replace the href and revert to the original text value. (There is also a problem here, if the <a> element may not be a text, but a , and this bound event, then, the InnerHTML write back, will generate a new node, the original bound event will be invalidated.) ）

Masaki's book has another href attribute bug, under Ie6-8, link address: http://oldj.net/article/ie-bug-at-href-innerhtml/, my understanding is:

<a id= "A-test" href= "http://www.taobao.com" > Links @baby</a>

SetTimeout (function () {
var a = document.getElementById ("A-test");
A.href = "http://rate.taobao.com/";

}, 3000);

When the page opens, the link content is "link @baby", everything is OK, but when the JS function executes, modifies the <a> element's href attribute, its InnerHTML value also becomes the same value (http://rate.taobao.com/). In addition to assigning values directly to A.href, using the A.setattribute method is the same effect.

Workaround:

var a = document.getElementById ("A-test"), S;
s = a.innerhtml; Write down InnerHTML first.
A.href = "http://rate.taobao.com/";
a.innerhtml = s; and write back the value of InnerHTML.

The above kind of first write down the value of InnerHTML, modify the href and then write it back to the practice is a hidden danger. For example, the,<a> element may not be a text, but a , and this bound event, then, the InnerHTML write back, will generate a new node, the original binding event will be invalidated.

A better approach is to add a half-width space before the value of the href to be written, and the modern browser safely ignores extraneous whitespace characters before and after the href value. That

A.href = "" + "http://rate.taobao.com/";

Or:

A.href = "http://rate.taobao.com/"; Note the preceding space

There are too many side effects to add a space in front of the href, and finally decide to use a <b></b> node before deleting the method.

var b,
inner_html = anchor.innerhtml;
if (inner_html && inner_html.indexof ("<") = =-1) {//If a link has a value, and its innerhtml does not have a label (child element node), a child node is created
b = Doc.createelement ("B");
B.style.display = "None";
Anchor.appendchild (b);
}
anchor.href = href;

if (b) {
Anchor.removechild (b);
}

The above code means: If the value of the A tag contains other element nodes, then changing its href attribute value will not change the value of the a tag.

Further testing found that if a tag does not have child elements, the content of the <a> link (value) with "www." At the beginning, there will also be this problem.

Summing up all the discussions above, get Chaojidan's conclusion:

In the case where a tag has no child elements, it is usually shaped like an e-mail message (containing the "@" character) or a Web address ("www.") The string that begins with this behavior in IE6/7/8. Also, this behavior occurs if the HREF attribute value of a link is the same as the text value of a link.

The above belongs to the super pervert, understand on the line.

Operation of Value

The select element whose value is the value of the option child to which it is selected. However, select has two forms. One type is Select-one, and one is select-multiple. The option element, which is the value of the Value property, can be used to make the values of the literal. When the user does not explicitly set the Value property, it can use the values of its text. The text can be either used in the innerHTML, or both, but the Text property of the option element will be trim to support all browsers. But only the old version of IE, in innerHTML will do trim operation, standard browser will not. How to determine if option set the Value property, ie6-7 can use specified, standard browser use Hasattribute to determine, specific operation please see a lesson.

button, its value under Ie6-7 is to take its text,ie8 and above the IE browser will take the Value property. Standard Browser, button tag the value of its Value property is submitted only if it is a submit button (type = submit) and the button is clicked.

Under Safari5, if select is set to disable, then all of its children are disable.

The Value property of the checkbox defaults to on, and only Chrome is an empty string.

In older versions of IE, option in select does not change to the default selected value after the form reset. For example: By default, the first option of select has the selected property, which means that the first option is displayed in select. When you have done this, turn the second option into selected, when the second option is shown in select. When you click the Reset button, the default value is restored. In the older version of IE, option in select does not assign the selected value to the first option, restoring the default. Instead of making any changes, it's a second option. However, other browsers will revert to the default values, which are displayed in the first option.

Come on!

21st Lesson: Property Module 2