문답

dom 대상의 innerText와 innerHTML는 어떤 차이가 있습니까?innerText: 대상 탭의 텍스트 내용을 가져오거나 설정할 수 있습니다

        

            
click me!
            this is a element test
        
        
            var ct = document.querySelector('#ct');
            console.log(ct.innerText);//click me!  this is element test
        

innerHTML: 대상 html 안의 html 구조를 가져오거나 설정할 수 있습니다

        

            
click me!
            this is a element test
        
        
            var ct = document.querySelector('#ct').innerHTML;
            console.log(ct);// <h1>click me!</h1> <a class="link" href="#">this is a element test</a>
        

elem.children과 elem.childNodes의 차이점은?children: 지정한 원소의 하위 원소 집합을 되돌려줍니다. 원소 노드만 포함하고 직접 하위 원소만 포함합니다.childNodes: 되돌아오는 내용은 텍스트 노드와 요소 노드를 포함하는 #text는 텍스트 노드이고 내용은 빈칸, 줄 바꾸기 또는 탭 등

    
        

            
click me! inside Span
            
        
        
            console.log(document.getElementsByTagName('h1')[0].children); //HTMLCollection[1]
            console.log(document.getElementsByTagName('h1')[0].childNodes);//NodeList[2]
        
    

조회 요소는 몇 가지 흔히 볼 수 있는 방법이 있습니까?① getElementById: ID 특징을 통해 대상을 반환하고 그 대상은 문서 안에 있는 특정한 요소에 대한 요소 ② getElementByClassName: 대상의 그룹을 반환하고 문서의 특정한 요소 노드에 대한 ③ getElementByTagName: 대상의 그룹을 반환하고 문서의 특정한 요소 노드 ④querySelectorAll: 현재 문서에 일치하는 선택기를 반환하고반환 대상 유형은 [NodeList](클래스 그룹 대상) ⑤querySelector: 단일 대상과 일치하며, 선택기에 따라 문서의 특정 요소 노드

에 대응합니다.

어떻게 원소를 만듭니까?어떻게 요소에 속성을 설정합니까?

  
   var img = document.createElement('img');
   img.id = 'myimg';
   /*or*/ img.setAttribute("class", "myimg");
   console.log(img); //<img id = "myimg">
  

요소의 추가, 삭제?원소의 추가 appendChild: 원소의 끝에 하위 원소 노드 추가

  

   
aaa
  
  
   var div = document.getElementById('laugh'),
    newConetent = document.createTextNode('hello');  
   div.appendChild(newConetent);// html hello   
  
// 
var div = document.createElement('div');
var newContent = document.createTextNode('hello');
newDiv.appendChild(newContent);

insertBefore: 요소 앞에 요소 노드 삽입

  

   
aaa
  
  
   var div = document.getElementById('laugh'),
   newContent = document.createTextNode('hello');
   div.insertBefore(newContent, div.firstChild);
  
// 
var newDiv = document.createElement('div');
var newContent = document.createTextNode('hello');
newDiv.insertbefore(newContent , newDiv.firstChild);

요소 삭제removeChild: 요소를 삭제합니다. 매개 변수는 삭제할 요소입니다.

parentNode.removeChild(childNode);

DOM0 이벤트와 DOM2 레벨은 이벤트 감청 사용 방식에 있어 어떤 차이가 있습니까?DOM0: 모든 요소는 자신의 시간 처리 프로그램 속성을 가지고 있습니다. 이런 속성 이름은 보통 소문자입니다. 예를 들어 onclick 등입니다.이러한 속성의 값을 함수로 설정하면 이벤트 처리 프로그램을 지정할 수 있습니다.예:

        

        
            var btn = document.getElementById('btn');
            btn.onclick = function display() {
                alert(this.value);
            }
        

이벤트 처리 프로그램은 원소의 방법으로 여겨진다. 이벤트 처리 프로그램은 원소의 역할 영역에서 실행되고this는 현재의 이 원소이기 때문에button을 클릭한 결과: Don't clike me anymore...이벤트 처리 프로그램을 삭제하려면 원소 onclick의 속성을null로 설정하면 됩니다.
DOM2: DOM2 레벨 시간은 이벤트 프로세서를 지정하고 삭제하는 두 가지 방법을 정의합니다

1、addEventListener
2、removeEventListner

모든 DOM 노드에는 세 가지 매개변수를 적용하는 두 가지 방법이 있습니다.

1、 
2、 
3、 ， true ， false 。

//expamle

        

        
            var btn = document.getElementById('btn');
            btn.addEventListener('click',function(){
                alert(this.value);
            },false)
        

DOM2는 위 코드에 여러 개의 이벤트 처리 프로그램을 추가할 수 있지만 DOM은 안 됩니다.이벤트 프로세서를 제거하려면removeEventListener만 필요합니다. 제거할 때의 매개 변수는 추가할 때와 같습니다. (익명 함수는 제거할 수 없습니다.)

attach Event와add Event Listener의 차이점은?

1. attach Event는 IE에 사용됩니다. IE가ddEventListener를 지원하지 않기 때문입니다.2. 매개 변수에 addEventListener는 3개의 매개 변수(유형, 함수, 부울 값)를 수신할 수 있고,attachEvent는 2개의 매개 변수(유형, 함수)는 이벤트 거품만 지원합니다.3. 함수 제거: 예를 들어addEventListener 제거 방법은removeEventListener이지만 accachEvent의 제거 방법은detachEvent입니다.4. 유형 이름:addeventListener의 수신 유형은'click'이지만attachEvent의 수신 유형은'onclick'이다.5. 역할 영역:addevent Listener 역할 영역은 요소 자체,this는 클릭한 트리거 요소를 가리키며attach Event의 역할 영역은 전역,this는 전역적인 window를 가리킨다~6. 이벤트 처리 프로그램의 실행 순서:addevent Listener는 추가 순서에 따라 실행하고attach Event 순서는 불규칙적이다(첨가가 적을 때 대부분 반순서로 실행하고 많이 추가하면 불규칙적이다)

IE 이벤트 거품과 DOM2 이벤트 전파 메커니즘을 설명합니까?1. IE 이벤트 거품: 이벤트 촉발은 구체적인 첫 번째 촉발된 요소에 의해 접수된 다음에 1급 1급 인터넷 전파 2, DOM2 이벤트 전파: 이벤트 포획 단계로 나뉘어 목표 단계, 이벤트 거품 단계에 있다.먼저 발생한 것은 사건 포획이고, 그 다음은 실제 목표가 사건을 접수하며, 마지막은 거품 단계

어떻게 사건의 거품을 막습니까?기본 이벤트를 어떻게 막습니까?코드 btn.stopPropagation () 방법은 사용자가 DOM층에서 이벤트의 전파를 즉시 멈추고 이벤트의 거품을 막는 데 사용됩니다. 일반적으로 이벤트가 바디로 전파되는 것을 막는 데 사용됩니다. (문서 노드에서 다른 이벤트 핸들이 호출되는 것을 막을 수 없습니다.)

        

        
            var btn = document.getElementById('btn');
            btn.addEventListener('click',function(e){
                console.log(e);
                alert(this.value);
                e.stopPropagation();//this is the point
            },false)
            document.body.addEventListener('click',function(){
                alert("what the hell? I'm anonymous");
            },false)
            
        

코드

다음 코드가 있습니다. 모든 요소 리를 눌렀을 때 컨트롤러에서 이 요소의 텍스트 내용을 보여 주십시오.호환성 고려 안 함

 
 
  
 6 
//todo ...

//답

    
        

            
here
            
we
            
go~!!
        
        
            var lists = document.getElementsByClassName('content')[0].getElementsByTagName('li');
            for(i = 0; i < lists.length; i++) {
                lists[i].addEventListener('click', function() {
                    console.log(this.innerText);
                })
            }
        
    

코드를 보완하려면 1. 버튼 을 누르면

요소 앞에 새로운 요소를 추가해야 한다. 내용은 사용자가 입력한 비공식 문자열이다. 를 눌렀을 때

6

사용자가 입력한 비공식 문자열을 추가합니다.2. 각 요소li를 클릭하면 컨트롤러에서 이 요소의 텍스트 내용을 보여 줍니다.

        

            
 
            
            
 6 
        
        
         
         
        
            //todo ...
        

//답

        

            
 
            
            
 6 
        
        
         
         
        
            var ct = document.getElementsByClassName('ct')[0];
            var content = document.getElementsByClassName('ipt-add-content')[0];
            var btnStart = document.getElementById('btn-add-start');
            var btnEnd = document.getElementById('btn-add-end');
            btnStart.addEventListener('click', handler);
            btnEnd.addEventListener('click', handler);

            function handler(e) {
                var newE = document.createElement('li');
                var newContent = document.createTextNode(content.value);
                newE.appendChild(newContent);
                if(e.target.id === 'btn-add-start') {
                    ct.insertBefore(newE, ct.firstChild)
                } else {
                    ct.appendChild(newE);
                }

            }
            ct.addEventListener('click', function(e) {
                    console.log(e.target.innerText)
                }, false)
                // 

            // 
            //    
            //          var listArr = document.getElementsByClassName('ct')[0].getElementsByTagName('li');
            //          for(var i =0; i< listArr.length; i++){
            //              listArr[i].addEventListener('click',function(){
            //                  console.log(this.innerText);
            //              })
            //          }

            // 
            //          var bttttttnnn = document.querySelector('.ct');
            //          bttttttnnn.addEventListener('click', function(e) {
            //                  console.log(e.target.innerText);
            //              })
        

보완 코드, 요구: 마우스를 li 요소에 놓으면 img-preview에 현재 li 요소의 data-img에 대응하는 그림을 보여 줍니다.

• 1
• 2
• 3

var ct = document.querySelector('.ct'), childs = ct.querySelectorAll('li'), preview = document.querySelector('.img-preview'); // for(var i = 0; i < childs.length; i++) { // childs[i].addEventListener('mouseenter', function() { // var dataImg = this.getAttribute('data-img'); // preview.innerHTML = '![](' + dataImg + ')' // }); // } // ct.addEventListener('mouseover',show) function show(e){ var src = e.target.getAttribute('data-img'); preview.innerHTML='![]('+src+')'; }

다음 그림의 탭 전환 기능을 지원하는 OMG

아래 그림의 모드 프레임 기능을 실현하는 btn-cover