1. 获取元素方法
1. 根据 id 获取元素对象
var ele = document.getElementById("idName");
2. 根据 标签名 获取元素对象
var ele = document.getElementsByTagName("标签名");
3. 根据 类名 获取元素对象
var ele = document.getElementsByClassName("类名");
4. 获取 body 元素
document.body
2. 节点 / 元素相关方法
1. 获取子节点
var 子节点的伪数组 = 父亲. childNodes;
2. 获取子元素
var 子元素的伪数组 = 父亲. children;
3. 获取属性节点
var idNode = ul.getAttributeNode("id");
4. 获取下一个兄弟节点
var node = xxx.nextSibling;
5. 获取下一个兄弟元素
var ele = xxx.nextElementSibling;
6. 获取上一个兄弟节点
var node = xxx.previousSibling;
7. 获取上一个兄弟元素
var ele = xxx.previousElementSibling;
8. 追加子节点
father.appendChild(demo);
把一个节点放到父节点内部的最后
9. 插入子节点
father.insertBefore(demo,son);
把一个节点 demo 放到父节点内部 参考节点 son 的前面
10. 移除
father.removeChild(son);// 移除子节点
11. 克隆
var clone = demo.cloneNode(true);
deep: 深度, 一般传入 true:
12. 创建子元素
13. 获取第一个子元素
- var frist = xxx.firstElementChild;
- var frist = xxx.children[0];
获取第一个子节点:
firstChild
14. 获取最后一个子元素
- var last = xxx.lastElementChild;
- var last = xxx.children[xxx.children.length-1];
获取最后一个子节点:
lastChild
15. 获取父节点
var parent = xxx.parentNode;
3. 元素属性
1. src 属性
img 标签图片的路径
2.innerText 属性
双标签的内部文本
3. innerhtml 属性
双标签的内部 HTML
textContent: 也是内部文本
4. className 属性
样式
5. disable
input 标签禁用属性 disabled
取值: true/false
6. type
不同类型的 input 标签
7. value
标签的 value: 值
8. selected
下拉菜单 select 某一项被选中
取值: true/false
9. checked
checkbox 的选中状态: checked
取值: true/false
10. 自定义属性
1. 获取 任何标签中的属性都可以获取
- console.log(box.getAttribute("a"));// 可以获取没有规定的属性
- console.log(box.getAttribute("id"));// 也可以获取有规定的属性
2. 设置 任何标签中的属性都可以设置
- box.setAttribute("b", "2");// 可以设置没有规定的属性
- box.setAttribute("class", "cls");// 可以设置有规定的属性
3. 移除 任何标签中的属性都可以移除
- box.removeAttribute("a");
- box.removeAttribute("class");
11. 背景颜色
document.body.style.backgroundColor = "black"; // 一些简单的样式修改, 通过 style 处理
12. 宽高
- box.style.width = "200px";
- box.style.height = "200px";
13. 背景图片
box.style.backgroundImage = "url(images/tiger.png)";
14. 隐藏盒子
- this.style.display = "none";/* 消失之后 不占位置 */
- this.style.visibility = "hidden";/* 消失之后 占位置 */
15. 变盒子的位置
- this.style.left = "10px";
- this.style.top = "10px";
left 和 top, 需要注意添加绝对定位
16. 改变盒子的层级
this.style.zIndex = "10";
zIndex, 需要注意添加绝对定位
4. 事件
1. 点击事件
ele.onclick=function(){};
注意在事件中, 要获取当前点击的元素对象, 都用 this.
2. 鼠标悬浮, 鼠标离开事件
1. 鼠标悬浮 (经过) 事件 ele.onmouseover = function(){};
2. 鼠标离开事件 ele.onmouseout = function(){};
(注: onmouseover 与 onmouseout 搭配使用, 不建议使用这个搭配, 因为当鼠标经过子元素时会在此触发此事件, 出现闪动异常, 建议使用下面这两个搭配或者使用 onhover;)
3. 鼠标进入事件 ele.onmouseenter = function(){};
4. 鼠标移出事件 ele.onmouseleave = functin(){};
(注: onmouseenter 与 onmouseleave 搭配使用)
5. 鼠标进出事件 ele.onhover = function(){};
3. 焦点事件
1. 鼠标失去焦点 ele.onblur = function(){};
2. 鼠标获取焦点 ele.onfocus = function(){};
4. 键盘事件
1. 键盘按下: ele.onkeydown = function(){};
2. 键盘抬起: ele.onkeyup = function(){};
5. 双击事件
ele.ondblclick = function(){};
5. 字符串相关方法:
1. 字符串的替换方法 : replace
xxx = xxx.replace(searchValue,replaceValue);
replace 特点: 只找第一个匹配的替换
2. 字符串的搜索方法 indexOf()
xxx.indexOf(searchString);
查找 searchString 在 xxx 的第一个索引位置.
如果查找的是 不存在的字符串 : -1
如果查找的是 "" : 0
3. 删除左右空格: trim()
txt.value.trim() , 删除 字符串的左右空格
6. 数组相关方法
1. 获取数组内的元素 arr[ index ];
2. 数组长度 length
1. 获取数组长度 arr.length;
2. 利用数组长度动态改变来添加元素
- var arr = [ ];
- for ( var i = 0; i < 10; i++ ){
- arr[ arr.length ] = i ;
- };
3. 利用数组长度来清空数组
- var arr = [ 1, 2, 3, 4, 5, 6 ];
- arr.length = 0;
3. 遍历数组
1.for 循环进行遍历
- var sum = 0;
- var arr = [ 1, 2, 3, 4, 5, 6 ];
- for ( var i = 0; i < arr.length; i++ ){
- sum += i;
- };
- console.log(sum);
2.forin 循环进行遍历
- var sum = 0;
- var arr = [ 1, 2, 3, 4, 5, 6 ];
- for ( var i in arr ){
- sum += arr[i];
- };
- console.log(sum);
补充: 1. 阻止冒泡 if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; };
2. 阻止默认行为 e.preventDefault();####
来源: http://www.qdfuns.com/article/46536/cc085c3ada2683162b382b7135d3fb3c.html