DOM

1.getElementsByTagName 通过标签名获取元素 返回的是一个HTML集合

2.getElementsById 通过id获取元素

3. 类数组 length属性代表这个类数组的长度 其他数组的方法都没有

4. getElementsByTagName 方法不仅是document对象下的方法，在html元素上也可以调用

5.getElementsByName 通过name来获取元素 返回的是一个NodeList类数组

6.有length属性 数组里提供的方法均不能用

• 1
• 2
• 3

• 11
• 22
• 33
• 44
• 55

var aLi = document.getElementsByTagName('li'); console.log(aLi); console.log(aLi.length); 【HTMLCollection(8) 0:li 1:li 2:li 3:li 4:li 5:li 6:li 7:li length:8】 【8】

7.onclick 鼠标单击事件 var oDiv=document.getElementById('btn');

// onclick 鼠标单击事件
oDiv.onclick = function(e) {
  console.log(e);
  //e.clientX x轴坐标
  //e.clientY y轴坐标
  alert('click');
}

// ondblclick 鼠标双击事件
oDiv.ondblclick = function() {
  alert('双击666');
}


// 鼠标划入
oDiv.onmouseover = function() {
  //font-size => fontSize
  oDiv.style.background = 'pink';
}
 // 鼠标划出
oDiv.onmouseout =  function() {
  oDiv.style.background = 'white';
}

// background-color
// onfocus 元素获取焦点
// oDiv.style.xxx 设置元素的样式
// oDiv.className 设置元素的class 
 // oInput.style.backgroundColor = 'red';
  // onchange 内容改变
oInput.onchange = function() {
  console.log(oInput.value); // input里面的value属性
}
// onblur 元素失去焦点
oInput.onblur = function() {
  oInput.className = '';
  // oInput.style.backgroundColor = 'white';
}

var oD1 = document.getElementById('main');
// 鼠标按钮被按下。
oD1.onmousedown =  function() {
  console.log('onmousedown');
}

// 鼠标松开
oD1.onmouseup = function() {
  console.log('onmouseup');
}

// 鼠标移动
oD1.onmousemove = function() {
  console.log('onmousemove');
}

var oList = document.getElementById('list');
oList.onchange = function(){
  console.log('change!');
}