DOM的相关概念

一、DOM常规操作

1、获取元素

根据id获取元素

var div = document.getElementById('main');
console.log(div);

根据标签名获取元素（返回的是一个数组）

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

根据类名获取元素

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

根据选择器获取元素

var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

2、创建元素的方式
document.writer()
document.write(‘新设置的内容

标签也可以生成

’);
缺陷：如果是在页面加载完毕后，此时通过这种方式创建元素，那么页面上存在的所有的内容会全部被覆盖

innerHTML

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';

innerHTML和innerText的区别
如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的；
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的；
总结:想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);//把创建后的子元素追加到父级元素当中

3、注册事件的三种方式
对象.addEventListener() ----只有IE8不支持
参数1：事件的类型—事件的名字,没有on
参数2：事件处理函数—函数
参数3：布尔类型，默认false
box.addEventListener(‘click’, eventCode, false);

对象.οnclick=function(){}----只有绑定单一事件

var box = document.getElementById('box');
box.onclick = function () {
  console.log('点击后执行');
};
box.onclick = null；

对象.attachEvent()----只有IE8支持
参数1：事件类型—事件名字，有on
参数2：事件处理函数—函数
box.attachEvent(‘onclick’, eventCode);