이번에는 JS Dom과 이벤트에 대한 요약을 가져오겠습니다. 주의할 점은 무엇인가요 다음은 실제 사례입니다. 함께 살펴볼까요?
Html 태그를 포함하여 개체의 시작 위치부터 끝 위치까지의 전체 내용을 의미합니다. innerText는 시작 위치부터 끝 위치까지의 내용을 의미하지만 HTML 태그를 제거합니다.
1.getElementById
DOM은 id 속성에 해당하는 노드 객체를 반환하는 getElementById라는 메서드를 제공합니다.
2.
getElementsByTagName이 메소드는 객체 배열을 반환합니다(정확히 말하면 HTMLCollection은 진정한 의미의 배열이 아닙니다). 각 객체는 문서에서 지정된 태그가 있는 요소에 해당합니다. getElementById와 유사하게 이 메소드는 하나의 매개변수만 제공하며 해당 매개변수는 지정된 태그의 이름입니다.
3.getElementsByClassName
태그를 지정하여 요소를 얻는 것 외에도 DOM은 지정된 클래스 이름을 가진 요소를 얻는 getElementsByClassName 메서드도 제공합니다.
createElement()는 Document 개체의 메서드입니다. 이 메서드는 지정된 요소 이름을 기반으로 Element 개체를 반환합니다.
2. 생성된 요소 노드의 속성을 설정합니다.
요소를 생성한 후 요소에 대한 CSS 스타일 설정, 클릭 이벤트 추가 등과 같은 요소 속성을 설정해야 할 수도 있습니다. 요소 속성을 설정하려면 Element 객체의 setAttribute 메소드를 사용하거나 속성 이름을 사용하여 설정할 수 있습니다.
3. DOM 문서의 지정된 위치에 요소 노드를 삽입합니다.
요소가 생성된 후 DOM 문서의 지정된 위치에 요소 노드를 삽입해야 합니다. Element 객체의 insertBefore() 메서드입니다. AppendChild()
메소드는 요소에 새로운 자식 노드를 추가하는 것이며, 추가된 자식 노드는 마지막 자식 노드가 됩니다. insertBefore() 메소드는 기존 노드 앞에 새 노드를 삽입하는 데 사용되며, 추가된 노드는 형제 노드가 됩니다.
요소 삭제: HTML 요소를 삭제해야 하는 경우 먼저 해당 요소의 상위 요소를 얻은 다음 RemoveChild를 사용하여 해당 요소를 삭제해야 합니다.
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);
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('li')
for(var i=0;i<item.length;i++){
item[i].addEventListener('click', function(){
console.log(this.innerText);
})
} */
//方法二
var item = document.getElementsByTagName('li')
for(var i=0;i<item.length;i++){
item[i].addEventListener('click', function(){
console.log(this.innerText);
})
}
</script>전체 코드, 요구 사항:
1 처음에 추가할 버튼을 클릭할 때 여기는 내용은 사용자가 입력한 비어 있지 않은 문자열입니다. 추가하려는 끝을 클릭하면 <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('.ct')var start = document.getElementById('btn-add-start');var end = document.getElementById('btn-add-end');var input = document.querySelector(".ipt-add-content");
end.addEventListener('click',function(){ var list = document.createElement('li'); list.innerText = input.value ct.appendChild(list); }) start.addEventListener('click',function(){ var list = document.createElement('li'); list.innerText = input.value ct.insertBefore(list,ct.firstChild); }) ct.addEventListener('click', function(e){ if(e.target.tagName.toLowerCase() === 'li'){ console.log(e.target.innerText); } }); </script> <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('.ct')var list = document.getElementsByTagName('li')var preview = document.querySelector('.img-preview')for(var i=0;i<list.length;i++){list[i].addEventListener('mouseover',function(){if(document.querySelector('img')){preview.removeChild(document.querySelector('img'))console.log(1)}var item = document.createElement('img')var img = this.getAttribute('data-img')preview.appendChild(item)item.src=img;
}) } </script>관련 읽기:
파이썬을 사용하여 이미지 유사성을 확인하는 방법이미지 다운로드를 위한 javascript 스크립트위 내용은 JS Dom 및 이벤트 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
