webAPI学习第四天-创建元素的三种方式

上课有些地方没有听懂,只好照着笔记写一遍增强记忆了(｡･∀･)ﾉﾞ

创建元素的三种方式

document.write()

document.write('新设置的内容<p>标签也可以生成</p>');

innerHTML

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

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

性能问题

1. innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。
2. 可以借助字符串或数组的方式进行替换，再设置给innerHTML
3. 优化后与document.createElement性能相近

事件详解

注册/移除事件的三种方式

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

box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
 console.log('点击后执行');
}

兼容代码

function addEventListener(element, type, fn) {
 if (element.addEventListener) {
   element.addEventListener(type, fn, false);
} else if (element.attachEvent){
   element.attachEvent('on' + type,fn);
} else {
   element['on'+type] = fn;
}
}

function removeEventListener(element, type, fn) {
 if (element.removeEventListener) {
   element.removeEventListener(type, fn, false);
} else if (element.detachEvent) {
   element.detachEvent('on' + type, fn);
} else {
   element['on'+type] = null;
}
}

温故而知新!!