JavaScript 에서 요 소 를 가 져 오 는 방법

4358 단어 JavaScript
페이지 요 소 를 가 져 오 는 방법 1. js 의 dom 방법: 내 장 된 대상 document 의 getElement ById 방법 으로 페이지 에 id 속성 을 설정 한 요 소 를 가 져 올 수 있 습 니 다. html 대상 을 가 져 온 다음 변 수 를 할당 할 수 있 습 니 다. 페이지 요 소 를 가 져 오 려 면 요 소 를 가 져 온 코드 블록 을 이벤트 에 두 어야 합 니 다. javascript 을 요소 위 에 쓰 면,페이지 에서 위 에서 아래로 실 행 된 javascript 이 페이지 에 요소 div 1 을 가 져 올 때 요소 div 1 을 불 러 오지 않 았 기 때문에 해결 방법 은 두 가지 가 있 습 니 다. (1) 자바 script 문 구 를 window. onload 가 촉발 하 는 함수 에 넣 고 요 소 를 가 져 오 는 문 구 는 페이지 에 불 러 온 후에 실 행 됩 니 다.
주: 속성의 조작 은 속성의 읽 기와 쓰 기 를 포함한다.속성 을 조작 하 는 방법 1. "." 조작 2. "[]" 조작 속성의 표기 법 1. html 의 속성 은 js 안의 속성 표기 법 과 같 습 니 다. 2. "class" 속성 은 "className" 3, "style" 속성 안의 속성 으로 쓰 고 가로 줄 이 있 는 것 은 낙타 봉 식 으로 바 꿉 니 다. 예 를 들 어 "font - size" 를 통 해 "style. font Size" 로 바 꿉 니 다. "조작 속성:" [] "를 통 해"작업 속성:

	window.onload=function(){
		var div=document.getElementById('div1');
//		alert(div);//     [object HTMLDivElement]
		div.style.width=200+'px';
		div.style.height=200+'px';
		div.style.background='red';
//		div.style.border='5px dashed black';//      
		div.style.borderWidth=5+'px';
		div.style.borderColor='red';
		div.style.borderStyle='dashed';
//		     div  (innerHTML innerTEXT)
		var divContent=div.innerHTML;//          (      HTML    )
		alert(divContent);//      Hello JavaScript<p>   </p>
//		var divContent=div.innerText;//         
//		alert(divContent);
	}


		
Hello JavaScript


(2): 자 바스 크 립 트 를 페이지 맨 아래 에 놓 기 (body 에 쓰기)



	
			

	
		<div class="div1" id="div1">Hello JavaScript<p>   </p></div>
		<script type="text/javascript">
			window.onload=function(){
				var div=document.getElementById('div1');
//				alert(div);        : [object HTMLDIVElement]
				div.style.width=200+'px';
				div.style.height=200+'px';
				div.style.background='red';
//				div.style.border='10px dashed black';
				div.style.borderColor='black';
				div.style.borderWidth=10+'px';
				div.style.borderStyle='dashed';				
//				     div  
//				innerHTML:           (      html   )
				var divContent =div.innerHTML;		
//				innerText:            
				var divContent=div.innerText;
//				alert(divContent);
//				var divWidth=div.innerWidth;
//				alert(divWidth);
				div.innerHTML='<a href="#">   </a>       '
//			}
		</script>
	

</code></pre> 
  <p><strong>2.  getElementsByclassName()     class    <br/>   getElementsByClassName()           ,                  </strong></p> 
  <pre><code>


	
		<meta charset="UTF-8"/>
		<title/>
		<script type="text/javascript">
			window.onload=function(){
//				               div
				var div=document.getElementsByClassName('div1')[1];
//				alert(div);
				div.style.width=200+'px';
				div.style.height=200+'px';
				div.style.background='red';	
			}
		</script>
	
	
		<div class="div1"/>
		<div class="div1"/>
	

</code></pre> 
  <p><strong>3.  getElementsByTagname():            (        ,    *            ) </strong></p> 
  <pre><code>

<div id="div1">        <p>     </p></div>
<div id="div1">        <p>     </p></div>
<div id="div1">        <p>     </p></div>
<script type="text/javascript">
   var div=document.getElementsByTagName('*').innerHTML;
   alert(div1);
</script>
</code></pre> 
  <p><strong>innerHTML innerText   :</strong></p> 
  <p><strong>   :innerHTML innerText           。<br/>    :(1)innerHTML:                     ,  Html  。<br/>               (2)innerText:             ,     Html  </strong></p> 
  <p><strong>innerHTML   W3C     , innerText    IE   ,  ,       innerHTML,</strong><br/>  </p> 
 </div> 
</div>
                            </div>
                        </div>

좋은 웹페이지 즐겨찾기