9.11总结

DOM(document object model:文档对象模型)

DOM树
节点类型：文本节点，元素节点，属性节点
获取元素：document.getElementById();
document.getElementsByClassName();
document.getElementsByTagName();
绑定事件
事件：onclick onmouseover onmouseout
三要素：绑定元素，事件类型，事件处理函数
var btn=document.getElementById(‘btn’);
btn.οnclick=function(){
console.log(‘onclick’);
}
btn.οnmοuseοver=function(){
btn.style.background=‘red’
console.log(‘onmouseover’);
}
btn.οnmοuseοut=function(){
btn.style.background=‘white’
console.log(‘onmouseout’);
}
btn.οnmοusemοve=function(){
console.log(‘onmousemove’);
}
节点操作
1.先获取要操作的标签：
var inp=document.getElementById(‘msg’)
var list=document.getElementsByClassName(‘list’)
2.给input绑定键盘事件：
键盘事件：onkeydown onkeyup
inp.οnkeydοwn=function(e){
判断是否是回车键：
if(e.keyCode===13){
创建一个li标签：
var li=document.createElement(‘li’);
给li里赋值成input框输入的内容：
li.innerHTML=inp.value;
添加到指定元素里：
list.appendChild(li);
li.οnclick=function(){
list.removeChild(this);
}
ul中添加一个li标签：
list.innerHTML=’

• ’+inp.value+’
• ’;
  }
  }
  先获取li：
  var lis=list.children;
  给li绑定点击事件：
  for(var i=0;i<lis.length;i++){
  lis[i].οnclick=function(){
  list.removeChild(this);
  }
  }