Web前端-JavaScript--控制元素的方式

控制元素的5种方式

 1. 元素.style.css属性名=属性值
                操作的是元素的行内样式

box.style.backgroundColor="red";

  2. 元素.className="带样式的类名1 类名2"  操作元素样式
                此种方式是直接给元素设置一个或者多个类名
                要注意权值问题

box.className="co";

  3.元素.setAttribute("class","类名1  类名2...").;

                元素.setAttribute("style","属性名1:属性值1;属性名2:属性值2;")

                第一个是增加一个class类  第二个直接增加一个style行内样式属性

box.setAttribute("class","ft co");

   4.Html5新推出一个属性(有兼容问题)
                元素.classList.add("新类名1 新类名2...");
//                只是移除单个class
                元素.classList.remove("类名1")
//                判断是否包含指定类名
                元素.classList.contains("类名")
                切换显示类名   每次执行toggle方法 内部会自动判断
                当前元素是否具有该类名 没有就增加上
                如果有就删除掉
                元素.classList.toggle("类名");

 box.classList.add("co");
//            box.classList.remove("ft");
//            box.classList.toggle("co")

    5.元素.style.cssText="属性名1:属性值1;属性名2:属性值2...;属性名n:属性值n;"
                   直接修改标签的style属性的值

box.style.cssText="font-size:50px; background-color:blue;"

DOM节点的增删改操作

节点查询:
    包括五种获取页面元素的方式
    还有节点访问关系

创建节点:
var  新标签(节点) = document.createElement("标签名")
            调用者只能是document
    默认创建出来的是一个空标签

    btnArr[0].onclick=function () {
        var newDiv=document.createElement("div");
        newDiv.innerHTML="<p>哈哈哈</p>";
        box.appendChild(newDiv);
    }

拼接节点:
       父节点.appendChild(子节点对象)
       在当前父节点的最后拼接一个子节点对象

    btnArr[0].onclick=function () {
        var newDiv=document.createElement("div");
        newDiv.innerHTML="<p>哈哈哈</p>";
        box.appendChild(newDiv);
    }

       父节点.insertBefore(要插入新节点对象,参考子节点对象)
            在指定节点之前插入

    btnArr[0].onclick=function () {
        var newDiv=document.createElement("div");
        newDiv.innerHTML="<p>哈哈哈</p>";
        box.insertBefore(newDiv,pox);
    }

删除节点:
    父节点.removeChild(子节点对象)

    btnArr[1].onclick=function () {
        //        删除一个节点:
//      box.removeChild(pox);
        //        把按钮自己删除了
//      this.parentNode.removeChild(this);
//如果没获取到最后一个子节点那么就返回null
        if (box.lastElementChild){
            box.removeChild(box.lastElementChild);
        }
    }

 替换节点:
    父节点.replaceChild(新节点对象,被替换的旧节点对象)

    btnArr[2].onclick=function () {
        var newUl=document.createElement("ul");
        for (var i=0;i<3;i++){
            var newLi=document.createElement("li");
            newLi.innerText="我是LI";
            newUl.appendChild(newLi);
        }
        box.replaceChild(newUl,pox);

    }

 克隆节点
    节点对象.cloneNode(boolean)
    复制一份当前节点对象
    参数默认为false 表示不克隆内部内容

    如果传true表示所有后代一起克隆

    btnArr[3].onclick=function () {
        var newPox=pox.cloneNode(true);
        box.appendChild(newPox);
    }

js动态添加表格方法

  rows                          (只读，table和textarea能用)
*       获取当前表格所有的tr放入一个伪数组
    insertRow(index)              (只有table能调用)
        在指定索引之前插入一个tr标签 并且返回当前新插入的tr对象
            可以针对该tr对象设置内容

    deleteRow(index)             (只有table能调用)
        根据索引值删除一行tr
    cells               (只读，tr才能调用)

    insertCell(index)               (只有tr能调用)
        在指定index之前 插入一个新td标签 返回新td对象
    deleteCell(index)              (只有tr能调用)
        根据指定索引值删除一个td

  var btnArr=document.getElementsByTagName("button");
    var tab=document.getElementById("tab");
    var ftr=document.getElementById("ftr");
    btnArr[0].onclick=function () {
        console.log(tab.rows); //获取当前表格所有的tr放入一个伪数组
    }

    btnArr[1].onclick=function () {
        var newTr=tab.insertRow(1)
        var str="";
        str+="<td>海贼王</td>"
        str+="<td>12</td>"
        str+="<td>120</td>"

        newTr.innerHTML=str;

    }
    btnArr[2].onclick=function () {
//        tab.deleteRow(3)
        tab.deleteRow(tab.rows.length-1);

    }
    btnArr[3].onclick=function () {
        console.log(ftr.cells);

    }
    btnArr[4].onclick=function () {
        var newTd=ftr.insertCell(1);
        newTd.innerHTML="我是新年龄"

        
    }
    btnArr[5].onclick=function () {

//        ftr.deleteCell(3);
        ftr.deleteCell(ftr.cells.length-1)
    }