DOM知识点总结(一)

什么是DOM？

文档对象模型——Document Object Model，简称DOM。一个页面，主要由各种元素、属
性和文本等等组成，我们把这些都称作为节点，而DOM就是用来操作页面所有节点的属性和方法。

DOM树

DOM 树就是我们 html 结构中一个一个的节点构成的，不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点。

DOM节点

DOM的节点我们一般分为常用的三个：元素节点 / 文本节点 / 属性节点

我们写在HTML里面的标签，就是元素节点；

我们标签里面写的文字，那么就是文本节点；

写在每一个标签上的属性，就是属性节点；

获取节点的方法：

获取节点的 方法	描述
document.getElementById(元素ID名)	获取带有指定ID的元素（节点）
document.getElementByClassName(元素类名)	获取带有指定类名的元素（节点），获取的是一组元素
document.getElementsByTagName(标签名)	通过标签名获取元素，获取的是一组元素
document.querySelector(标签名/类名/id名)	通过选择器获取元素，获取到的是满足条件的第一个
documenrt.querySelectorAll(标签名/类名/id名)	通过选择器获取元素，获取的是一组元素

获取节点的 属性	描述
childNodes	获取一个元素下的所有子节点
children	获取一个元素下的所有元素子节点
firstChild	获取一个元素下第一个子节点
firstElementChild	获取一个元素下第一个元素子节点
lastChild	获取一个元素下最后一个子节点
lastElementChild	获取一个元素下最后一个元素子节点
previousSibling	获取一个节点的上一个兄弟节点
previousElementSibling	获取一个节点的上一个兄弟元素节点
nextSibling	获取一个节点的下一个兄弟节点
nextElementSibling	获取一个节点的下一个兄弟元素节点
parentNode	获取一个节点的父节点
parentElement	获取一个节点的父元素节点
attributes	获取一个节点的所有属性节点

创建节点	描述
document.createElement()	创建元素节点
document.creatTextNode()	创建文本节点

创建一个 div 标签：

var creDiv = document.createElement('div')
    creDiv.innerHTML = '我是一段文本内容'
    creDiv.className = 'box3 box4'
    console.log(creDiv)

创建一个文本节点 ：

var text = document.createTextNode('我是凭空捏造的一个节点')
console.log(text.nodeType) // 3 ——> 文本节点

插入节点	描述
appendChild()	把子节点插入到某一个父节点下面，并且放在最末尾的位置
insertBefore()	把子节点插入到某一个父节点下面，并且放在最前面的位置

// 1. 创建一个 span 节点
    var creSpan = document.createElement('span')
    creSpan.innerHTML = '我是创建的一个 span 标签'
// 2. 把创建的 span 插入到 div 的内部, 并且放在 p 标签的前面
// 2-1. 看一下 appendChild 的效果
	div.appendChild(creSpan)
// 2-2. 看一下 insertBefore 的效果
    div.insertBefore(creSpan, p)

删除节点	描述
removeChild()	删除节点下的某一个子节点
remove	直接把自己删除

// 0. 获取元素
    var div = document.querySelector('div')
    var p = document.querySelector('p') // 我这里获取到的就是 一号

// 1. 把 p 标签从 div 里面移除
    div.removeChild(p) // 移除的也是 div 里面的 一号 p 标签

// 2. 把 div 从 页面里面 直接移除
    p.remove()

替换节点	描述
replaceChild()	使用新节点替换父节点下面的某一个旧节点

 // 0. 获取元素
    var div = document.querySelector('div')
    var p = document.querySelector('p')

// 1. 创建一个 span 标签
    var creSpan = document.createElement('span')
    creSpan.innerHTML = '我是创建的一个 span 标签'

// 2. 用我创建的 span 标签把 div 里面本身的 p 标签替换掉
    div.replaceChild(creSpan, p)

克隆节点	描述
cloneNode()	复制一份一模一样的节点出来

   // 0. 获取元素
    var div = document.querySelector('div')

    // 1. 克隆一份一模一样的 div 出来
    var res = div.cloneNode()
    console.log(res)