JavaScript DOM 프로 그래 밍

DOM
DOM: 문서 개체 모델 (텍스트 개체 모델)

D: 문서 html 문서 또는 xml 문서

O: 대상 document 대상 의 속성 과 방법

M: 모델

DOM 은 xml (html) 을 위 한 트 리 기반 API 입 니 다.

DOM 트 리: 노드 (node) 의 차원.

DOM 은 하나의 문 서 를 가보 나무 (아버지, 아들, 형제)

로 표시 했다.

DOM 은 Node 의 인터페이스 와 여러 가지 노드 유형 을 정의 하여 XML 노드 의 여러 가지 측면 을 나타 낸다

노드 및 유형

원소 노드

속성 노드: 원소 의 속성 은 속성의 방식 으로 직접 조작 할 수 있다.

텍스트 노드: 요소 노드 의 하위 노드

예시





Insert title here

	//   HTML           window.onload  。
	window.onload = function () {
		//     button  ，        
		var btn = document.getElementsByTagName("button")[0];
		// btn onclick    :   button ，     
		btn.onclick = function(){
			//  helloworld
			alert("hello world");
		}
	}

원소 노드 가 져 오기

document. getElement ById: id 속성 에 따라 대응 하 는 단일 노드 (이 방법 은 document 대상 방법)

document. getElement sByTagName: 태그 이름 에 따라 지정 한 노드 집합 을 가 져 옵 니 다 (이 방법 은 Node 인터페이스 방법, 즉 모든 노드 에 이 방법 이 있 습 니 다)

document. getElementsByName: 노드 의 name 속성 에 따라 일치 하 는 노드 집합 을 가 져 옵 니 다 (HTML 요소 자체 가 name 속성 을 정의 하지 않 으 면 이 방법 으로 일부 브 라 우 저 에 효과 가 없 으 므 로 사용 할 때 신중 해 야 합 니 다)

예시



	
		
		
		<script type="text/javascript">
			//         .
			window.onload = function(){
				//1.  id bj     .
				var bjNode = document.getElementById("bj");
				alert(bjNode);
				
				//2.    li  .
				//             
				var liNodes = document.getElementsByTagName("li");
				alert(liNodes.length);
				
				var cityNode = document.getElementById("city");
				var cityLiNodes = cityNode.getElementsByTagName("li");
				alert(cityLiNodes.length);
				
				//3.  HTML       name              .
				var genderNodes = document.getElementsByName("gender");
				alert(genderNodes.length);
				
			}
		</script>
	
	
		
			<p>       ？</p>
			<ul id="city">
				<li id="bj" name="BeiJing">  </li>
				<li>  </li>
				<li>  </li>
				<li>  </li>
			</ul>
			
			<br/><br/>
			<p>         ？</p>
			<ul id="game">
				<li id="rl">  </li>
				<li>  </li>
				<li>    </li>
				<li>  </li>
			</ul>
			
			<br/><br/>
			gender:
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
		
	
</code></pre> 
  <h3 style="text-indent:0px;">      </h3> 
  <ol> 
   <li>            </li> 
   <li>           </li> 
   <li>             </li> 
  </ol> 
  <p><strong>   </strong></p> 
  <pre><code>

	
		<meta charset="UTF-8"/>
		<title/>
		<script type="text/javascript">
			
			//      ：      .               
			window.onload = function(){
				//             。
				//1.            
				var nameNode = document.getElementById("name");
				
				//2.             
				alert(nameNode.value);
				
				//3.         
				
				nameNode.value = "James";
			}
		</script>
	
	
			<p>       ？</p>
			<ul id="city">
				<li id="bj" name="BeiJing">  </li>
				<li>  </li>
				<li>  </li>
				<li>  </li>
			</ul>
			
			<br/><br/>
			<p>         ？</p>
			<ul id="game">
				<li id="rl">  </li>
				<li>  </li>
				<li>    </li>
				<li>  </li>
			</ul>
			
			<br/><br/>
			name: <input type="text" name="username" id="name" value="David"/>
	

</code></pre> 
  <h3>          </h3> 
  <ol> 
   <li>      。</li> 
   <li> childNodes                。</li> 
   <li>            </li> 
   <li>                      </li> 
  </ol> 
  <p><strong>   </strong></p> 
  <pre><code>

	
		<meta charset="UTF-8"/>
		<title/>
		<script type="text/javascript">
			
			//          
			window.onload = function(){
				//1.  city   
				var cityNode = document.getElementById("city");
				
				//2. childNodes                。
				//   9 （                ）
				//      。
				alert(cityNode.childNodes.length);
				//3.  city     li   。
				var cityNodes = cityNode.getElementsByTagName("li");
				alert(cityNodes.length);
				
				//4.                      
				alert(cityNode.firstChild);
				alert(cityNode.lastChild);
			}
		</script>
	
	
			<p>       ？</p>
			<ul id="city">
				<li id="bj" name="BeiJing">  </li>
				<li>  </li>
				<li>  </li>
				<li>  </li></ul>
			
			<br/><br/>
			<p>         ？</p>
			<ul id="game">
				<li id="rl">  </li>
				<li>  </li>
				<li>    </li>
				<li>  </li>
			</ul>
			
			<br/><br/>
			name: <input type="text" name="username" id="name" value="David"/>
	

</code></pre> 
  <h3>      </h3> 
  <ol> 
   <li> <p>             。</p> </li> 
   <li> <p>  firstChild      。</p> </li> 
   <li> <p>         nodeValue           。 </p> </li> 
  </ol> 
  <p><strong>   </strong></p> 
  <pre><code>

	
		<meta charset="UTF-8"/>
		<title/>
		<script type="text/javascript">
			
			//      
			window.onload = function(){
				//               。
				//1.              。
				var bjNode = document.getElementById("bj");
				
				//2.   firstChild      。
				var bjTextNode = bjNode.firstChild;
				
				//3.          nodeValue           。
				alert(bjTextNode.nodeValue);
				
				bjTextNode.nodeValue = "  ";
				
				//alert(bjTextNode)
				
			}
		</script>
	
	
			<p>       ？</p>
			<ul id="city">
				<li id="bj" name="BeiJing">  </li>
				<li>  </li>
				<li>  </li>
				<li>  </li></ul>
			
			<br/><br/>
			<p>         ？</p>
			<ul id="game">
				<li id="rl">  </li>
				<li>  </li>
				<li>    </li>
				<li>  </li>
			</ul>
			
			<br/><br/>
			name: <input type="text" name="username" id="name" value="David"/>
	

</code></pre> 
  <p> </p> 
 </div> 
</div>
                            </div>
                        </div>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

기초 정리 - 1

문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

JavaScript DOM 프로 그래 밍

좋은 웹페이지 즐겨찾기