JavaScript DOM 的基本操作

JavaScript DOM 的基本操作

获取的操作

		获取元素节点
			document.getElementById(id值)
			document.getElementsByTagName(标签名称) --- 节点集
			document.getElementsByClassName(类名)  --- 节点集
			
			document.querySelector(选择器)
				获取的满足选择器的元素中的第一个
			document.querySelectorAll(选择器)
				获取的满足选择器的所有元素 --- 节点集
		获取文本内容
			元素节点.innerHTML
				可以识别内容中的标签
			元素节点.innerText
				把标签当做纯文本显示
			元素节点.value
		获取属性
			元素节点.属性名  ---- 对于自定义属性获取不到
			
			元素节点.getAttribute(元素名)
			
		获取css样式值
			元素节点.style.样式名 --- 只能获取行内样式设计的值

创建 添加 替换 删除的操作

			添加节点  删除节点  替换节点 都是有父节点操作的
		创建元素节点
			document.createElement(标签名称)
			父节点.appendChild(新建的元素节点)
		创建文本节点
			var text_node = document.createTextNode("文本内容")
			// 把内容存在div下
			元素节点.appendChild(text_node)
			
			设置文本使用的是
				元素节点.innerHTML = "值"
				或者
				元素节点.innerText = 文本内容
			
		创建属性节点
			元素节点.setAttribute("属性名", "属性值")
			设置属性的另外一种方式
			元素节点.属性名 = 属性值
		添加节点/属性
			创建的节点属于哪个标签的 就为哪个标签添加
			父节点.appendChild(新建的元素节点)
			父节点.insertBefore(新建的元素节点, 已存在的节点)
				将新建的节点添加在已存在的节点之前
		替换节点
			父节点.replaceChild(新节点, 旧节点)
		
		删除节点
			父节点.removeChild(子节点)

在DOM中常用的一些属性

		元素节点.innerText|元素节点.innerHTML --- 获取/设置文本内容
		元素节点.value --- 获取/设置表单域中标签的内容
		元素节点.parentNode --- 获取父节点