美文网首页
javascript dom 节点基本操作

javascript dom 节点基本操作

作者: JamHsiao_aaa4 | 来源:发表于2017-07-11 14:56 被阅读0次

    创建节点: createElement()
    var node = document.createElement("div")

    创建文本节点: createTextNode()
    var value = document.createTextNode("新加文本")

    插入节点到最后: appendChild()
    node.appendChild(value);

    插入节点到目标节点的前面: insertBefore()
    var node = document.createElement("div")
    var value = document.createTextNode("新加文本值")
    var p = document.createElement("p")
    var span =document.createElement("span")
    node.appendChild(p)
    node.insertBefore(span,p)

    复制节点: cloneNode(boolean);
    node.cloneNode(true);
    node.cloneNode(false);
    复制上面的div节点,参数true,复制整个节点和里面的内容;false,只复制节点不要里面的内容,复制后的新节点,也不会被自动插入到文档,需要用到3和4的方法去插入

    删除节点: removeChild()
    node.removeChild(_p);
    把上面的<p>节点从<div>里删除。不过一般情况下,不知道要删除的节点的父节点是什么,因此一般这么使:node.parentNode.removeChild(node);
     
    替换节点
    repalceChild(newNode, oldNode)
    node.repalceChild(_p, _span);
    把上面的<span>节点替换成<p>节点,注意无论是<span>还是<p>,都必须是<div>的子节点,或是一个新的节点。
     
    设置节点属性
    setAttribute()
    node.setAttribute("title","abc");
    不解释了,很容易明白。就说一句,用这个方法设置节点属性兼容好,但class属性不能这么设置。

    相关文章

      网友评论

          本文标题:javascript dom 节点基本操作

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