JS-NO.6

5048 단어
DOM에서 요소를 가져오는 방법
  • id 획득: var oDiv=document.getElementById('div1'); 문서만 사용할 수 있음을 주의하십시오.
  • class 가져오기:document.getElementsByClassName('haha'); 한정된 범위 내에서 원소 획득 가능
  • tagName: 범위를 제한하여 원소를 획득할 수 있음
  • querySelect
  • tag
  • '#'id
  • .class

  • querySelectAll; 주의,querySelectAll에서 얻은 요소는 페이지의 유일한 id라도 []를 추가해야 합니다.

  • 노트
    |nodeType|nodeName | nodeValue | ---| - 텍스트 노드 | 3 | "#text"| 텍스트 내용 요소 노드 | 1 | 대문자 라벨 이름 | null 주석 노드 | 8 | #comment | 주석 내용 문서 노드 | 9 | document | null
    노드 관계
  • children 서브원소
  • 일반적인 상황은 호환되지만 IE7/8에서 주석이 있으면 정확하게 받지 못합니다.

  • childNodes가 모든 하위 노드를 가져옴
  • parentNode 부모 요소;구조상의 부급을 든다.
  • previous Sibling 이전 오빠 노드
  • 넥스트시블링 다음 동생 노드
  • 긴 곱셈표 + 확장
    
    
    
        
           :    ,    
        
    
    
    
      (function () { var oUl=document.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var str=''; var oldBg=null; // , for(var i=1; i<=9; i++){ str+='<li>' for(j=1; j<=i; j++){ str+='<span>'+(j+'*'+i+'='+j*i)+'</span>' } str+='</li>' } oUl.innerHTML=str; // , , % ; for(var i=0; i<aLi.length; i++){ aLi[i].className='bg'+i%3; // : , , ; /*aLi[i].oldBg='bg'+i%3;// , li , ; aLi[i].onmouseover=function () { this.className='change'; }; aLi[i].onmouseout=function () { // , , oldBg ; this.className=this.oldBg; };*/ // 2: aLi[i].onmouseover=function () { oldBg=this.className; this.className='change'; }; aLi[i].onmouseout=function () { this.className=oldBg; } } })();

    getChildren

    
    
    
        
           :    ,    
    
    
    
    
    var oDiv=document.getElementsByTagName('div')[0]; var aP=getChildren(oDiv,'p'); var aSpan=getChildren(oDiv,'span'); var aChild=getChildren(oDiv); function getChildren(parent,tagName) { //1: , var aChilds=parent.childNodes; //2: , var ary=[]; for(var i=0; i<aChilds.length; i++){ var cur=aChilds[i]; if(cur.nodeType===1){ /*if(typeof tagName==='undefined'){// , ary.push(cur) }else{// , ; if(cur.tagName.toLowerCase()===tagName.toLowerCase()){ ary.push(cur); } }*/ tagName?cur.tagName.toLowerCase()===tagName.toLowerCase()&&ary.push(cur):ary.push(cur); } } return ary; }

    previouseSbling
    
    
    
        
           :    ,    
    
    
    
    1 div
    111111 22222 33333
    2 div
    3 div
    4 div
    5 div
    var oDiv=document.getElementsByTagName('div')[0]; var aDiv=oDiv.getElementsByTagName('div'); // : ; /* * : ; * : * : ; * */ /** * : * @param curEle * @returns preEle */ function prev(curEle){ // , previousElementSibling if(curEle.previousElementSibling){ return curEle.previousElementSibling; } // previousElementSibling var prev=curEle.previousSibling; // : , , while(prev && prev.nodeType !==1){ prev=prev.previousSibling; } return prev; }

    좋은 웹페이지 즐겨찾기