Dom manipulation of JavaScript

Dom operations in JavaScript can be said to be the most frequently used and most important content, using jquery can be very easy to manipulate the DOM, of course, the original JavaScript operation Dom also need to master.

First, let's look at how we manipulate the DOM in jquery and native JavaScript.

1 creating nodes (including actions for text, attributes, and so on)

1) Create a node

2) Insert Node

3) Set (Get Properties)

Elementobject.value

Elementobject.getattribute (' value ') elementobject.setattribute (' value ', ')

4) The content between elements

1 InnerHTML//Get the content between nodes, including child nodes, etc.

2 InnerText//Get text between the text and get the content only

First, the use of JS to manipulate the syntax of CSS properties

1. For CSS attributes that do not have an underscore, use the style directly. Property name.

such as: obj.style.margin,obj.style.width,obj.style.left,obj.style.position

2. For CSS attributes that have an underscore, remove each of the dashes and change the first character after each one to uppercase.

such as: obj.style.margintop,obj.style.borderleftwidth,obj.style.zindex,obj.style.fontfamily, etc.

3, JS operation CSS Float property of the special wording

Because float is a reserved word for JavaScript, we cannot use obj.style.float directly, so the operation is not valid. The correct way to use it is: IE:obj.style.styleFloat, other browsers Mozilla (Gecko), FF, etc. with StyleFloat:obj.style.cssFloat.

Second, use JS to get CSS property values

1. Get in-line Style:obj.style. The property name. <div id= "Css88" class= "ss" style= "width:200px; height:200px; Background: #333333 ">js get CSS Property value </div> cannot access class.

2. Get CSS properties within class and outside of link: the obj.currentstyle["attribute name" method is used in IE, and FF is the getComputedStyle method

C. Use JS to assign values to CSS properties

1. Assignment Class attribute

Assignment: document.getElementById (' Ceil '). ClassName = "Class1";

If it has multiple values: document.getElementById (' Ceil '). ClassName = "Class1 class2 class3";

2. Obj.style.cssText set CSS style for an object

document.getElementById (' navition '). Style.csstext = "Your CSS code";

Dom manipulation of JavaScript