노드 유형
Nodetype
중요한 Nodetype 값은 다음과 같습니다.
1 : 요소 요소
2 : attr
3 : 텍스트 텍스트
8 : 댓글
9 : 문서 문서
Nodename, Nodevalue
노드 관계
Childnodes : 각 노드에는 hildnodes 속성이 있으며,이 속성에는 Nodelist 객체가 있습니다.
자녀 : 어린이와 동등한 [0]
LastChild : Childnodes.length-1에 해당합니다
동시에, 동일한 목록의 다른 노드는 목록에있는 각 노드의 이전 실시 및 넥타이 특성을 사용하여 액세스 할 수 있습니다.
작동 노드
부록 ()
AppendChild () 메소드는 Childnodes 목록의 끝에 노드를 추가하는 데 사용됩니다. 노드를 추가 한 후 새 노드의 관계 포인터, 부모 노드 및 Childnodes의 마지막 자식 노드가 그에 따라 업데이트됩니다.
삽입 전 ()
insertBefore () 메소드는 삽입 할 노드와 참조 할 노드를 허용합니다.
// 삽입 후, 그것은 마지막 자식 노드가되게되었다. returnedNode = somenode.insertbefore (newnode, null); // 삽입 후 첫 번째 노드가되게되었다.
replacechild ()
replaceChild ()는 두 개의 매개 변수를 수락합니다. 노드는 삽입 될 노드와 교체 할 노드를 수락합니다.
var returnednode = somenode.replacechild (Newnode, somenode.firstchild);
removeChild ()
노드 만 제거하고 교체하지 마십시오.
var emberfirstchild = somenode.removechild (somenode.firstchild);
Clonenode ()
항목 1
항목 2
항목 3
var deeplist = mylist.clonenode (true); console.log (deeplist.length); // 3var shallowlist = mylist.clonenode (false); console.log (sharlowlist.childnodes.length); // 0
문서 유형
문서 노드에는 다음과 같은 특성이 있습니다.
문서의 아이들
var html = document.documentElement; // <html> console.log (html === document.childnodes [0])에 대한 참조를 가져옵니다. // trueconsole.log (html === document.firstchild); // 진실
문서 정보
// 문서의 제목을 가져옵니다 var originalTitle = document.title; // 문서 제목 문서를 설정하십시오 .Title = "새 페이지 제목"; // 완전한 urlvar url = document.url; // 도메인 이름 var 도메인 가져옵니다. documain; // urlvar referrer = document.referrer; // p2p.wrox.com domain domain = "wrox.com"; // 성공적인 document.domain = "nczonline.net"; // 실패했습니다
문서를 호출하십시오 .getElementById ( "mylement"); 결과는 아래와 같이 <입력> 요소를 반환합니다.
가장 좋은 방법은 양식 필드의 이름 속성을 다른 요소의 ID와 동일하게 만드는 것입니다.
<입력 유형 = "text"name = "myelement"value = "텍스트 필드"> <div id = "myelement"> a div </div>
특별 컬렉션
문서 작성
<html> <head> <title> document.write () 예제 3 </title> </head> <body> <script type = "text/javaScript"> docum </script> </body> </html>
문자열 <// 스크립트>는 외부 스크립트 태그의 닫힌 태그로 간주되지 않으므로 페이지에 불필요한 내용이 없습니다.
요소 유형
요소 노드에는 다음 특성이 있습니다.
요소의 태그 이름에 액세스하려면 NodeName 속성 또는 태그 이름 속성을 사용할 수 있습니다.
<div id = "mydiv"> </div> var div = document.getElementById ( "myDiv"); console.log (div.tagname); // divconsole.log (div.Nodename); // divif (element.tagname == "div") {// 이렇게 비교할 수 없으므로 오류를 쉽게 만들 수 있습니다} if (element.tagname.tolowercase == "div") {// 이것은 가장 좋습니다 (모든 문서의 경우)}기능을 얻으십시오
작동 특성을위한 세 가지 주요 DOM 방법, 즉 getAttribute (), setAttribute () 및 removeAttribute ();
getAttribute ()로 전달 된 속성 이름은 실제 속성 이름과 동일합니다. 인상 : 클래스의 속성 값을 얻으려면 "ClassName"대신 "클래스"로 전달해야합니다.
var div = document.getElementById ( "myDiv"); console.log (div.getAttribute ( "class")); // bd
요소를 만듭니다
문서를 사용하여 새 요소를 만듭니다.
요소의 아이들
작업을 수행하기 전에 일반적으로 다음 예에서 볼 수 있듯이 NodeType 속성을 먼저 확인해야합니다.
for (var i = 0; len = element.childnodes.length; i <len; i ++) {if (element.childnodes [i] .nodeType == 1) {// 일부 작업을 수행}}}텍스트 유형
텍스트 노드에는 다음과 같은 특성이 있습니다.
텍스트 노드를 만듭니다
document.creatextnode ()를 사용하여 새 텍스트 노드를 만들 수 있습니다.
정규화 된 텍스트 노드
정상화 ()
분할 텍스트 노드
splittext ()
주석 유형
주석 노드에는 다음과 같은 특성이 있습니다.
DOM 운영 기술
작동 양식
// tablevar table = document.createElement ( "table"); table.border = 1; table.width = "100%"; // todevar tbody = document.createelement ( "tbody"); table.appendChild (tbody); // 첫 번째 줄을 만듭니다. tbody.insertrow (0); tbody.rows [0] .insertcell (0); tbody.rows [0] .Cells [0] .AppendChild (document.creatextNode ( "Cell 1,1")); tbody.rows [0] .insertCell (1); TBody.rows [0] .Cells (DocumpendChild () 2,1 ")); // 두 번째 줄을 만듭니다. insertrow (01); tbody.rows [1] .insertcell (0); tbody.rows [1] .Cells [0] .AppendChild (document.creatextNode ("셀 1,2 ")); tbody.rows [1] .insertcell (1); tbody.rows [1] .Cells [1] .AppendChild (Document.CreateTxtNode ("Cell 2,2 ")); Document.body.appendChild (표);선택기 API
QuerySelector () 메소드
// 본문 요소 var tbody = document.querySelector ( 'body'); // id "mydiv"var mydiv = document.querySelector ( "#mydiv"); // 클래스가 선택한 첫 번째 요소 가져 오기 document.body.querySelector ( "IMG.Button");
QuerySelectorAll () 메소드
// <div> (getElementsByTagName ( "em"))와 유사한 모든 <em> 요소를 가져옵니다 (var ems = docum document.querySelectorall ( "p strong");
html5
클래스 관련 확장
getElementsByClassName () 메소드 :
이 방법은 문서 개체 및 모든 HTML 요소를 통해 호출 할 수 있습니다.
// 클래스에서 "사용자 이름"및 "현재"가 포함 된 모든 요소를 가져옵니다. 클래스 이름의 순서는 var var allcurrentusernames = document.getElementsByClassName ( "사용자 이름 전류"); // id "myDiv"var selected = document.getElementById ( "mydiv"). getElementsByClassName ( "selected")이있는 요소에서 클래스 이름이 "선택된"모든 요소를 가져옵니다.
초점 관리
HTML5는 또한 DOM 포커스 관리를 지원하는 기능을 추가합니다. 첫 번째는 Document.ActiveElement 속성이며, 현재 초점을 맞추고있는 DOM의 요소를 항상 지칭합니다.
var button = document.getElementById ( "myButton"); button.focus (); alert (document.ActiveElement === 버튼); // 진실
기본적으로 문서가 방금로드되면 Document.ActiveElement가 Document.body 요소에 대한 참조를 사용하여 문서에 저장됩니다. 문서로드 중에 문서의 값은 널입니다.
또한, 문서가 초점을 맞추 었는지 여부를 결정하는 데 사용되는 document.hasfocus () 메소드가 추가되었습니다.
var button = document.getElementById ( "myButton"); botton.focus (); alert (document.hasfocus ()); // 진실