JS Dom 및 이벤트 요약

php中世界最好的语言원래의: 2018-03-08 15:08:241584검색

이번에는 JS Dom과 이벤트에 대한 요약을 가져오겠습니다. 주의할 점은 무엇인가요 다음은 실제 사례입니다. 함께 살펴볼까요?

dom 객체의 innerText와 innerHTML의 차이점은 무엇인가요?

innerHTML은

Html 태그를 포함하여 개체의 시작 위치부터 끝 위치까지의 전체 내용을 의미합니다. innerText는 시작 위치부터 끝 위치까지의 내용을 의미하지만 HTML 태그를 제거합니다.

elem.children과 elem.childNodes의 차이점은 무엇인가요?

노드(node)는 DOM 계층 구조에 있는 모든 유형의 객체에 대한 공통 이름입니다. 요소 노드, 속성 노드, 텍스트 노드, 주석 노드 등과 같은 다양한 유형의 노드가 있습니다. Element는 Node 클래스를 상속합니다. 즉 Element는 Node의 여러 유형 중 하나입니다. 즉, NodeType이 1이면 Node는 Node를 확장하고 Element는 id, class, children과 같은 속성을 갖습니다. . children은 Element의 속성이고, childNodes는 Node의 속성입니다.

요소를 쿼리하는 일반적인 방법은 몇 개인가요?

요소를 얻는 일반적인 방법에는 요소 ID, 태그 이름, 클래스 이름 등 세 가지가 있습니다.

1.getElementById
DOM은 id 속성에 해당하는 노드 객체를 반환하는 getElementById라는 메서드를 제공합니다.
2.
getElementsByTagName이 메소드는 객체 배열을 반환합니다(정확히 말하면 HTMLCollection은 진정한 의미의 배열이 아닙니다). 각 객체는 문서에서 지정된 태그가 있는 요소에 해당합니다. getElementById와 유사하게 이 메소드는 하나의 매개변수만 제공하며 해당 매개변수는 지정된 태그의 이름입니다.
3.getElementsByClassName
태그를 지정하여 요소를 얻는 것 외에도 DOM은 지정된 클래스 이름을 가진 요소를 얻는 getElementsByClassName 메서드도 제공합니다.

요소를 만드는 방법은 무엇입니까? 요소에 속성을 설정하는 방법은 무엇입니까?

1.createElement(name)는 요소 노드를 생성합니다.

createElement()는 Document 개체의 메서드입니다. 이 메서드는 지정된 요소 이름을 기반으로 Element 개체를 반환합니다.
2. 생성된 요소 노드의 속성을 설정합니다.
요소를 생성한 후 요소에 대한 CSS 스타일 설정, 클릭 이벤트 추가 등과 같은 요소 속성을 설정해야 할 수도 있습니다. 요소 속성을 설정하려면 Element 객체의 setAttribute 메소드를 사용하거나 속성 이름을 사용하여 설정할 수 있습니다.
3. DOM 문서의 지정된 위치에 요소 노드를 삽입합니다.
요소가 생성된 후 DOM 문서의 지정된 위치에 요소 노드를 삽입해야 합니다. Element 객체의 insertBefore() 메서드입니다. AppendChild()
메소드는 요소에 새로운 자식 노드를 추가하는 것이며, 추가된 자식 노드는 마지막 자식 노드가 됩니다. insertBefore() 메소드는 기존 노드 앞에 새 노드를 삽입하는 데 사용되며, 추가된 노드는 형제 노드가 됩니다.

요소를 추가하거나 삭제하시나요?

요소 추가: createElement를 사용하여 요소 추가

요소 삭제: HTML 요소를 삭제해야 하는 경우 먼저 해당 요소의 상위 요소를 얻은 다음 RemoveChild를 사용하여 해당 요소를 삭제해야 합니다.

DOM0 이벤트와 DOM2 레벨 이벤트 수신 방법의 차이점은 무엇인가요?

DOM0 이벤트: DOM0 이벤트는 이벤트를 노드에 직접 바인딩하는 것을 의미합니다. 노드는 하나의 이벤트만 바인딩할 수 있습니다. 그렇지 않으면 뒷면의 회색이 앞면을 덮게 됩니다.

var oBtn = document.querySelctor('#btn');
oBtn.onclick=function(){
console.log('a')
};
DOM2 이벤트: DOM2 수준 이벤트는 여러 이벤트를 하나의 요소에 바인딩할 수 있습니다. 이벤트, 후속 이벤트는 이전 이벤트를 덮어쓰지 않습니다. 매개변수 true 및 false를 통해 버블링 단계 또는 캡처 단계에서 이벤트를 트리거하도록 이벤트를 설정할 수 있습니다. 이벤트를 제거하려면 RemoveEventListener를 사용하세요.
oBtn.addEventListener("click",function(){
});
oBtn.removeEventListener("click",fn,false);

attachEvent와 addEventListener의 차이점은 무엇인가요?

1. addEventListener와 attachmentEvent 간의 호환성 문제

addEventListener는 W3C 사양을 준수하는 이벤트 바인딩 방법으로, 모두 이를 사용하여 이벤트를 바인딩합니다.
attachEvent는 IE 전용이며 W3C 사양을 준수하지 않습니다. 또한 IE에서는 이벤트 바인딩에만 사용할 수 있으며 addEventListener는 유효하지 않습니다.
따라서 이벤트를 바인딩하려면 호환성 문제를 처리해야 합니다.
2. addEventListener 및 attachmentEvent
addEventListener에는 3개의 매개변수가 있습니다: element.addEventListener(type,listener,useCapture)
attachEvent에는 2개의 매개변수가 있습니다: element.attachEvent(type,listener);
3. 함수 regEvent( ele, event_name, fun)
{
if (window.attachEvent)
ele.attachEvent(event_name, fun) //
IE browser
else{
event_name = event_name.replace(/^on/, "") ; //on으로 시작하는 경우 onclick->click
ele.addEventListener(event_name, fun, false) //IE가 아닌 브라우저
}
}

IE 이벤트 버블링 및 DOM2 이벤트 설명 전파 메커니즘?

IE 이벤트 버블링: 이벤트는 트리거 요소에서 시작하여 html 요소까지 상위 요소로 레벨별로 전달됩니다.
DOM2 이벤트: 이벤트 전파는 캡처 단계, 이벤트 대상 단계, 버블링 단계의 3단계로 구분됩니다. 이벤트 리스너는 캡처 단계 또는 버블링 단계 중 하나만 실행하도록 선택할 수 있습니다.
캡처 단계: 이벤트가 발생하면 루트 노드부터 시작하여 레벨별로 검색하여 대상 요소를 파악합니다.
버블링 단계: 트리거 요소부터 시작하여 html 요소까지 이벤트가 상위 요소로 레벨별로 전달됩니다.

이벤트 버블링을 방지하는 방법은 무엇인가요? 기본 이벤트를 방지하는 방법은 무엇입니까?

이벤트 버블링 방지: w3c의 메서드는 e.stopPropagation()이고 IE는 e.cancelBubble = true를 사용합니다.
기본 이벤트 방지: w3c의 메서드는 e.preventDefault()이고 IE는 e.returnValue = false를 사용합니다.

Q&A

요소를 클릭할 때 콘솔이 각 요소 li의 텍스트 콘텐츠를 표시하도록 요구하는 다음 코드가 있습니다.

 <ul class="ct">
      <li>这里是</li>
      <li>饥人谷</li>
      <li>前端6班</li>
  </ul>
  <script>
  //todo ...
  </script>

코드와 호환되지 않는 것으로 간주:

<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
//方法一
/*var item = document.getElementsByClassName("ct")[0].getElementsByTagName(&#39;li&#39;)
for(var i=0;i<item.length;i++){
item[i].addEventListener(&#39;click&#39;, function(){
console.log(this.innerText);
})
} */
//方法二
var item = document.getElementsByTagName(&#39;li&#39;)
for(var i=0;i<item.length;i++){
item[i].addEventListener(&#39;click&#39;, function(){
console.log(this.innerText);
})
}
</script>

전체 코드, 요구 사항:

1 처음에 추가할 버튼을 클릭할 때 5a8028ccc7a7e27417bff9f05adf5932여기는bed06894275b65c1ab86501b08a632eb 내용은 사용자가 입력한 비어 있지 않은 문자열입니다. 추가하려는 끝을 클릭하면 25edfb22a4f469ecb59f1190150159c6Frontend 6 Classbed06894275b65c1ab86501b08a632eb 뒤에 사용자가 입력한 비어 있지 않은 문자열이 표시됩니다. 각 요소 li를 클릭할 때 이 요소의 텍스트 콘텐츠입니다.

<ul class="ct">
<li>这里是</li>
<li>555</li>
<li>666</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//todo ...
</script>

코드:

<ul class="ct">
<li>这里是</li>
<li>666</li>
<li>555</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>

<script>var ct = document.querySelector(&#39;.ct&#39;)var start = document.getElementById(&#39;btn-add-start&#39;);var end = document.getElementById(&#39;btn-add-end&#39;);var input = document.querySelector(".ipt-add-content");
     end.addEventListener(&#39;click&#39;,function(){            var list = document.createElement(&#39;li&#39;);        list.innerText = input.value        ct.appendChild(list);      })      start.addEventListener(&#39;click&#39;,function(){            var list = document.createElement(&#39;li&#39;);        list.innerText = input.value        ct.insertBefore(list,ct.firstChild);      })      ct.addEventListener(&#39;click&#39;, function(e){          if(e.target.tagName.toLowerCase() === &#39;li&#39;){           console.log(e.target.innerText);          }      });     </script>

코드 완성, 요구 사항: 마우스를 li 요소에 놓으면 현재 li 요소의 data-img에 해당하는 이미지가 img-preview에 표시됩니다.

 <ul class="ct">
      <li data-img="1.png">鼠标放置查看图片1</li>
      <li data-img="2.png">鼠标放置查看图片2</li>
      <li data-img="3.png">鼠标放置查看图片3</li>
  </ul>
  <div class="img-preview"></div>
  <script>
  //todo ...
  </script>

코드:

<ul class="ct"><li data-img="http://img5.imgtn.bdimg.com/it/u=3425851328,2681317699&fm=21&gp=0.jpg">鼠标放置查看图片1</li><li data-img="http://pic24.nipic.com/20121003/10754047_140022530392_2.jpg">鼠标放置查看图片2</li><li data-img="http://img2.3lian.com/img2007/4/22/303952037bk.jpg">鼠标放置查看图片3</li></ul><div class="img-preview"></div><script>var ct = document.querySelector(&#39;.ct&#39;)var list = document.getElementsByTagName(&#39;li&#39;)var preview = document.querySelector(&#39;.img-preview&#39;)for(var i=0;i<list.length;i++){list[i].addEventListener(&#39;mouseover&#39;,function(){if(document.querySelector(&#39;img&#39;)){preview.removeChild(document.querySelector(&#39;img&#39;))console.log(1)}var item = document.createElement(&#39;img&#39;)var img = this.getAttribute(&#39;data-img&#39;)preview.appendChild(item)item.src=img;
    })      }    </script>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!