原生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()