1. GetElementsByName () : 이름을 얻습니다.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`
예:
<p name = "pn"> hello </p> <p name = "pn"> hello </p> <p name = "pn"> hello </p> <cript> function getName () {var count = document.getElementsByName ( "pn"); 경고 (count.length); var p = count [2]; p.innerhtml = "World"; } </스크립트>결과 : 인터페이스는 프롬프트 상자 "3"과 함께 3 개의 헬로를 인쇄합니다. 확인을 클릭하면 인터페이스에 표시된 내용이 Hello Hello World가됩니다.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2. GetElementsByTagName () : 요소를 가져옵니다.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
예
<p> hello </p> <p> hello </p> <p> hello </p> <cript> function getName () {var count = document.getElementsByTagName ( "p"); 경고 (count.length); var p = count [2]; p.innerhtml = "World"; } </스크립트>결과 : 인터페이스는 프롬프트 상자 "3"과 함께 3 개의 헬로를 인쇄합니다. 확인을 클릭하면 인터페이스에 표시된 내용이 Hello Hello World가됩니다.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3. GetAttribute () : 요소 속성을 얻습니다.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
예
<a id = "AID"> </a> <Script> function getAttr1 () {var anode = document.getElementById ( "AID"); var attr = anode.getAttribute ( "id"); Alert ( "A의 ID는 :"+attr); } function getAttr2 () {var anode = document.getElementById ( "AID"); var attr = anode.getAttribute ( "title"); ALERT ( "A의 제목 내용은 :"+attr); } getAttr1 (); getAttr2 (); </스크립트>결과 : 프롬프트 상자 "A의 ID는 : AID"입니다. 확인을 클릭 한 후 "A의 제목 내용은 다음과 같습니다. A의 태그 속성을 가져옵니다.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4. setattribute ()를 설정하는 요소 속성을 설정합니다.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
예
<a id = "aid2"> aid2 </a> <cript> function statttr () {var anode = document.getElementById ( "aid2"); anode.setattribute ( "제목", "제목 속성의 동적 설정"); var attr = anode.getAttribute ( "title"); 경고 ( "제목 값의 동적 설정은"+attr); } setattr (); </스크립트>결과 : 프롬프트 상자 "동적 설정 제목 값은 다음과 같습니다."팝업의 타이틀 속성을 동적으로 설정합니다.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
5. childnodes () : 아동 노드에 액세스하십시오.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
예
<ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> </ul> <cript> 함수 getchildnode () {var childnode = document.getElementsByTagName ( "ul") [0] .childnodes; 경고 (childnode.length); Alert (childnode [0] .nodeType); } getChildNode (); </스크립트>결과 : 인터페이스는 대화 상자 "3"가 .1.2.3에서 팝업 된 다음 OK를 눌러 팝업을 눌렀습니다.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6.parentNode () : 부모 노드에 액세스하십시오.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
예
<div> <p id = "pid"> </p> </div> <cript> 함수 getParentNode () {var div = document.getElementById ( "pid"); Alert (div.parentNode.Nodename); } getParentNode (); </스크립트>결과 : 프롬프트 상자가 나타납니다 : Div.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7. CreateElement () : 요소 노드를 만듭니다.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
예:
<cript> 함수 createNode () {var body = document.body; var input = document.createElement ( "입력"); input.type = "버튼"; input.value = "버튼"; body.appendChild (입력); // 삽입 노드} createNode (); </스크립트>결과 : 버튼이 나타납니다.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8.CreateTxtNode () : 텍스트 노드를 만듭니다.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
예:
<cript> function createNode () {var element = document.createElement ( "div"); 요소 .className = "메시지"; var textnode = document.creatextNode ( "Hello World!"); 요소 .appendChild (TextNode); document.body.appendChild (요소); } createNode (); </스크립트>코드 분석 :이 예제는 새로운 <div> 요소를 생성하고 "메시지"값의 클래스 속성을 지정합니다. 그런 다음 다른 텍스트 노드가 생성되어 이전에 생성 된 요소에 추가됩니다. 마지막 단계는이 요소를 문서의 <hod> 요소에 추가하여 브라우저에서 새로 만든 요소 및 텍스트 노드를 볼 수 있도록하는 것입니다.
결과 : 페이지에는 Hello World가 표시됩니다.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
9. insertbefore () : 노드를 삽입합니다.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
예
<div id = "div"> <p id = "pid"> p 요소 </p> </div> <cript> 함수 addnode () {var div = document.getElementById ( "div"); var node = document.getElementById ( "PID"); var newnode = document.createElement ( "P"); newnode.innerhtml = "p 요소의 동적 삽입"; Div.insertbefore (Newnode, Node); } addnode (); </스크립트>결과 : 인터페이스 인쇄 : P 요소를 동적으로 삽입
P 요소
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
10. removeChild () : 노드를 삭제합니다.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
예
<div id = "div"> <p id = "pid"> p 요소 </p> </div> <cript> 함수 removenode () {var div = document.getElementById ( ""div "); var p = div.removechild (div.childnodes [1]); } removenode (); </스크립트>결과 : 인터페이스에는 아무것도 표시되지 않습니다.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
11. OffSetheight : 웹 페이지 크기
12. ScrollHeight : 웹 페이지 크기
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
예:
<cript> function getsize () {var width = document.documentElement.offsetWidth || document.body.offsetWidth; // 호환성 문제 해결 var height = document.documentElement.offSetheight || body.off.OffSetHeight; 경고 (너비+","+높이); } getsize (); </스크립트>결과 표시 :
이 기사는 주로 HTML 요소를 제어하기 위해 JS DOM을 소개합니다. 이 기사의 내용에는 주로 DOM, HTML 등이 포함됩니다.이 기사는 인터넷에서 나옵니다. 참조하십시오.