1、自定义属性操作
- getAttribute() 获取标签行内属性
- setAttribute() 设置标签行内属性
- removeAttribute() 移除标签行内属性
- 与element.属性的区别: 上述三个方法用于获取任意的行内(自定义)属性。
- 2、样式(css)操作
样式显示在标签行内
var div1 = document.getElementById('div1');
div1.style.width = '100px';
*性值是字符串,必须加上单位
3、类名操作
var box = document.getElementById('box');
box.className = 'show';
class属性为什么用className来表示
class是关键字,定义变量,属性不能用关键字
4、创建元素的三种方式
document.write()
5、innerHTML与innerText
var box = document.getElementById('box');
box.innerHTML = '<p>新标签</p>';
document.createElement()
var div = document.createElement('div');
document.body.appendChild(div);
6、节点操作
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);
7、事件详解
注册/移除事件的三种方式
1.
btn.onclick = function() {
alert(2);
}
参数1 事件名称
参数2 回调函数
2.btn.addEventListener('click', function() {
alert(1);
});
3.兼容低版本浏览器
btn.attachEvent('onclick',回调函数)
8、事件的三个阶段
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
参数为false是冒泡 为true是捕获
9、事件对象的属性和方法
- event.type 获取事件类型
- clientX/clientY 所有浏览器都支持,窗口位置
- pageX/pageY IE8以前不支持,页面位置
- event.target || event.srcElement 用于获取触发事件的元素
- event.preventDefault() 取消默认行为
10、阻止事件传播的方式
- 标准方式 event.stopPropagation();
- IE低版本 event.cancelBubble = true; 标准中已废弃。
11、常用的鼠标和键盘事件
- onmouseup 鼠标按键放开时触发
- onmousedown 鼠标按键按下触发
- onmousemove 鼠标移动触发
- onkeyup 键盘按键按下触发
- onkeydown 键盘按键抬起触发
12、BOM
BOM的概念
BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理,
比如:刷新浏览器、后退、前进、在浏览器中输入URL等。
BOM的顶级对象window
window是浏览器的顶级对象,当调用window下的属性和方法时,可以省略window
注意:window下一个特殊的属性 window.name。
对话框
- alert()
- prompt()
- confirm()
13、页面加载事件
window.onload = function () {
// 当页面加载完成执行
// 当页面完全加载所有内容(包括图像、脚本文件、CSS 文件等)执行
}