DOM节点的获取

getElementById // 按照 id 查询
getElementsByTagName // 按照标签名查询
getElementsByClassName // 按照类名查询
querySelectorAll // 按照 css 选择器查询

// 按照 id 查询
var imooc = document.getElementById('imooc') // 查询到 id 为 imooc 的元素
// 按照标签名查询
var pList = document.getElementsByTagName('p')  // 查询到标签为 p 的集合
console.log(divList.length)
console.log(divList[0])
// 按照类名查询
var moocList = document.getElementsByClassName('mooc') // 查询到类名为 mooc 的集合
// 按照 css 选择器查询
var pList = document.querySelectorAll('.mooc') // 查询到类名为 mooc 的集合

DOM节点的创建

// 首先获取父节点
var container = document.getElementById('父节点')
// 创建新节点
var targetSpan = document.createElement('创建节点')
// 设置节点的内容
targetSpan.innerHTML = '节点内容'
// 把新创建的元素塞进父节点里去
container.appendChild(targetSpan)

DOM节点删除

// 获取目标元素的父元素
var container = document.getElementById('父元素')
// 获取目标元素
var targetNode = document.getElementById('目标元素')
// 删除目标元素
container.removeChild(targetNode)

修改DOM元素

将指定两个DOM元素交换位置

// 获取父元素
var container = document.getElementById('父元素')   
 
// 获取两个需要被交换的元素
var title = document.getElementById('title')
var content = document.getElementById('content')
// 交换两个元素，把 content 置于 title 前面
container.insertBefore(content, title)