1. 获取元素方法
1. 根据 id 获取元素对象
var ele = document.getElementById("idName");
2. 根据 标签名 获取元素对象
var elements = document.getElementsByTagName("标签名");
3. 根据 类名 获取元素对象
var elements = 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. 创建子元素
var ele=createElement("标签");
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属性
双标签的内部文本
textContent: 也是内部文本
3. innerHTML属性
双标签的内部HTML
4. className属性
样式
5. disabled
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.for in 循环进行遍历
var sum = 0;
var arr = [ 1, 2, 3, 4, 5, 6 ];
for ( var k in arr ){
sum += arr[ k ];
};
console.log(sum);
补充：
1.阻止冒泡
if(e.stopPropagation){
e.stopPropagation();
}
else{
e.cancelBubble=true;
};
2.阻止默认行为
e.preventDefault();