DOM节点的创建与删除

––––获取对应的节点对象–––––––––––––––––––––––

1. getElementById('id') 通过 id 获取元素节点对象

2. getElementsByClassName('类名') 结果是数组, 节点对象是数组中的元素

3. getElementsByTagNname('标签'); 结果是数组

4. getElementsByName('name名'); 结果数组

5. querySelector('选择器'); 第一个节点对象

6. querySelectorAll('选择器'); 结果是数组

常用的三种节点: 元素节点, 文本节点, 属性节点

Node 类型: js中的所有节点类型都继承自Node类型

childNodes属性

nodeType属性

+ nodeType == 1 元素节点

+ nodeType == 2 属性节点

+ nodeType == 3 文本节点

nodeValue属性(注意点: 获取时不包括文本, 可以设置改变)

firstChild和lastChild属性

通配符 *

获取文档中所有节点

var nodeArr = document.getElementsByTagName('*');

children获取的是元素节点; 结果是数组

console.log(div.children);

元素节点

nodeName 节点名称

alert(div.nodeName);

alert(div.nodeType); //1表示元素节点

alert(div.nodeValue); //元素节点 nodeValue = null

获取当前节点的所有子节点(元素节点属性节点文本节点)

空格也当做文本节点

注意点: childNodes没有包含属性节点

//标签节点插入内容(会覆盖以前的内容)

document.write()

innerHTML()

innerText()

createElement() 创建元素节点

appendChild() 在父元素中插入子元素,在尾部进行插入

createTextNode() 创建文本节点

insert Before() 在父元素中插入子元素,在头部进行插入

语法: parentElement.insertBefore(newElement, targetElement)

// createElement('');创建元素节点