js 페이지 elements_javascript 기술의 여러 사용법 요약

개체 속성

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를 가진 객체 가져오기 value
document.getElementsByName(Name) //지정된 Name 값을 가진 객체 가져오기
document.body.appendChild(oTag)
———————————————— ———— ———

몸-몸 하위 개체

document.body //body>/body>와 동일한 문서 본문의 시작과 끝을 지정합니다.
document.body.bgColor //문서 개체 뒤의 배경색을 설정하거나 가져옵니다
. body.link / /클릭되지 않은 링크 색상
document.body.alink //활성 링크 색상(포커스는 이 링크에 있음)
document.body.vlink //클릭된 링크 색상 clicked
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()” //마우스 포인터가 객체를 클릭할 때 트리거됩니다.
document.body.onmouseover=”func()” //마우스 포인터가 객체로 이동할 때 트리거됩니다.
document .body.onmouseout=”func()” //마우스 포인터가 개체 밖으로 이동할 때 트리거됨
————————————————————— —
위치-위치 하위 개체

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) //새 웹페이지 열기
—— —————————— ———————————
선택-선택 하위 개체
document.selection

예:

코드 복사 코드는 다음과 같습니다.

< ;div>여기에서 텍스트의 일부를 선택하세요.

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 속성
document.images.oImage //document.images.name 속성
을 통해

img name="oImage"를 직접 참조합니다.

c) 이미지
document.images.oImage.src //document.images.name attribute.src

의 src 속성을 참조합니다.

d) 이미지 생성
var oImage
oImage = new Image()
document.images.oImage.src=”1.jpg”
동시에 img / on 생성 페이지에 해당하는 태그가 표시될 수 있습니다

————————————————————————-

양식 모음(페이지의 양식)

a) 컬렉션을 통한 참조
document.forms //페이지의 form 태그에 해당
document.forms.length //페이지의 /formform 태그 수에 해당
document. form[0] //1st/formform 태그
document.forms[i] //i-1st/formform 태그
document.forms[i].length //i-1st/formform Number의 컨트롤
document.forms[i].elements[j] //formform의 i-1st/j-1st 컨트롤

b) 라벨 이름을 통해
/formform name=”Myform”>input name=”myctrl”/>/form
document.Myform.myctrl //document.form name.control을 직접 참조합니다. 속성 이름

c)
document.forms[i].name //양식 이름>property에 해당
document.forms[i].action ///formform action>property에 해당 양식의 속성에 액세스합니다.
document .forms[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").
document.getElementId("oDiv").display="none"
/*document.all은 document
만 즉 이 속성이 지원되므로 브라우저 유형을 결정하는 데에도 사용됩니다*/

레이어 객체의 네 가지 속성
document.getElementById("ID").innerText //동적 출력 텍스트
document.getElementById("ID").innerHTML //HTML의 동적 출력
document .getElementById("ID").outerText //innerText와 동일
document.getElementById("ID").outerHTML //innerHTML과 동일