本文已参与「新人创作礼」活动,一起开启掘金创作之路。
1.3事件
-
事件源 事件被触发的对象
- var btn=document.getElementByTagName('button')
-
事件类型
- onclick
-
事件处理程序 函数赋值的方式完成
btn.onclick= function(){ }
2.1常见鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
| contextmenu | 控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单，鼠标右键菜单 |
| selectstart | 开始选中 |
4.操作元素
4.1 改变元素内容
- element.innerText = value;
从起始位置到终止位置的内容,但它不识别html标签，同时空格和换行也会去掉
- element.innerHTML = value；
起始位置到终止位置的全部内容，识别html标签，同时保留空格和换行
4.2 修改图片属性
element.src= value;
element.title= value;
……
4.3 表单元素的操作
- 修改表单里面的值
element.value = ；
- 禁用表单
element.disabled=true;
……
4.4样式属性操作
- element.style.具体属性 = value;
属性采取驼峰命名法
- 更改元素类名
element.className = value;
4.5 修改自定义属性
- element.setAttribute('属性' ，value);
自定义属性统一用data- 开头定义
4.6 移除属性
- element.removeAttribute('属性');
4.7 获取自定义属性
- element.getAttribute( '属性' );
H5新增方法：（只能获取data开头的）
- element.dataset.属性 (dataset 表示自定义属性集合)
- element.dataset['属性']
若自定义属性为 data-index-name;这种用连字号较长的名字
获取该属性是需要用驼峰命名法：
element.dataset.indexName
5.节点操作
一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称）和nodeValue (节点值）这三基本属性。
元素节点nodeType 为1,
属性节点nodeType 为2
文本节点nodeType为3(文本节点包含文字、空格、换行等)
