原生js节点操作

原生js节点操作

节点属性值

1 获取上级节点

1	Node.parentNode //返回父节点
2	Node.ownerDocument //返回祖先节点

2 获取下级节点

1	Node.childNodes //返回相邻后代的元素节点和文本节点对象的集合(换行算作文本节点)
2	Node.children //返回相邻后代的元素节点集合
3	Node.firstChild //返回相邻后代第一个的元素节点
4	Node.lastChild //返回相邻后代最后一个的元素节点

3 获取同级节点

1	Node.previousSibling // 返回前一个节点
2	Node.nextSibling // 返回后一个节点

节点方法

1 创建

1	document.createElement('li') //创建元素节点
2	document.createAttribute("class") //创建属性节点
3	document.createTextNode("Hello World") //创建文本节点

2 复制

1	var newNode=Node.cloneNode(Boolean)
2	//Boolean:true 返回Node及其全部子孙节点
3	//Boolean:false 只返回Node节点

3 增加

1	parentNode.appendChild(newNode) //增加节点至子节点末尾
2	parentNode.insertBefore(newNode,targetNode) //增加节点至targetNode之前
3	parentNode.innerHTML+='<li></li>' //增加元素节点至子节点末尾
4	parentNode.innerText+='Hello World' //增加文本节点至子节点末尾

4 删除

1	parentNode.removeChild(childNode) //已知父节点
2	node.parentNode.removeChild(childNod) //未知父节点

5 获取

1	document.getElementById()
2	document.getElementsByClassName()
3	document.getElementsByTagName()