DOM基础知识（四）

DOM基本操作

• 创建

  • document.createElement()

  • document.createTextNode()

  • document.createComment()

  • document.createDocumentFragment()

• 插入

  • PARENTNODE.appendChild()

    // 属于剪切操作
  
    // html
    <div></div>
    <p></p>
  
    // js
    var oDiv = document.getElementsByTagName('div')[0];
    var oP = document.getElementsByTagName('p')[0];
    oDiv.appendChild(oP);
    // after html
  
    <div>
      <p></p>
    </div>
  

  • PARENTNODE.insertBefore(a, b)

• 删除

  • parent.removeChild() // 属于剪切操作，有返回结果

  • child.remove() // 属于销毁操作，返回undefined

• 替换

  • parent.replaceChild(new, origin) // 属于剪切操作，有返回结果

Element节点的一些属性

• innerHTML

• innerText( 火狐不兼容 )

• innerContent( 老版本IE不好使 )

Element节点的一些方法

• elem.setAttribute()

  • 元素节点的行间属性可以自定义

• elem.getAttribute()