JS_Basic 지식의 문서 속성 및 방법 요약
- WBOY원래의
- 2016-05-16 17:22:16940검색
document.title //HTML 제목 태그와 동일한 문서 제목 설정
document.bgColor //페이지 배경색 설정
document.fgColor //전경색(텍스트 색상) 설정
document.linkColor // 클릭되지 않은 링크 색상
document.alinkColor //활성 링크 색상(포커스는 이 링크에 있음)
document.vlinkColor //클릭된 링크 색상
document.URL //URL 속성 설정 따라서 같은 창에서 다른 웹페이지 열기
document.fileCreatedDate //파일 생성 날짜, 읽기 전용 속성
document.fileModifiedDate //파일 수정 날짜, 읽기 전용 속성
document. charset //문자 집합 설정 중국어 간체: gb2312
document.fileSize //파일 크기, 읽기 전용 속성
document.cookie //쿠키 설정 및 읽기
—————— ———————— ——————————
일반적인 개체 메서드
document.write() //동적으로 페이지에 콘텐츠 쓰기
document.createElement( Tag) //html 태그 객체 생성
document.getElementById(ID) //지정된 ID 값을 가진 객체 가져오기
document.getElementsByName(Name) //지정한 Name 값을 가진 객체 가져오기
document.body.appendChild(oTag)
—— ————————————————————————
body-body 하위 개체
document.body //문서 본문의 시작과 끝을 지정합니다. body>/body>와 동일합니다.
document.body.bgColor //객체 뒤의 배경색을 설정하거나 가져옵니다.
document. body.link //클릭하지 않은 링크의 색상
document.body.alink //활성 링크의 색상(포커스는 이 링크에 있음)
document.body.vlink //클릭한 링크의 색상
document.body.text //텍스트 색상
document.body.innerText / /body 사이에 텍스트 설정>.../body>
document.body.innerHTML //사이에 HTML 코드 설정 body>.../body>
document.body.topMargin //페이지 상단 여백
document.body.leftMargin //페이지 왼쪽 여백
document.body.rightMargin //오른쪽 여백 페이지
document.body.bottomMargin //페이지 하단 여백
document.body.Background //배경 이미지
document.body.appendChild(oTag) //HTML 객체를 동적으로 생성
공통 객체 이벤트
document.body.onclick=”func()” //마우스 포인터로 클릭한 객체가 Trigger
document.body.onmouseover=”func()” //Trigger 마우스 포인터가 객체로 이동할 때
document.body.onmouseout=”func()” //마우스 포인터가 객체 밖으로 이동할 때 트리거
— ———————————— ————————————
location-location 하위 개체
document.location.hash // # 뒤의 부분
document.location.host // 도메인 이름 및 포트 번호 // 호스트 이름 localhost가 반환되는 것 같지만 포트 번호가 반환되지 않습니다.
document.location.hostname // 도메인 이름
document.location.href // 전체 URL
document. location.pathname // 디렉토리 부분
document.location.port // 포트 번호
document.location.protocol // 네트워크 프로토콜(http:)
document.location.search // ? 마지막 부분
documenty.location.reload() //웹페이지 새로고침
document.location.reload(URL) //새 웹페이지 열기
document.location.asse(URL) //새 웹페이지 열기 웹 페이지
document.location.replace(URL) //새 웹페이지 열기
—————————————————————————
selection-selection 하위 개체
document.selection
예:
selection의 createRange 메서드
document.selection.createRange()는 현재 텍스트 선택을 기반으로 TextRange 객체를 반환하거나 컨트롤 선택을 기반으로 ControlRange 객체를 반환합니다.
execCommand를 사용하면 굵은 텍스트, 기울임꼴, 복사, 붙여넣기, 하이퍼링크 생성 등과 같은 HTML 편집기에서 매우 유용합니다.
이것은 IE에서만 가능한 것 같습니다. .
————————————————————————
이미지 모음(페이지 이미지)
a) 컬렉션을 통한 참조
document.images //페이지의 img 태그에 해당
document.images.length //페이지의 img 태그 수에 해당
document.images[0] //첫 번째 img 태그
document.images[i] //i-1번째 img 태그
b) name 속성을 통해
img name=”oImage”
document.images를 직접 참조합니다. . oImage //document.images.name 속성
c) 이미지의 src 속성을 참조합니다
document.images.oImage.src //document.images.name attribute.src
d) 이미지 생성
var oImage
oImage = new Image()
document.images.oImage.src=”1.jpg”
동시에 img/태그 생성 해당 페이지는
————————————————————————-
양식 모음(양식 모음)을 표시할 수 있습니다. 페이지)
a) 컬렉션을 통한 참조
document.forms //페이지의 form 태그에 해당
document.forms.length //페이지의 /formform 태그 개수에 해당
document.forms[0] / /1번째/formform 라벨
document.forms[i] //i-1번째/formform 라벨
document.forms[i].length //개수 i-1/formform의 컨트롤
document.forms[i].elements[j] //i-1/formform의 j-1번째 컨트롤
b)
을 직접 참조합니다. /formform 이름은 라벨 이름 속성 =”Myform”>input name=”myctrl”/>/form
document.Myform.myctrl //document.form name.control name
c) 양식
document .forms[i].name //양식 이름>속성
document.forms[i].action ///formform action>속성
문서에 해당합니다. form[i].encoding ///formform enctype> ;Property
document.forms[i].target에 해당 ///formform target>Property
document.forms[i].appendChild에 해당( oTag) //동적으로 컨트롤 삽입
document.all .oDiv //참조 레이어 oDiv
document.all.oDiv.style.display=”” //레이어가 보이도록 설정
document.all .oDiv.style.display=”none” //그림 레이어가 숨겨짐
document.getElementId("oDiv") //getElementId를 통해 개체 참조
document.getElementId("oDiv").style =""
document.getElementId("oDiv").display =”none”
/*document.all은 문서에 있는 모든 개체의 컬렉션을 나타냅니다.
IE에서만 이 속성을 지원하므로 브라우저 유형을 결정하는 데 사용됨*/
객체의 레이어 4 속성
document.getElementById(”ID”).innerText //동적 출력 텍스트
document.getElementById(” ID”).innerHTML //동적 출력 HTML
document.getElementById(”ID”).outerText //innerText와 동일
document.getElementById(”ID”).outerHTML //innerHTML과 동일
------ ------------------------------ ------- ----------------- ------- ----------------- ---------------
document.readyState: 문서가 로드되었는지 확인합니다. 파이어폭스는 이를 지원하지 않습니다.
이 속성은 읽기 전용이며 반환된 값에는 다음과 같은 가능성이 있습니다.
0-UNINITIALIZED: XML 개체가 생성되었지만 파일이 로드되지 않았습니다.
1-LOADING: 로딩 프로세스가 진행 중이지만 파일 구문 분석이 아직 시작되지 않았습니다.
2-LOADED: 일부 파일이 로드되고 구문 분석되었지만 개체 모델이 아직 적용되지 않았습니다.
3-INTERACTIVE: 로드된 부분 파일에만 유효합니다. 이 경우 객체 모델은 유효하지만 읽기 전용입니다.
4-COMPLETED: 파일이 완전히 로드되어 로드에 성공했음을 나타냅니다.
document.onreadystatechange = subSomething;//When 페이지가 로드되었습니다. 변경 시 이 메서드를 실행합니다.
function subSomething()
{
if(document.readyState == "complete"){ //페이지 로딩 상태가 완료되면
을 입력합니다. //you 수행할 작업입니다.
}
else if(document.readyState=="loading"){
}
}
좋은 예: http://www.jb51.net/article/20445.htm
설명: onreadystatechange 이벤트는 ReadyState 속성의 변경 사항을 식별할 수 있습니다.
document.all(IE에서만 지원)
action: document.layers는 Netscape 4.x 전용 속성입니다. <와 같이 그 안에 저장된 모든 파일을 나타내는 속성입니다. ;div>
document.all은 문서의 모든 요소를 의미하며, 이는 현재 웹페이지의 모든 요소를 포함한다는 의미입니다. 요소의 속성을 배열 형식으로 저장하므로 document.all["element name"].Attribute name="attribute value"를 사용하여 요소의 속성을 동적으로 변경할 수 있습니다. 이 명령문을 사용하면 동적으로 그림 변경, 텍스트 배경 동적으로 변경, 웹 페이지 배경 동적으로 변경, 그림 크기 동적으로 변경, 텍스트 크기 및 색상 동적으로 변경과 같은 다양한 동적 웹 페이지 효과를 만들 수 있습니다. , 등. 거의 모든 웹 페이지 요소를 동적으로 제어할 수 있습니다.
document.all[] 이 배열은 문서의 모든 요소에 액세스할 수 있습니다.
예제 1(문서에 어떤 개체가 있는지 이해할 수 있음)
제목 예시
문단입니다. 문단입니다.
또 다른 문단입니다.
;이 마지막 단락은 script type="text /javascript">실행 결과는 다음과 같습니다.
제목 예시
------------------- ---- --------------------------------- ---- -------
또 다른 단락입니다.
이 마지막 단락은
--- ------------------------------------ ---- ----------------
document.all.length=18
문서 .all[0]= !
document.all[1]=HTML
document.all[2]=HEAD
document.all[3]=TITLE
document.all[4]= META
document.all[5]=BODY
document.all[6]=H1
document.all[7]=HR
document.all[8]=P
문서. 모두[9]=EM
document.all[10]=EM
document.all[11]=P
document.all[12]=EM
document.all[13]=P
document.all [14]=EM
document.all[15]=EM
document.all[16]=HR
document.all[17]=SCRIPT
(참고 IE에서만 실행할 수 있습니다.)
코드 복사