JS 获取操作删除节点

获取节点

查询节点

函数	方法含义
document.getElementById()	根据id属性查询单个标签
document.getElementsByClassName()	根据class属性查询多个标签(ie8)：HTMLCollection
document.getElementsByName()	根据name属性查询多个标签：HTMLCollection
document.getElementsByTagName()	根据tab标签名称查询多个标签：HTMLCollection
document.querySelector(css)	根据css选择器语法选择匹配的第一个标签(ie8)NodeList
document.querySelectorAll(css)	根据css选择器语法选择匹配多个标签：(ie8)NodeList

节点属性

DOM模型中,每个节点都含有(标签,属性,文本)都有自己固定的属性结构

nodetype:属性类型

nodeName:属性名称,标签节点都由自己特定属性名称

nodeValue:属性值,文本节点的内容就是属性值

	var box=document.querySelector('#box')
			console.log(box.nodeType)//1
			console.log(box.nodeName)// DIV
			console.log(box.nodeValue)//null
	

总结
-网页文档在浏览器中渲染加载,浏览器会将文档数据解释成DOM模型就可以通过JS来控制
-Dom节点主要划分为:标签节点,属性节点,文本节点
-节点修饰属性:

• nodeType
• nodeName
• nodeValue

节点操作

(1)查询节点

函数	描述
docoment.getElement......	标准获取节点函数
document.quserySelector	新增获取节点函数
ele.children	获取ele节点的子节点
ele.childNodes	获取ele子节点 包括文本节点
ele.parentNode	标准获取父节点
ele.offsetParent	获取相邻最近的经过定位的父节点
ele.previousElementSibling	获取上一个兄弟节点 不包含文本节点
ele.previousSibling	获取上一个兄弟节点 包含文本节点
ele.nextElementSibling	获取下一个兄弟节点 不包含文本节点
ele.nextSibling	获取下一个兄弟节点 包含文本节点

(2)创建节点

javascript语法中提供了创建节点的固定语法,以及将节点添加到页面上的操作函数

函数	描述
document.createElement('标签名称')	创建一个标签节点
document.createTextNode(文本内容)	创建一个文本节点
ele.appendChild(节点)	将添加的节点追加在元素末尾
ele.insertBefore('新节点,参考节点')	将添加的节点追加在元素前面

(3)修改节点

函数	描述
ele.id=value	直接操作标签语法规范的属性
ele.index=value	直接操作自定义属性(注意:自定义属性标签不可见)
ele.setAttribute(name,value)	标准与法操作标签属性,给name属性设置值value可以是标准属性 也可以是自定义属性(注意:自定义属性可见)
ele.getAttribute(name)	标准语法获取标签对象属性值

var nu=document.querySelector('.box')
//1.简洁语法
	//操作标签属性
	// nu.className='popp'
	//操作自定义属性
	//nu.index='1'
//2.标准语法
	//nu.setAttribute('class','poem')
	//nu.setAttribute('class','poem')

样式修改:ele.style.样式名=值

内容的修改:ele.innerText/ele.innerHTML/cleateTextNode(文本节点)

(4)删除节点

函数	描述
parent.removeChild(child)	在parent(父节点)包含一个子节点child 并删除
ele.remove()	删除当前节点

(5)节点替换

函数	描述
parent.replaceChild(新元素, 旧元素)	替换指定标签

(6)节点克隆

函数	描述
ele.cloneNode()	设置为 false，克隆节点及其后代
	设置为 true，克隆节点及其属性，以及后代

​