前端之js-属性与方法

1. 获取元素方法

      1.1  根据 id 获取元素对象
   
              var ele = document.getElementById("idName"); 
   
       1.2 根据 标签名 获取元素对象
   
               var ele = document.getElementsByTagName("标签名");
   
       1.3 根据 类名 获取元素对象
   
               var ele = document.getElementsByClassName("类名");
   
       1.4 获取body元素
   
               document.body
   

2. 节点/元素相关方法

       2.1 获取子节点
   
               var 子节点的伪数组 = 父亲.childNodes; 
   
       2.2 获取子元素
   
               var 子元素的伪数组 = 父亲.children; 
   
       2.3 获取属性节点
   
               var idNode = ul.getAttributeNode("id"); 
   
       2.4 获取下一个兄弟节点 
   
               var node =  xxx.nextSibling;
   
       2.5 获取下一个兄弟元素 
   
               var ele =  xxx.nextElementSibling;
   
       2.6 获取上一个兄弟节点
   
               var node =  xxx.previousSibling;
   
       2.7 获取上一个兄弟元素 
   
               var ele =  xxx.previousElementSibling;
   
       2.8 追加子节点 
   
               father.appendChild(demo);
               把一个节点放到父节点内部的最后
   
       2.9 插入子节点
   
               father.insertBefore(demo,son);
               把一个节点demo放到父节点内部 参考节点son的前面
   
       2.10 移除
   
               father.removeChild(son);//移除子节点
   
       2..11 克隆
   
               var clone = demo.cloneNode(true);
   
               deep:深度,一般传入true: 
   
       2.12 创建子元素
   
       2.13 获取第一个子元素
   
               var frist = xxx.firstElementChild;
               var frist = xxx.children[0];
   
               获取第一个子节点:
   
                       firstChild
   
       2.14 获取最后一个子元素
   
                       var last = xxx.lastElementChild;
                       var last = xxx.children[xxx.children.length-1];
   
               获取最后一个子节点:
   
                       lastChild
   
       2.15 获取父节点
   
               var parent = xxx.parentNode;
   

3. 元素属性

       3.1 src属性
   
               img标签图片的路径
   
       3.2 innerText属性
   
               双标签的内部文本
   
       3.3 innerHTML属性
   
               双标签的内部HTML
   
               textContent: 也是内部文本
   
       3.4 className属性
   
               样式
   
       3.5 disable
   
               input标签禁用属性 disabled
               取值:true/false
   
       3.6 type
   
               不同类型的input标签
   
       3.7 value
   
               标签的value:值
   
       3.8 selected
   
               下拉菜单 select 某一项被选中
               取值:true/false
   
       3.9 checked
   
               checkbox 的选中状态: checked
               取值:true/false
   
       3.10 自定义属性
   
               3.10.1 获取 任何标签中的属性都可以获取
                       console.log(box.getAttribute("a"));//可以获取没有规定的属性
                       console.log(box.getAttribute("id"));//也可以获取有规定的属性
               3.10.2 设置 任何标签中的属性都可以设置
                       box.setAttribute("b", "2");//可以设置没有规定的属性
                       box.setAttribute("class", "cls");//可以设置有规定的属性
               3.10.3. 移除 任何标签中的属性都可以移除
                       box.removeAttribute("a");
                       box.removeAttribute("class");
   
       3.11 背景颜色
   
               document.body.style.backgroundColor = "black";  // 一些简单的样式修改,通过style处理
   
       3.12 宽高
   
               box.style.width = "200px";
               box.style.height = "200px";
   
       3.13 背景图片
   
               box.style.backgroundImage = "url(images/tiger.png)";
   
       3.14. 隐藏盒子
   
               this.style.display = "none"; 
               this.style.visibility = "hidden";
   
       3.15 变盒子的位置
   
               this.style.left = "10px";
               this.style.top = "10px";
   
               left和top,需要注意添加绝对定位
   
       3.16 改变盒子的层级
   
               this.style.zIndex = "10";
   
               zIndex,需要注意添加绝对定位
   

4. 事件

       4.1. 点击事件
               ele.onclick=function(){};
   
   
               注意在事件中,要获取当前点击的元素对象,都用this.
   
       4.2 鼠标悬浮,鼠标离开事件
   
               4.2.1 鼠标悬浮(经过)事件  ele.onmouseover = function(){};
   
               4.2.2 鼠标离开事件  ele.onmouseout = function(){};
   
       4.3 焦点事件
   
               4.3.1 鼠标失去焦点  ele.onblur = function(){};
   
               4.3.2 鼠标获取焦点  ele.onfocus = function(){}; 
   
       4.4. 键盘事件
   
               4.4.1 键盘按下:  ele.onkeydown = function(){};
   
               4.4.2 键盘抬起:  ele.onkeyup = function(){};
   
       4.5 双击事件
   
               ele.ondblclick = function(){};
   

5. 字符串相关方法:

       5.1 字符串的替换方法 : replace
   
               xxx =  xxx.replace(searchValue,replaceValue);
   
               replace 特点: 只找第一个匹配的替换
   
       5.2 字符串的搜索方法 indexOf()
   
               xxx.indexOf(searchString);
   
                        查找searchString在xxx的第一个索引位置.
   
                        如果查找的是 不存在的字符串 : -1
   
                        如果查找的是 "" : 0
   
       5.3 删除左右空格: trim()
   
               txt.value.trim()  , 删除 字符串的左右空格
   

补充：
1.阻止冒泡

if(e.stopPropagation){
        e.stopPropagation();
}else{
        e.cancelBubble=true;
};

2.阻止默认行为

e.preventDefault();