웹 페이지가로드되면 브라우저는 페이지의 문서 개체 모델을 만듭니다. Node.js는 DOM을 통해 HTML에서 작동합니다.
DOM 문서 객체 모델
문서 -문서는 전체 HTML 웹 페이지 문서를 나타냅니다.
Object -Object는 페이지의 모든 부분이 객체로 변환됨을 의미합니다.
모델-모델을 사용하여 개체 간의 관계를 나타내므로 개체를 얻을 수 있습니다.
HTML DOM 모델은 객체 트리 로 구성 됩니다 .
마디
HTML 요소를 찾는 방법
문서 노드 발견 요소
document.getElementById(); //通过元素id找到一个HTML元素节点对象
document.getElementsByTagName(); //通过元素标签名找到一组HTML元素节点对象
document.getElementsByNama(); //通过name属性找到一组HTML元素节点对象
DOM 쿼리
//document中有一个body属性 ，他保存的是bady的引用
//document.documentElement保存的是html根标签
//document.all代表页面中的所有元素
var body =document.body;
var html =document.documentElement
var all = document.all;
document.getElementsByClassName(""); DOM 추가
document.getElementById() // 获取某document中的子节点
document.createTextNode() // 创建新节点中的文本
document.createElement() //创建新节点
父节点.appendChild(li); //添加子节点
子节点.parentNode() //获取父元素
父节点.removeChild () //删除节点
父节点.replaceChild //替换子节点행사
이벤트는 문서 또는 브라우저 창에서 발생하는 상호 작용의 특정 순간입니다.
Javascript와 HTML 간의 상호 작용은 이벤트를 통해 이루어집니다. Javascript의 일반적인 이벤트는 이전 블로그에서 언급되었습니다.
이벤트 객체
이벤트 응답 기능이 트리거되면 브라우저는 매번 응답 기능에 이벤트 객체를 실제 매개 변수로 전달합니다. 마우스의 좌표, 누르는 버튼, 스크롤 휠의 움직임과 같은 현재 이벤트와 관련된 모든 정보가 이벤트 객체에 캡슐화됩니다.
<script type="text/javascript">
/*
*键盘控制使div根据不同方向移动
*/
window.onload = function(){
document.onkeydown = function(event){
event=event || window.event;
console.log(event.keyCode);
switch(event.keyCode){
case 37 :
//alert("向左");
box1.style.left=box1.offsetLeft -10 +"px";
break;
case 39 :
//alert("向右");
box1.style.left=box1.offsetLeft +10 +"px";
break;
case 38 :
//alert("向上");
box1.style.top=box1.offsetTop -10 +"px";
break;
case 40 :
//alert("向下");
box1.style.top=box1.offsetTop +10 +"px";
break;
}
};
};
</script>이벤트 버블 링 (Bubble)
소위 이벤트 버블 링 (bubbling of events)은 이벤트의 상향 전송이며 하위 요소에 대한 이벤트가 트리거되면 상위 요소의 동일한 이벤트도 트리거됩니다!
이벤트 위임
이벤트는 요소의 공통 상위 요소에 바인딩되어 있으므로 하위 요소의 이벤트가 트리거되면 상위 요소로 버블 링되므로 상위 요소의 응답 기능을 통해 이벤트를 처리 할 수 있습니다.
이벤트 위임은 버블 링을 사용하여 이벤트 바인딩 수를 줄이고 프로그램 성능을 향상시킬 수 있습니다.
이 블로그가 도움이된다면 메시지 + 좋아요를 남겨주세요.