DOM操作

作者: 码农的世界你不懂 | 来源:发表于2017-02-25 09:52 被阅读0次

DOM操作:操作页面的元素(增加|删除|修改|查询)
新建一个div标签,设置改标签的样式(宽度|高度|边框),追加到body

获取元素操作

    getElementById
    getElementsByTagName
    getElementsByClassName

元素节点操作

    appendChild
    insertBefore
    removeChild
    replaceChild
    cloneNode
    createElement
    createTextNode(创建文本节点)

属性节点操作

    getAttribute
    setAttribute
    removeAttribute

常用DOM属性
    className
    innerHTML
    innerText/textContent value
    children

代码示例

 //0 获取页面中指定的标签,并设置其样式
        var divID = document.getElementById("divId");

        divID.style.backgroundColor = "pink";
        divID.style.height = "40px";
        divID.style.width = "200px";

        //01 创建新的标签
        var div = document.createElement("div");

        //02 设置标签的样式
        div.style.backgroundColor = "red";
        div.style.height = "100px";
        div.style.width = "300px";
        div.style.fontSize = "20";

        //03 设置标签的内容
        div.innerText = "这是一个自己创建的标签";

        //04 把标签插入到页面中
        document.body.appendChild(div);

       //05删除div
        document.body.removeChild(div);

相关文章

网友评论

      本文标题:DOM操作

      本文链接:https://www.haomeiwen.com/subject/bmmgwttx.html