原生dom節點遍歷

獲取body：

var body = document.body

獲取當前節點下的所有子節點

body.childNodes //包括text

獲取標簽的第一個和最后一個節點

body.firstChild
body.lastChild

獲取根節點

body.ownerDocument

父節點

body.parentNode
body.parentElement

前/后一個同級節點

body.previousSibling
body.nextSibling

創建新標簽

let img = document.createElement(img);

把標簽拼接進文檔流

let div= document.getElementById('id');

div.appendChild(img)

給img標簽設置src屬性

img.setAttribute('src', 'imgUrl');

創建一個p標簽，設置文字，并把該標簽拼接在img之前

創建一個p標簽
let p = document.createElement('p');

設置內容
p.innerHTML = '這是p標簽';

拼接進文檔img前
div.insertBefore(p, document.getElementById('img'));

替換節點

div.replaceChild(p, document.getElementById('img'));

移除節點

刪除div中的p標簽
div.removeChild(document.getElementById('p'));


document.getElementById('p').remove()
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具（例如配置管理，服務發現，斷路器，智...
    卡卡羅2017閱讀 134,973評論 19贊 139
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,807評論 1贊 92
  • //拿到body，操作其中的內容 // var body=document.body; // 獲取當前節點下的所有...
    他在發呆閱讀 397評論 0贊 0
  • 本章內容 理解包含不同層次節點的 DOM 使用不同的節點類型 克服瀏覽器兼容性問題及各種陷阱 DOM 是針對 HT...
    悶油瓶小張閱讀 668評論 0贊 1
  • 互聯網放大了個人的價值，優秀的人更容易抓住互聯網的紅利，成為這個時代的寵兒。 這是個令人焦慮不安的時代，80后已經...
    f3f795d3cb88閱讀 661評論 0贊 3