DOM节点的操作

DOM节点的分类: 元素节点,文本节点,属性节点

元素节点: html标签,通过getElementBy...()方法获取的就是元素节点

Document:

是代表整体页面的最大虚拟节点,它并不是指某个具体的元素,被称为根节点

HTML:

页面中最大的元素节点,包含着页面中所有的元素节点,被称之为根元素节点

文本节点:

包含空格和换行\n,双标记中间书写的文本内容

通过innerText属性获取

属性节点:

标签上的属性,在js中也被构建为节点,隶属于所在的标签

注释节点:

在html页面中书写的注释.也被js构建为节点,但不会显示在页面中

操作节点

1.创建节点

作用:创建一个元素节点
语法:var 新的元素对象=document.createElement('标签名');
 新的元素对象.innerText='标签间的文本节点';
 //...设置元素属性等操作
 

2.页面中添加新节点

作用:向父节点中,追加子节点,该节点会是父节点中最后一个子节点
语法: 父元素.appendChild(新的元素对象);

作用:在父元素中,将新节点插入到已有子节点的前面位置
语法: 父元素.insertBefore(新的元素对象,父元素中已有的节点);

3.删除节点

作用:删除父节点下的某个子节点
语法:父节点.removeChild(要删除的子元素);
作用:删除自己和自己的所有后代节点
语法:元素对象.remove();

4.替换节点

作用:在父元素中,将某个节点替换为新创建的节点
语法:父元素.replaceChild(新创建的节点,子节点);

5.克隆节点(复制节点)

作用:返回一个新的结构相同的元素对象
语法:var 新克隆的元素对象=元素对象.cloneNode(是否克隆后代);
参数:可选的,boolean,true表示克隆后代节点,默认false不进行克隆
注意:不复制元素对象的class属性