【JavaScript】学习第十二天（DOM节点）

1.什么是DOM节点

DOM树：

DOM以树状结构出现的(倒立的树)，方便开发人员获取，添加，删除和修改页面上的某一部分

DOM节点：

w3c，页面上所有的内容都可以称为节点，DOM的最小单元就是节点

DOM节点的种类：

节点包含一共12种，本节课就认识5种节点

• 1.元素节点： 标签： nodeType 1
• 2.属性节点： 属性： nodeType 2
• 3.文本节点： 文本： nodeType 3
• 4.注释节点： 注释： nodeType 8
• 5.文档节点： 文档： nodeType 9

2.如何获取节点：

通过节点关系（父子关系，兄弟关系）来获取

//获取父元素的第一个节点
父节点.firstChild

//节点的下一个兄弟节点
节点.nextSibling

//节点的上一个兄弟节点
节点.previousSibling

//父节点的最后一个字节点
父节点.lastChild

//节点的父节点
节点.parentNode

//获取所有的子节点（伪数组形式）
父节点.childNodes

3.获取元素节点：

//获取父元素的第一个元素节点
父节点.firstElementChild

//节点的下一个兄弟元素节点
节点.nextElementSibling

//节点的上一个兄弟元素节点
节点.previousElementSibling

//父节点的最后一个子元素节点
父节点.lastElementChild

//节点的父元素节点（兼容性不好，不用它）
节点.parentElement

//获取所有的子元素节点（伪数组形式）
父节点.children

4.节点的操作

创建节点：

语法：document.createElement('标签名')
返回值：创建好的元素节点

//1. 创建的节点
    var oBtn = document.createElement('button');
    console.log(oBtn);
    oBtn.innerText = '我是按钮'

    var oBox = document.getElementById('box')

追加节点：

语法：父节点.appendChild(子节点)
含义：将子节点追加到父节点的尾部
例子：document.body.appendChild(子节点)

 oBox.appendChild(oBtn);
 //把创建好的oBtn添加到oBox中

插入节点：

语法：父节点.insertBefore(子节点，谁的前面的谁)
含义：将子节点插入到父节点的指定位置
例子：oBox.insertBefore(oBtn,oBox.firstChild);将button插入到oBox的头部

oBox.insertBefore(oBtn,oBox.children[1])
//父节点.children: 数组，所有的标签

替换节点

语法：父节点.replaceChild(新节点,旧节点(位置)) 不常用
含义:在父节点内，将老节点替换成新节点

oBox.replaceChild(oBtn,oBox.children[1])

删除节点：

语法1：父节点.removeChild(子节点)
含义：把子元素从父元素中移除
语法2：节点.remove() 最常用
含义：把子元素从页面中删除

oBox.children[0].remove();
oBox.removeChild(oBox.children[0])

克隆节点

语法：节点.cloneNode(turn/false)
作用：克隆出来一个节点
turn：代表克隆元素本身和元素的子元素以及后台
false：代表克隆元素本身

console.log(oBox.cloneNode(false));
console.log(oBox.cloneNode(true));

节点属性

• nodeType：节点属性
• nodeName：节点名称
• nodeValue：节点值

5.获取行间样式和非行间样式

var tianIn = document.querySelector('div');

//获取行间样式
tianIn.style.width
window.getComputedStyle(tianIn, null)['width'];

//获取非行间样式
window.getComputedStyle(tianIn, null)['width'];