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