1、基本方法 1）createElement 创建一个元素标签（元素对象） document.createElement([标签名]) 2）appendChild 把一个元素对象插入到指定容器的末尾 [container].appendChild([nemEle]) 3）insertBefore 把一个元素对象插入到指定容器中某一个元素标签之前 [container].insertBefore([newEle],[oldEle]) 4）cloneNode 把某一个节点进行克隆 [curEle].cloneNode() ：浅克隆，只克隆当前的标签 [curEle].cloneNode(true)：深克隆，当前标签及其里面的内容都一起克隆了 5）removeChild 在指定容器中删除某一个元素 [container].removeChild([newEle]) 6）set/get/removeAttribute 设置、获取、删除当前元素的某一个自定义属性 2、基于自定义属性的两种方式 假设有一个ID属性为‘box’的元素，首先通过ID获取到var oBox = document.getElementById('box'); 第一种方式：把当前元素作为一个对象，在对象对应的堆内存中新增一个名为‘index’自定义的属性 oBox.myIndex = 10;//=>设置 console.log(oBox['myIndex']);//=>获取 delete oBox.myIndex;//=>删除 第二种方式：基于Attribute等DOM方法完成‘myColor’自定义属性的设置 oBox.setAttribute('myColor','red');//=>设置 oBox.getAttribute('myColor');//=>获取 oBox.removeAttribute('myColor');//=>删除 上下两种机制属于独立的运作机制，不能互相混淆 -第一种是基于对象键值对操作方式，修改当前元素对象的堆内存空间来完成 -第二种是直接修改页面中HTML标签的结构来完成（此种办法设置的自定义属性可以在结构上呈现出来） 注：基于setAttribute设置的自定义属性值都是字符串 3、解析一个URL字符串问号传参和HASH值部分 var str = "http://mp.toutiao.com/stu?lx=1&name=AA&age=20#teacher"; function queryURLParameter(str){ //1、创建一个A标签，把需要解析的地址当做A标签的HREF赋值 var link = document.createElement('a'); link.href = str; //2、A元素对象的HASH、search两个属性分别存储了哈希值和参数值 var search = link.search.substr(1), hash = link.hash.substr(1); //3、分别解析出HASH和参数即可 var obj = {}; hash?obj.HASH = hash:null; if(search){ //=>先按照&进行拆分 search = search.split('&'); for(var i = 0;i < search.length; i++){ var itemAry = search[i].split('='); obj[itemAry[0]]=itemAry[1]; } } return obj; }
