JavaScript 05操作DOM対象添削調査

17327 ワード
javascript dom js。
DOMオブジェクトの操作
DOM:ドキュメントオブジェクトの種類
ブラウザのウェブページはDOMツリー構造です.
  • は、DOMノード
    • を更新する.
  • は、DOMノードを巡回する:DOMノード
    • を得る.
  • は、DOMノード
    • を削除する.
  • に新しいノード
    • を追加する.
    DOMノードを得る
    DOMノードを操作するには、まず彼を獲得しなければなりません.
    
  <h1>title 1 h1>
	
    p1p>
	
    p2p>
div>


<script>
  //   css   
  //      
  var h1 = document.getElementsByTagName('h1');
	var p1 = document.getElementById('p1');
	var p2 = document.getElementsByClassName('p2')
	var father = document.getElementById('father');

	var childrens = father.children; //       	      
	// father.lastChild
	// father.firstChild
script>
 
  
        ，    jquery  
     
  
     
  
        
     
  
    

div>

<script>
  var id1 = document.getElementById('id1');
script>
 
  
        
     
  
       
   
    •  
      id1.innerText = 'zzp'       
       
      •  
   
    •  
      id1.innerHTML = '123'     HTML    
       
      •  
  
     
  
      JS
     
  
    id1.style.color = 'yellow';
id1.style.frontSize = '20px'; //     
id1.style.padding = '2em';

    ノードを  
    ノードを  するステップ: ノードを に  し、 ノードを じて  を  する.
    
  <h1>title 1 h1>
	
    p1p>
	
    p2p>
div>

<script>
  var self = document.getElementById('p1');
	var father = p1.parentElement;
	father.removeChild(p1)

  //           
  father.removeChild(father.children[0]);
  //           ，                  
script>
 
  
        
     
  
           Dom  ，    Dom     ，    innerHTML         ，      Dom        ，       ，           
     
  
     
  
      ：append
     
  
           
     
  
    javascriptp>

    
  
    javesep>
  
    javaeep>
  
    javamep>
div>

<script>
  var
  		js =  document.getElementById('js'),
      list = document.getElementById('list');
  list.appendChild(js); //   
script>
 
  
            ，    
     
  
    <script>
  var
  		js =  document.getElementById('js'), //       
      list = document.getElementById('list');

  //   js        
  var newP = document.createElement('p'); //     p  ;
  newP.id = 'newP';
  newP.innerText = 'hello, zp'
  list.appendChild(newP)
  
  //         (      ，        )
  var myScript = document.createElement('script');
  myScript.setAttribute('type','text/javascript')
script>

    <script>
  var body = document.getElementsByTagName('body');
  // way 1
  //body[0].setAttribute('style','background-color:wheat')
  // way 2
  //body[0].style.background = '#123'

  // way 3   style  
  var myStyle = document.createElement('style');
  myStyle.setAttribute('type','text/css');
  myStyle.innerHTML = 'body{background-color:green}';
  document.getElementsByTagName('head')[0].appendChild(myStyle);
script>

    インセンス
    var javaee = document.getElementById('javaee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// list: parent node insertBefore(newNode,targetNode)
list.insertBefore(js,javaee);
//  js   javaee   （ list ）


    ＜div id=「right-1」class=「col-lg-12 col-sm-4 col-xs-4 ad」


    ＜div id=「right-2」class=「col-lg-12 col-sm-4 col-xs-4 ad」


    ＜div id=「right-3」class=「col-lg-12 col-sm-4 col-xs-4 ad」




    javascriptは方法を遍歴して総括します.