태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

Core 빠른 참조. Core는 요소를 참조하고, 상대적으로 주위의 노드를 참조하거나 요소를 생성하는 등 부분. 주로 이용하는 것이다 속성 및 메서드는 충당하고 있다고 생각하지만, 이것도 넣어 녹아 하는게 있으면 가르쳐주세요.

이 근처는 수수하고 사용하기 힘들어 게다가 이해하기 어렵다는 유감스러운 부분. 문득 잊었을 때 사용하는 개인적인 것이지만, 만성 jQuery 거절 증후군 사람 좋으면 바랍니다. 그렇다 치더라도 덥다. 가리 가리 군 맛있 네요.

DOM이란.

Document Object Model (DOM)은 HTML과 XML 문서를위한 API입니다. 이것은 문서의 구조적인 표현을 제공하고, 콘텐츠 및 문서 모양 변경을 가능하게합니다. 단적으로 말하면, Web 페이지를 스크립트 또는 프로그래밍 언어와 연결 같은 메커니즘입니다.

https : / / developer.mozilla.org / ja / DOM

※ 브라우저의 버전은 Firefox3.6.8, Google Chrome5.0.375.127, Opera10.61, IE8을 바르고 IE9pp은 IE9한다. 기타 적당히.


기본적인 요소 참조

document.getElementById ()

id 속성에서 요소를 참조하십시오.

var D = document. getElementById ('box');
alert(d.id); / / box

/ / html
<div id ="box"> 더운 </ div>

document.getElementsByName ()

name 속성에서 요소를 참조하십시오.

/ / js
var elems = document. getElementsByName ('dom');
alert(elems[0'. value); / / 첫
alert(elems[1]. value); / / 중간
alert(elems.length); / / 3

/ / html
<input name ="dom" type ="text" value ="처음" /> <input name ="dom" type ="text" value ="중간" /> <input name ="dom" type ="text" value ="마지막" />
  • 속성
    • length
  • 메서드
    • item (index)
  • 반환값
    • Firefox, IE는 HTMLCollection 형식의 개체
    • Google Chrome, Opera는 NodeList 개체 형식

출처 - http://chaospace.tistory.com/72

사양이나 책 등에서 NodeList와있다 HTMLCollection도 있었다 같다. 대우 분은 어느쪽도 비슷한 것으로, namedItem하여 메소드를 NodeList에 없다.

잘 말해대로 HTMLCollection과 NodeList는 배열의 같은 행동을하지만 배열 자체가 없기 때문에주의.


IE와 Opera의 경우

/ / js
var elems = document. getElementsByName ('dom');
alert(elems[0]. value) / / 최초
/ / html
<input id ="dom" type ="text" value ="처음" />

id 속성에서 getElementsByName에서 볼 수 있고한다. 그리고 IE6, 7과 Opera9에서는

/ / js
var elem = document. getElementById ('dom');
alert(elem.value) / / 최초
/ / html
<input name ="dom" type ="text" value ="처음" />

반대의 경우도있다. IE8과 Opera10.60에서는 볼 수 없도록했다. 실수 name 속성과 id 속성의 값을 동일하게한다.


document.getElementsTagName ()

태그 이름에서 요소를 참조하십시오.

/ / js
var Lists = document. getElementsByTagName ('li');
alert(lists[1]. firstChild.nodeValue); / / 중간
alert(lists[2]. firstChild.nodeValue); / / 마지막
alert(lists.length ); / / 3

/ / html
<ul id ="list"> <li> 첫번째 </ li> <li> 중간 </ li> <li> 마지막 </ li> </ ul>
  • 속성
    • length
  • 메서드
    • item (index)
  • 반환값
    • Firefox, IE는 HTMLCollection 형식의 개체
    • Google Chrome, Opera는 NodeList 개체 형식

HTMLCollection 및 NodeList는 lists [i]뿐만 아니라 lists.item (i)의 형태에서 요소를 검색할이 메서드 사용보다는 배열 표기법이 좋은 것 같다. 메서드라고 늦은에서?

for로 돌리는 경우.http://cou929.nu/data/google_javascript_style_guide/ # id57

var Lists = document. getElementsByTagName ('li');
for (var I = 0, list; list = lists[i]; i + +) (
  doSomething (list);
)

false로 처리되는 값을 포함하지 않는 컬렉션이나 배열하면 NodeList 이외에도 이렇게 쓸 수있다.

NodeList를 배열로 취급한다 방법에는 여러 가지가 있지만 일반적으로 할당이 무난.

var Lists = nlToArray (document. getElementsByTagName ('li'));

Function nlToArray (nodelist) (
  if(NodeList instanceof Object) 
    return Array. prototype.slice.call (nodelist);

  var R = []i = 0, l = nodelist.length;
  for(; i <l; i + +) (
    r[i] = nodelist[i];
  )
  return R;
)

일단 방법 Array.prototype.slice.call도 있습니다.탄 님이 가르쳐준 방법 (이 arguments의 예)는 IE라고 오류. JScript는 HTMLCollection 및 NodeList를 JScript의 개체로 인식하지 못하는 것 같다.IE9에서 괜찮아.

document.getElementsByTagName는 와일드 카드 문자를 지정할 수있다. 그러나 IE6, 7,8 요소 이외에도 댓글 노드가 포함 버리므로주의. DOCTYPE 댓글 노드에 포함된다.

/ / js
var Lists = document. getElementsByTagName ('*');
alert(lists.length); / / 5 (보통 코멘트 노드를 제외하고 4해야한다)

/ / html
<ul id ="list"> <li> 첫번째 </ li> <li> 중간 </ li> <li> 마지막 </ li> </ ul>

document.getElementsByClassName ()

클래스 속성에서 요소를 참조하십시오.

/ / js
var Items = document. getElementsByClassName ('item');
alert(items[0]. firstChild.nodeValue); / / 첫
alert(items[2]. firstChild.nodeValue); / / 마지막
alert(items.length ); / / 3

/ / html
<ul id ="list"> <Li class="item"> 첫번째 </ li> <Li class="item"> 가운데 </ li> <Li class="item"> 마지막 </ li> </ ul>
  • 속성
    • length
  • 메서드
    • item (index)
  • 반환값
    • Firefox, IE는 HTMLCollection 형식의 개체
    • Google Chrome, Opera는 NodeList 개체 형식

반환 값은 getElementsByName / TagName와 같다. Firefox3, Opera9.5, Safari3.1, Google Chrome 시점에서 IE는 IE9에서 기본적으로 구현되어있다.


document.evaluate ()

XPath에서 요소를 참조하십시오.

/ / js
var result = document. evaluate ('id ( "list") / / li', document, null, 7, null);
alert(result.snapshotItem (0). firstChild.nodeValue); / / 처음

/ / html
<ul id ="list"> <li> 첫번째 </ li> <li> 중간 </ li> <li> 마지막 </ li> </ ul>
  • 속성
    • snapshotLength
    • 기타 여러
  • 메서드
    • iterateNext ()
    • snapshotItem (itemNumber)
  • 반환값
    • XPathResult 형식의 개체

IE9 아직 구현. IE 이외는 대체로 사용할 수있다. XPath 혼자서 할 수없는 걸은http://pearl-white.hp.infoseek.co.jp/xpath/이 편리합니다. 개인적으로 골칫거리.

인수는 다음을 참조. 많다.


querySelector ()와 queryselectorAll ()

CSS 셀렉터에서 요소를 참조하십시오.

/ / querySelector
var list = document. querySelector ('ul # list> li');
alert(list.firstChild.nodeValue); / / 첫

/ / querySelectorAll
var Lists = document. querySelectorAll ('ul # list> li');
alert(lists[1]. firstChild.nodeValue); / / 중간
alert(lists[2]. firstChild.nodeValue); / / 마지막
alert(lists.length); / / 3

/ / html
<ul id ="list"> <li> 첫번째 </ li> <li> 중간 </ li> <li> 마지막 </ li> </ ul>
  • 속성
    • length
  • 메서드
    • item (index)
  • 반환 값 (querySelectorAll)
    • Firefox, Google Chrome, Opera에서는 NodeList 개체 형식
    • IE8과 IE9은 StaticNodeList 형식의 개체입니다. 뭐여 보렴

2 가지 방법의 차이는 구성 요소 수를 단독 또는 공동 하나라는 것이다. IE8에서 구현되어 있기 때문에, 이제 이것이 아무것도 걱정없이 사용하게되면 모두 황홀로 한 표정.

반환 값은 모든 브라우저에서 static의 NodeList와 드물다.


자식 노드를 참조

element.childNodes

요소의 모든 자식 노드를 참조하십시오.

/ / js
var list = document. getElementById ('list');
alert(list.childNodes[1]. firstChild.nodeValue); / / 첫
alert(list.childNodes.length) / / 7 (IE6, 7,8 등 3)

/ / html
<ul id ="list"> <li> 첫번째 </ li> <li> 중간 </ li> <li> 마지막 </ li> </ ul>
  • 속성
    • length
  • 메서드
    • item (index)
  • 반환값
    • NodeList 형식의 개체

length 속성을 사용하여 ul # list 자식 노드를 계산하면 Firefox와 Google Chrome 등 7 가지로 IE는 3 개로한다. 이것은 공백 노드를 인식 여부의 차이.

Firebug* 1콘솔의 childNodes의 내용을 보면,

console.log (list.childNodes);
/ / <TextNode textContent="\n ">, li, <TextNode textContent="\n ">, li, <TextNode textContent="\n ">, li, <TextNode textContent = "\ n">

TextNode 텍스트 내용은 줄바꿈과 공백으로, li가 li 요소에 해당한다. 이것을 시각적으로 알기 쉽게하면.

<ul id ="list"> <TextNode textContent ="\ n
 "> <li> 첫번째 </ li> <TextNode textContent ="\n
 "> <li> 중간 </ li> <TextNode textContent ="\n
 " > <li> 마지막 </ li> <TextNode textContent = "\n">
</ ul>

이들을 포함 li 요소와 공백 노드 적합하지 경우 7. IE8 다음은 이러한 공백 노드가없고 li 요소뿐이므로 3었던 것. 이런 상대적인 위치에서 요소를 참조할 때 공백 노드에주의.

이 방해 공백 노드를 제외하고 필요한 li 요소를 만회한다.

var list = document. getElementById ('list');
var cn = list.childNodes;
var R = []i = 0, l = cn.length;

for(; i <l; i + +) (
  if(cn[i]. nodeType === 1) (
    r.push (cn[i]);
  )
)
alert(r.length); / / 3
console.log (r) / / li, li, li

공백 노드는 텍스트 노드에 해당하므로 nodeType을 찾으 요소 노드 이외의 제외로 Firefox 등에서도 ul # list 자식 li 요소만을 얻을 수있다. 그러나이 경우는 document.getElementById ( 'list'). getElementsByTagName ( 'li')가 무난.

nodeType 내용은아래.


element.firstChild

요소의 첫번째 자식 노드를 참조하십시오.

/ / js
var list = document. getElementById ('list');
alert(list.firstChild); / / <li> 첫번째 </ li>

/ / html
<ul id ="list"> <li> 첫번째 </ li > <li> 중간 </ li> <li> 마지막 </ li> </ ul>

향후 불편에서 들여쓰기 및 줄 바꿈을 제거 공백 노드를 포함하지 않는다.

예를 들어, 위의 상태에서 "첫번째"라는 문자열을 검색하려면

/ / js
var list = document. getElementById ('list');
alert(list.firstChild.firstChild.nodeValue); / / 첫

/ / html
<ul id ="list"> <li> 첫번째 </ li> <li > 중간 </ li> <li> 마지막 </ li> </ ul>

로한다.


element.lastChild

요소의 마지막 자식 노드를 참조하십시오.

/ / js
var list = document. getElementById ('list');
alert(list.lastChild); / / <li> 마지막 </ li>

/ / html
<ul id ="list"> <li> 첫번째 </ li > <li> 중간 </ li> <li> 마지막 </ li> </ ul>

예를 들어, 여기에서 또한 "마지막"라는 문자열을 검색하려면,

/ / js
var list = document. getElementById ('list');
alert(list.lastChild.firstChild.nodeValue); / / 마지막

/ / html
<ul id ="list"> <li> 첫번째 </ li> <li > 중간 </ li> <li> 마지막 </ li> </ ul>

로한다.


element.hasChildNodes ()

요소에 자식 노드가 있는지 확인합니다.

/ / js
var list = document. getElementById ('list');
alert(list.hasChildNodes ()); / / true
while(list.firstChild) (
 list.removeChild (list.firstChild); / / 자식 노드를 모두 삭제
)
alert(list.hasChildNodes ()); / / false

/ / html
<ul id ="list"> <li> 첫번째 </ li> <li> 중간 </ li> <li> 마지막 </ li> </ ul>
  • 반환값
    • 자식 노드가 있으면 true
    • 자식이 없으면 false

자식 노드가 있는지 명확하지 않은 경우에 편리합니다.


부모 노드 참조

element.parentNode

요소의 부모에 해당하는 노드를 참조하십시오.

/ / js
var li01 = document. getElementsByTagName ('li')[0]; / / <li> 첫번째 </ li> 요소
alert(li01.parentNode.id) / / list

/ / html
<ul id ="list "> <li> 첫번째 </ li> <li> 중간 </ li> <li> 마지막 </ li> </ ul>

element.ownerDocument

해당 요소를 포함하는 최상위의 문서 개체를 참조하십시오.

/ / js
var list = document. getElementById ('list'); 
var D = list.ownerDocument;
alert(d); / / document
alert(d === document); / / true
alert(document. ownerDocument); / / null
alert(document. createTextNode ('') ownerDocument); / / document

list.parentNode.removeChild (list); / / DOM에서 요소를 제거
alert(list.ownerDocument); / / document

/ / html
<ul id ="list"> <li> 첫번째 </ li> <li> 중간 </ li> <li> 마지막 </ li> </ ul>

브라우저는 대개 document된다. DOM 트리에 삽입하지 않고 또한 트리에서 삭제해도 검색할 수있다.


형제 노드 참조

element.previousSibling

요소의 이전 노드를 참조하십시오.

/ / js
var li02 = document. getElementsByTagName ('li')[1]; / / <li> 중간 </ li> 요소
alert(li02.previousSibling.firstChild.nodeValue) / / 최초

/ / html
<ul id ="list"> <li> 첫번째 </ li> <li> 중간 </ li> <li> 마지막 </ li> </ ul>

간단하게 말하면,이 경우 childNodes [1]에서 childNodes [0] 참조할 수가 previousSibling.


element.nextSibling

요소의 직후 노드를 참조하십시오.

/ / js
var li02 = document. getElementsByTagName ('li')[1]; / / <li> 중간 </ li> 요소
alert(li02.nextSibling.firstChild.nodeValue) / / 마지막

/ / html
<ul id ="list"> <li> 첫번째 </ li> <li> 중간 </ li> <li> 마지막 </ li> </ ul>

이 경우 childNodes [1]에서 childNodes [2]를 참조 할 수있는 것이 nextSibling.


노드 작업

node.nodeValue

노드의 값을 참조.

/ / js
var par = document. getElementById ('syouji');
alert(par.firstChild.nodeValue); / / 헤이세이
alert(par.lastChild.firstChild.nodeValue); / / 빠삐뿌뻬뽀

/ / html
<p id =" syouji "> 헤이세이 <em> 빠삐뿌뻬뽀 </ em> </ p>

따라서 HTML 문서에서는 주로 텍스트 노드에 대해 대우가 많다.

육안에 부드럽게한다.

<p> <TextNode textContent ="헤이세이"> <em> <TextNode textContent ="빠삐뿌뻬뽀"> </ em> </ p>

여기는 노드 요소 (요소) 태그 효과, 텍스트도 노드임을 알 수 있다고 이해할 수있다.

http://www.atmarkit.co.jp/fxml/askxmlexpert/015tagelement/15tagelement.html

http://taro4.blog37.fc2.com/blog-entry-26.html


읽기 / 쓰기 모두 갈수 때문에 값을 변경할 수도있다.

/ / js
var par = document. getElementById ('syouji'); par.firstChild.nodeValue = '쇼와';

/ / html
<p id ="syouji"> 헤이세이 <em> 빠삐뿌뻬뽀 </ em> </ p >
/ / js 실행한 후에 html
<p id ="syouji"> 쇼와 <em> 빠삐뿌뻬뽀 </ em> </ p>

텍스트 노드 이외 nodeValue 취급 예로 속성 노드 값을들 수있다.

/ / js
var par = document. getElementById ('syouji');
alert(par.getAttributeNode ('id'). nodeValue); / / syouji

/ / html
<p id ="syouji"> 헤이세이 <em> 빠삐뿌뻬뽀 < / em> </ p>

getAttributeNode라는 메소드를 사용 특성 노드로 이동하여 해당 노드의 값을 가져옵니다있다.그러나 이렇게 대우하는 것은별로 없다. 이 경우 솔직하게 par.id로하는가 par.getAttirbute ( 'id') 충분히.


node.nodeName

노드의 이름을 참조하십시오.

/ / js
var par = document. getElementById ('syouji');
alert(par.nodeName); / / P
alert(par.firstChild.nodeName); / / # text
alert(par.lastChild.nodeName); / / EM

/ / html
<p id ="syouji"> 헤이세이 <em> 빠삐뿌뻬뽀 </ em> </ p>

요소 노드는 element.tagName와 동일한 요소 이름을 대문자로 반환한다. 다른 노드 이름을 반환 내용은 다음을 참조.


이 속성을 처리할 기회는별로 없을지도 모른다.


node.nodeType

노드 형식을 참조하십시오.

/ / js
var par = document. getElementById ('syouji');
alert(par.nodeType); / / 1
alert(par.getAttributeNode ('id'). nodeType); / / 2
alert(par.firstChild.nodeType) ; / / 3

/ / html
<p id ="syouji"> 헤이세이 <em> 빠삐뿌뻬뽀 </ em> </ p>

요소 노드는 1, 속성 노드 2, 텍스트 노드는 3을 반환한다. getAttributeNode 대해 여기서는 자세히 다루고 있지 않기 때문에 신경이 쓰이는 경우여기를 참고. 덧붙여두면, HTML 문서에서는 먼저 처리할 수 없으면 문제 때문에이 페이지에서 다루지 않는다.

다른 노드 형식에 대해서는 다음을 참고하시기 바랍니다.


위의 URL 주소는 영어이므로, 여기서는 일본어와 그에 대한 수치 표 그대로 유지한다. 기억할 필요가 없으며 모르면 기록해 두는 또는이 테이블을 見返せ하면 문제 없다.

개요 개요
1 요소 노드 7 처리 명령 노드
2 특성 노드 8 코멘트 노드
3 텍스트 노드 9 문서 노드
4 CDATA 섹션 10 문서 유형 선언 노드
5 엔티티 참조 노드 11 문서 조각
6 엔티티 선언 노드 12 표기법 선언 노드

태그 속성 사용

element.getAttribute ()

태그의 속성 값을 가져 오.

/ / js
var img = document. getElementById ('pimg');
var urlprop = img.src; / / 속성을 가져오는 방법
alert(urlprop); / / src 속성이 표시

var urlmethod = img.getAttribute ('src'); / / 메서드를 검색하는 방법
alert(urlmethod); / / src 속성이 표시

/ / html
<img src ="http://img.f.hatena.ne.jp/images/fotolife/s/sandai/ 20100403/20100403192301.jpg " id ="pimg">

속성 방법과 메서드를 사용하는 방법이 각각있다.


class 속성은 아무도가 통과하는 길을.

/ / js
var par = document. getElementById ('kamille');
var badcls = par.class; / / class 속성 값을 검색하는 생각이지만
alert(badcls) / / undefined or 오류
var goodcls = par.className; / / 'className'그렇다
alert(goodcls) / / char로 얻을 수있는

/ / html
<p id ="kamille" class="char"> 그런 어른! 수정거야! </ p>

par.getAttribute ( 'class')과 메서드를 사용하면 대략 'class'도 괜찮지만, IE7까지는 par.getAttribute ( 'className')를해야하고, 그러면 지금 다른 브라우저 class 속성 값 가져올 수 없습니다.

class 속성에 한해서는 메서드를 사용하지 않고 par.className가 무난.


나중 IE6, 7에 대해 자산 아니라 요소의 속성을 볼 것이다. 그래서, 예를 들어 이런 것들이있다.

/ / js
var par = document. getElementById ('kamille');
alert(par.getAttribute ('innerHTML')); / / 그런 어른! 수정거야!

/ / html
<p id ="kamille" class="char"> 그런 어른! 수정거야! </ p>

특성 innerHTML 않기 때문에 일반적으로 null을 반환해야하지만, IE6, 7 par.innerHTML으로 해석하고 있기 때문에 요소의 내용을 반환 것이다. 다른 style 속성도 같고, getAttribute 그러면 대단한 것이므로주의. IE8에서 괜찮아.


element.setAttribute ()

태그의 속성 값을 쓰기.

/ / js
var par = document. getElementById ('kamille'); par.className = 'gundam' / / 속성에서 class 속성 값을 수정
alert(par.className); / / gumdam

par.setAttribute ('id', 'newtype ') / / 메서드에서 id 속성 값을 수정
alert(par.id); / / newtype

/ / html
<p id ="kamille" class="char"> 그런 성인! 수정거야! </ p>
/ / js 실행한 후에 html
<p id ="newtype" class="gumdam"> 그런 어른! 수정거야! </ p>

구문

요소 setAttribute (속성 이름, 속성 값)

속성 방법과 메서드를 사용하는 방법이있다.


새 속성 값을 설정할 수있다.

/ / js
var par = document. getElementById ('kamille'); par.className = 'char'; / / 속성에서
par.setAttribute ('title', '이것이 청춘가'); / / 메서드

/ / html
< p id ="kamille"> 그런 어른! 수정거야! </ p>
/ / js 실행한 후에 html
<p id ="kamille" class="char" title ="이것이 청춘가"> 그런 어른! 수정거야! </ p>

element.getAttribute ()와 마찬가지로 IE7 다음은 자산 아니라 요소의 속성을 참조 버리므로주의.예를 들어 style 속성 값을 설정할 때 잘못된다.

/ / js
var par = document. getElementById ('kamille'); par.setAttribute ('style', 'color : # 000');

/ / html
<p id ="kamille"> 그런 어른! 수정거야! </ p>
/ / js 실행한 후에 html
<p id ="kamille" style =""> 그런 어른! 수정거야! </ p>

par.style = 'color : # 000'처럼 해석되고 있기 때문에 값이 설정되어 있지 않다. 이 메서드에서 style 속성을 조작하는 것은별로 없지만 일단주의. IE8에서 괜찮아.


element.removeAttribute ()

태그 속성 삭제.

var par = document. getElementById ('kamille'); par.removeAttribute ('id'); / / id 속성을 제거 

/ / html
<p id ="kamille" class="char"> 그런 어른! 수정거야! </ p>
/ / js 실행한 후에 html
<P class="char"> 그런 어른! 수정거야! </ p>

이것도element.getAttribute ()와 마찬가지로 IE7 다음은 자산 아니라 요소의 속성을 참조 버리므로주의. IE8에서 괜찮아.


document.createAttribute ()

속성 노드를 생성합니다.

/ / js
var par = document. getElementById ('kamille');
var t = document. createAttribute (