标签：url 事件 color ast put innertext 注意 ima 替换
DOM相关方法,属性汇总
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(){};
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() , 删除 字符串的左右空格
标签：url 事件 color ast put innertext 注意 ima 替换
原文地址：http://www.cnblogs.com/zebey/p/7537757.html
