Dom元素

动态创建dom元素

js中元素的获取分为四种
document.getElementById("")//双引号内写要获取元素的类名 document.getElementByClass("")
document.getElementByName("")
document.getElementsByTagName("")

添加点击事件 并创建dom元素

btn.onclick=function(){
                //创建dom元素 默认在所有子节点后插入
                var createlement=document.createElement("div");
                //设定其为b_y的子集
                b_y.appendChild(createlement);
                //设定创建元素的类名称 若有多个空格隔开去写 以免覆盖消失
                createlement.className="m_child";
            };

寻找子节点的方法

childNodes 为查找当前元素子节点 是一个集合 （会涉及所有的 比如空格） 元素的节点类型为1，其他不考虑
childElementCount 子元素的个数
children 直获取当前元素的子节点 是一个集合
firstChild 为Node型 第一个子节点 lastChild 最后一个子节点 也是一个集合
firstElementChild 为当前元素的第一个子元素节点
lastElementChild 为当前元素的最后一个子元素节点

var btn1=document.getElementById("btn1");
            btn1.onclick= function () {
               console.log(b_y.childNodes);
               console.log(b_y.childElementCount)
               console.log(b_y.children)
                console.log(b_y.firstChild);
                console.log(b_y.lastChild)
                console.log(b_y.firstElementChild)
                console.log(b_y.lastElementChild)
            }

insertBefore（插入元素 插入位置） 插入元素
nextElementSibling 为寻找下一个同胞元素
previousElementSibling 为寻找前一个同胞元素;

var a=document.createElement("span");
            a.innerHTML="我是创建的span";
            b_y.insertBefore(a,b_y.firstElementChild);
            b_y.insertBefore(a,b_y.lastElementChild);
            nextSibling(Node) previousSibling(Node)
            console.log(b_y.nextSibling);
            console.log(b_y.nextElementSibling)
            console.log(b_y.previousSibling);
            console.log(b_y.previousElementSibling);

dom元素的移除：removeAttribute 参数为字符串类型的属性名称 移除对象的属性
setAttribute（属性名称 属性值） 设置元素的属性
查找父节点 parentNode 没个元素只有一个父节
parentElement 只有ie浏览器支持

 b_y.remove()
           b_y.removeAttribute("id")
          b_y.setAttribute("style"," border:2px dashed red;");
           console.log(b_y.parentNode);

计时器  做动画  或者延迟代码的执行
设定计时器:
    etInterval()  循环执行
    setTimeout()  只执行一次
    关闭计时器    
    clearInterval()
    clearTimeout()