When the web page is loaded, the browser creates the Document Object Model of the page. js operates on HTML through DOM
DOM document object model
Document -the document represents the entire HTML web page document
Object -Object means that every part of the page is converted into an object
Model -use model to represent the relationship between objects, so that we can get the object
The HTML DOM model is structured as a tree of objects :
node
How to find HTML elements
document node found element
document.getElementById(); //通过元素id找到一个HTML元素节点对象
document.getElementsByTagName(); //通过元素标签名找到一组HTML元素节点对象
document.getElementsByNama(); //通过name属性找到一组HTML元素节点对象
DOM query
//document中有一个body属性 ，他保存的是bady的引用
//document.documentElement保存的是html根标签
//document.all代表页面中的所有元素
var body =document.body;
var html =document.documentElement
var all = document.all;
document.getElementsByClassName(""); DOM addition
document.getElementById() // 获取某document中的子节点
document.createTextNode() // 创建新节点中的文本
document.createElement() //创建新节点
父节点.appendChild(li); //添加子节点
子节点.parentNode() //获取父元素
父节点.removeChild () //删除节点
父节点.replaceChild //替换子节点event
Events are specific moments of interaction that occur in the document or browser window
The interaction between Javascript and HTML is achieved through events. Common events in Javascript have been mentioned in the previous blog
Event object
When the event response function is triggered, the browser will pass an event object as an actual parameter into the response function every time. All information related to the current event is encapsulated in the event object, such as the coordinates of the mouse, the button being pressed, and the movement of the scroll wheel
<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>Bubbling of events (Bubble)
The so-called bubbling of events is the upward transmission of events. When an event on a descendant element is triggered, the same event of the parent will also be triggered!
Delegation of events
The event is bound to the common ancestor element of the element, so that when the event on the descendant element is triggered, it will bubble up to the ancestor element, so that the event can be handled through the response function of the ancestor element.
The delegation of events uses bubbling, which can reduce the number of event bindings and improve the performance of the program.
If this blog is helpful to you, please remember to leave a message + like it.