day12

day12

自定义属性操作

• getAttribute() 获取标签行内属性

• setAttribute() 设置标签行内属性

• removeAttribute() 移除标签行内属性

• 与element.属性的区别: 上述三个方法用于获取任意的行内（自定义）属性。

样式(css)操作

样式显示在标签行内

var div1 = document.getElementById('div1');
div1.style.width = '100px';

属性值是字符串，必须加上单位

类名操作

• 修改标签的className属性相当于直接修改标签的类名

var box = document.getElementById('box');
box.className = 'show';
class属性为什么用className来表示
class是关键字，定义变量，属性不能用关键字

案例

• 图片切换二维码案例

  css精灵技术

创建元素的三种方式

document.write()

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

innerHTML与innerText

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

document.createElement()

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

案例

• 根据动态创建表格

节点操作

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

var firstEle = body.children[0];
body.insertBefore(div, firstEle);

body.removeChild(firstEle);

var text = document.createElement('p');
body.replaceChild(text, div);

节点属性

事件详解

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

1.
btn.onclick = function() {
	alert(2);
}

2.btn.addEventListener('click', function() {
	alert(1);
});
 

3.兼容低版本浏览器
btn.attachEvent('onclick',回调函数)

事件的三个阶段

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

参数为false是冒泡 为true是捕获

事件对象的属性和方法

• event.type 获取事件类型
• clientX/clientY 所有浏览器都支持，窗口位置
• pageX/pageY IE8以前不支持，页面位置
• event.target || event.srcElement 用于获取触发事件的元素
• event.preventDefault() 取消默认行为

阻止事件传播的方式

• 标准方式 event.stopPropagation();
• IE低版本 event.cancelBubble = true; 标准中已废弃

常用的鼠标和键盘事件

• onmouseup 鼠标按键放开时触发
• onmousedown 鼠标按键按下触发
• onmousemove 鼠标移动触发
• onkeyup 键盘按键按下触发
• onkeydown 键盘按键抬起触发