JS manipulating DOM elements

There are two ways to modify the properties of a DOM object:
"." Operators and GetAttribute (SetAttribute) methods.
The difference is as follows:

HTML code
1.[div id= "Test" class= "CLS" dir= "ltr" title= "Wott" ss= "SS"][/div]
[Div id= "test" class= "CLS" dir= "ltr" title= "Wott" ss= "SS"] [/div]

JS Code
1.var e = document.getElementById ("test");
2.//Getting properties
3.//use. To reference, it must be built-in (IE can access custom attributes), and when referenced, it is case-sensitive.
4.alert (e.id);//"Test"
5.alert (e.classname);//"CLS"
6.alert (E.SS);//undefined (ie "ss");
7.
8.//is referenced with getattribute and can access custom attributes, not case sensitive.
9.alert (E.getattribute ("id"));//"Test"
10.alert (E.getattribute ("ID"));//"Test"
11.//Note Browser differences
12.alert (E.getattribute ("class"));//"CLS" (Firefox)
13.alert (E.getattribute ("ClassName"));//"CLS" (IE)
14.
15.alert (E.getattribute ("SS"));//"SS"
16.
17.//Setting properties
18./* use. Both operators and setattribute can. However, for custom properties, properties that are set using the. operator cannot be obtained through getattribute and vice versa. */
19.e.setattribute ("ABC2", "ABC2");
20.E.ABC3 = "ABC3";
21st.
22.e.title1 = "ABC";
23.alert (E.getattribute ("Title1"));//null
var e = document.getElementById ("test");
Get Properties
Use. To reference, it must be built-in (IE can access custom attributes), and when referenced, it is case-sensitive.
alert (e.id);//"Test"
alert (e.classname);//"CLS"
alert (E.SS);//undefined (ie "ss");

With GetAttribute, you can access custom properties that are not case sensitive.
Alert (E.getattribute ("id"));//"Test"
Alert (E.getattribute ("ID"));//"Test"
Note Browser differences
Alert (E.getattribute ("class"));//"CLS" (Firefox)
Alert (E.getattribute ("ClassName"));//"CLS" (IE)

Alert (E.getattribute ("SS"));//"SS"

Setting properties
/* use. Both operators and setattribute can. However, for custom properties, properties that are set using the. operator cannot be obtained through getattribute and vice versa. */
E.setattribute ("ABC2", "ABC2");
E.ABC3 = "ABC3";

E.title1 = "ABC";
Alert (E.getattribute ("Title1"));//null

For style,classname settings, the. Operator is usually used to implement the

JS Code
1.el.style.backgroundcolor = "Blue";
2.el.classname = "NAV";//works in all browers.
El.style.backgroundColor = "Blue";
El.classname = "NAV";//works in all browers.

HtmlElement is inherited from element (inherited from node) and therefore has a attributes object, and access to the property can be done through it. The attributes object uses a NAMEDNODEMAP structure to hold the data, and NamedNodeMap itself is a "live" object, and the NamedNodeMap object is composed of attr node objects (NodeType = 2). It has the following methods:
getNamedItem (name)-Returns a Attr object named name.
RemoveNamedItem (name)-Removes the Attr object named name.
SetNamedItem (node)-Adds a attr object.
Item (POS)-Gets the Attr object for the POS, therefore.

JS manipulating DOM elements