javascript常用属性 方法的汇总

 

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.οnclick=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();

　　

 

转载于:https://www.cnblogs.com/zebey/p/7537757.html