DOM(1)

DOM:Document  Object  Model
문서 객체는 DOM 핵심 객체
역할:html의 내용, 속성, 양식에 대한 조작
노드 트리에서 노드 간의 관계: 부자, 형제
DOM 일반 속성
1. title 속성: 현재 문서의 제목을 되돌려 주거나 설정합니다
2,all: 모든 원소의 집합을 되돌려줍니다
3. forms: 문서에 있는 모든form 대상의 인용을 되돌려줍니다
컬렉션을 통해 해당 객체에 액세스하려면 다음과 같이 하십시오.
1. 아래 첨자를 통과하는 방식
2. name을 통한 방법
DOM에 대한 질의 방법
1、document.getElementById(id);//지정한 id를 가진 (첫 번째) 대상의 인용을 되돌려줍니다
2、document.getElementsByTagName(tagName);//지정한 서명의 집합을 되돌려줍니다. 찾은 탭 이름이 하나라도 되돌려주는 것은 집합입니다
주: 위의 두 가지 방법은 호환성에 문제가 없습니다.
3、document.getElementsByName(name);//지정한 이름의 대상 집합을 되돌려줍니다 (호환성 문제)
참고: document.getElementsByName () 호환성 문제 때문에 폼에 주로 적용됨
4、document.write();페이지에 내용 인쇄
5、document.getElementsByClassName(className);//className이 지정한 이름을 가진 객체의 컬렉션을 반환합니다.호환성 문제 있음

function byClassName(sClassName){
	if(document.getElementsByName){// 
		return document.getElementsByClassName(sClassName);
	}else{
		// 
		var tag = document.getElementsByTagName('*');//* 
		var result = [];
		for(var i = 0 ; i < tag.length; i++){// 
			if(tag[i].className == sClassName){
				result.push(tag[i]);
			}
		}
		return result;
	}
}
console.log(byClassName('pink').length);

작업 내용
1. innerHTML: 대상의 시작과 끝 탭을 설정하거나 가져오는 데 사용한다(예를 들어div 프레임워크는div의 내용만 가져오고div의 내용은 가져오지 않는다) 내용(html 탭 식별)
2. innerText: 대상의 시작과 끝 탭에 있는 내용을 설정하거나 가져오는 데 사용합니다. (텍스트 내용만 가져옵니다.) (IE에 적용되며, 최신 버전의 불여우가 지원합니다.)
textContent는 대상의 시작과 끝 탭에 있는 내용을 설정하거나 가져오는 데 사용됩니다. (텍스트 내용만 가져옵니다.) (불여우, IE8 및 그 이하는 지원하지 않습니다.)
3. outerHTML은 본 대상을 포함한 시작과 끝 탭(예를 들어div 프레임워크는div의 내용을 가져올 뿐만 아니라div 자체의 내용을 가져올 수 있다)의 내용을 설정하거나 가져오는 데 사용된다(html 탭 식별).
4.outerText는 이 대상을 포함한 시작과 끝 탭의 내용을 설정하거나 가져오는 데 사용됩니다. (텍스트 내용만 가져오는 것) (불여우는 지원하지 않습니다.)
차이점:

  
  
  
  
       
　　//.innerHTML  
　　function innerHTMLDemo()  
　　{   
　　　test_id1.innerHTML="<i><u>  HTML.</u></i>";   
　　}   
　　//.innerText  
　　function innerTextDemo()  
　　{   
　　　test_id2.innerText="<i><u> .</u></i>";   
　　}   
　　//.outerHTML  
　　function outerHTMLDemo()  
　　{   
　　　test_id3.outerHTML="<font size=9pt color=red><i><u>  HTML  .</u></i></font>";   
　　}  
　　//.outerText  
　　function outerTextDemo()  
　　{   
　　　test_id4.outerText="<br></br><i><u> ( ) ( ) .</u></i>";   
　　}  
　　   
　　   
　　   
　　
   
　　
innerHTML .
   
　　
innerText .
   
　　
outerHTML .
   
　　
outerText .