Summary of common methods for operating elements in javascript

This article describes common methods of using JavaScript to operate elements. Share it for your reference, as follows:

Get element method one

You can use the getElementById method on the built-in object document to get the element with the id attribute set on the page. You get an html object and then assign it to a variable, such as:

<script type="text/javascript">
  var oDiv = ('div1');
</script>
....
<div >This is adivelement</div>

If the above statement is written on the element, an error will occur because the executed page is loaded from top to bottom. When JavaScript gets element div1 on the page, element div1 has not been loaded yet. There are two solutions:

The first method: put javascript at the bottom of the page

....
<div >This is adivelement</div>
....
<script type="text/javascript">
  var oDiv = ('div1');
</script>
</body>

The second method: put the javascript statement into the triggered function, and the statement that obtains the element will be executed only after the page is loaded, and there will be no errors.

<script type="text/javascript">
   = function(){
    var oDiv = ('div1');
  }
</script>
....
<div >This is adivelement</div>

Get element method two

You can use the getElementsByTagName method on the built-in object document to get a certain tag on the page. It is a selection set, not an array, but you can use the subscript to manipulate the tag elements in the selection set.

<script type="text/javascript">
   = function(){
    var aLi = ('li');
    // = 'gold'; // An error occurred!  Cannot set multiple lis at the same time    alert();
    aLi[0]. = 'gold';
  }
</script>
....
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Operation element properties

The obtained page element can operate on the attributes of the page element, and the operation of the attribute includes reading and writing of the attributes.

Methods for operating properties

1. "." Operation
2. "[ ]" operation

Attribute writing

1. The properties of html are the same as those of js.
2. The "class" attribute is written as "className"
3. The properties in the "style" attribute, if there are horizontal bars, it will be changed to camel style, such as: "font-size", it will be changed to ""

Operation properties via "."

<script type="text/javascript">
   = function(){
    var oInput = ('input1');
    var oA = ('link1');
    // Read property values    var sValue = ;
    var sType = ;
    var sName = ;
    var sLinks = ;
    // Write (set) attributes     = 'red';
     = sValue;
  }
</script>
......
<input type="text" name="setsize"  value="20px">
<a href="" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Chuanzhi Podcast</a>

Operation properties via "[ ]":

<script type="text/javascript">
   = function(){
    var oInput1 = ('input1');
    var oInput2 = ('input2');
    var oA = ('link1');
    // Read properties    var sVal1 = ;
    var sVal2 = ;
    // Write (set) attributes    // .val1 = val2; no response    [sVal1] = sVal2;    
  }
</script>
......
<input type="text" name="setattr"  value="fontSize">
<input type="text" name="setnum"  value="30px">
<a href="" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Chuanzhi Podcast</a>

innerHTML

innerHTML can read or write content wrapped in tags

<script type="text/javascript">
   = function(){
    var oDiv = ('div1');
    //Read    var sTxt = ;
    alert(sTxt);
    //Write     = '<a href="" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Chuanzhi Podcast<a/>';
  }
</script>
......
<div >This is adivelement</div>

Interested friends can use itOnline HTML/CSS/JavaScript code running tool：http://tools./code/HtmlJsRunTest the above code running effect.

For more information about JavaScript, please view the special topic of this site: "Summary of JavaScript DOM skills》、《Summary of JavaScript page element operation skills》、《A complete collection of operations and techniques related to JavaScript events》、《Summary of JavaScript search algorithm skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript Errors and Debugging Skills》

I hope this article will be helpful to everyone's JavaScript programming.