DOM操作

DOM操作

---

createElement 创建标签

	var DOM = document.createElement('div')
	DOM.setAttribute("id", "app") // 相当于 DOM.id = 'app'
	var button = document.createElement('button')
	button.className = 'button'
	button.innerHTML = '点击'
	button.onClick = function(){} // 添加点击事件
	DOM.appendChild(button)
	document.body.append(DOM)
	// <div id="app"><buttonclass="button">点击</button></div>
	
	// 创建文本节点
	var text = document.createTextNode('text'); //创建一个文本节点；
	DOM.appendChild(text) // 相当于 DOM.innerHTML = text
	// <div id="app">text</div>
	
	// 创建属性节点
	var _class = document.createAttribute("class")
    _class.value = 'father'
	DOM.setAttributeNode(_class);
	// <div id="app" class="father"></div>

获取dom

getElementById、getElementsByClassName、getElementsByTagName、getElementsByName、querySelector

	<div id="app">
		<span class="text" name="textName"></span>
	</div>

	var app = document.getElementById('app') // 通过id号来获取元素，返回一个元素对象
	var text = document.getElementsByClassName('text') // 通过class来获取元素，返回元素对象数组
	var tag = document.getElementsByTagName('span') // /通过标签名获取元素，返回元素对象数组
	var _name = document.getElementsByName('textName')  //通过name属性获取id号，返回元素对象数组
	
	var app1 = document.querySelector('#app')
	var text1 = document.querySelector('.text')
	var tag1 = document.querySelector('span')

setAttribute、getAttribute 设置/获取属性

	<span></span>

	var span = document.getElementsByTagName('span')
	span.setAttribute('class','text')
	span.getAttribute('class') // text
	// 当然也可以 span.className = 'text'

添加节点 appendChild、append、insertBefore 删除节点 removeChild

	<div id="app"></div>

	var DOM = document.getElementById('app')
	var text = document.createElement('span')
	
	DOM.append(text) // 没有返回值
	DOM.appendChild(text) // 有返回值
	
	DOM.insertBefore(text ,DOM[0]) // 第一个参数为要插入的元素，第二个参数为参照的节点
	
	DOM.append('text') // 再最后面添加文本
	DOM.appendChild('text') // 报错

	// 删除节点
	DOM.removeChild(text)

获取元素节点

	获取元素父节点 parentNode
	返回当前元素所有子元素节点对象，只返回HTML节点 element.chlidren
	返回当前元素多有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点） element.chilidNodes
	返回当前元素的第一个子节点对象 element.firstChild
	返回当前元素的最后一个子节点对象 element.lastChild

获取当前元素

nextSibling：当前元素上一个同级元素
previousSibling ：当前元素的下一个同级元素
innerHTML：
innerText：

	<div id="app">
		<span class="span">span</span>
		<span class="text">text</span>
		txt
	</div>

	var text = document.getElementsByClassName('text')
	text.previousSibling // <span class="span">span</span> 返回当前元素上一个同级元素 没有就返回null
	text.nextSibling // txt 返回当前元素的下一个同级元素, 没有就返回null
	text.innerHTML // 返回元素的所有文本，包括html代码
	text.innerText // 返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码

获取当前节点的节点类型 nodeType 节点名称 nodeName

	nodeType 返回节点的类型,数字形式（1-12）常见几个1：元素节点，2：属性节点，3：文本节点。
	接触到的
	元素element ———>1
	属性attr———>2
	文本text ———>3
	document ———> 9
 	
 	nodeName 获取节点名称