JavaScript acquire common method of page elements

 

 

1, by acquiring the elements tag returns an array

  document.getElementsByTagName Li = var ( 'Li'); // label acquisition element

  li [0] .innerHTML; // view the contents of an Element

  Li [0] = .innerHTML "Content"; // modify the contents of the acquired tag  

2, access to page elements by id

  document.getElementById header = var ( "header"); // Get element ID

3, access to page elements by class name

  List document.getElementsByClassName = var ( 'List'); // Returns an array, to access the text by the subscript

4, access to page elements by way of CSS selectors

  // querySelector: return the right first
  var str = document.querySelector ( 'li' );

  document.querySelectorAll str1 = var ( 'li'); // return all, each li is an object

. 1  <! DOCTYPE HTML > 
2  < HTML lang = "ZH-CN" > 
. 3  < head > 
. 4      < Meta charset = "UTF-. 8" > 
. 5      < title > the JavaScript common method of obtaining a page </ title > 
. 6      < Script > 
7              // 1, acquired by the tag elements returns an array 
. 8              var Li = document.getElementsByTagName ( ' Li ' );
. 9              
10              // 2, acquired by the page element ID 
. 11              varheader = document.getElementById ( " header " );
 12 is  
13 is              // . 3, page acquired by the class name of the element 
14              var List = document.getElementsByClassName ( ' List ' ); // Returns an array, indexed access through the text 
15  
16              / / 4, obtaining a page element by way CSS selectors 
. 17              // querySelector: returns the first qualifying 
18 is              var STR = document.querySelector ( ' Li ' );
 . 19              // querySelectorAll: a return each qualifying 
20 is              var str1= document.querySelectorAll('li');
21     </script>
22 </head>
23 <body>
24     <p id="header">JavaScript学习</p>
25     <ul class="list">
26         <li>HTML</li>
27         <li>jQuery</li>
28         <>liJavaScript</li>
29     </ul>
30     <ul class="list">
31         <li>HTML</li>
32         <li>jQuery</li>
33         <li>JavaScript</li>
34     </ul>
35 </body>
36 </html>

 

Guess you like

Origin www.cnblogs.com/xiaozhou223/p/11184238.html