DOM 元素的增删改查

	<div id="test">
		<p id="hello">hello</p>
		
	</div>
	<!-- dom对象操作，增删改 -->
	<p id="id">你好</p>
	<select id="id2">
		<option value="1"> 上海</option>
		<option value="2"> 南京</option>
		<option value="3"> 苏州</option>
	</select>
	<a>hello</a>
	<p name="dema">德玛</p>
	<script type="text/javascript">
		
		//查和改
		var demo = document.getElementById("id");//获取dom对象
		console.log(demo.innerText);
		console.log(demo.innerHTML);
		demo.style.color="red";//修改
		demo.innerHTML="世界"
		
		var select = document.getElementById("id2");//获下拉选
		console.log(select.childNodes.length);//子节点长度
		console.log(select.childNodes);//子节点长度
		var first = select.firstChild;
		console.log(first);
		
		var pre = select.previousSibling;//前一个同级节点
		console.log(pre)
		console.log(pre.previousSibling.innerHTML)
		var next = select.nextSibling;//后移个同级节点
		console.log(next)
		
		var p = document.getElementsByTagName("p");//根据标签名称获取，注意返回的是数组
		console.log(p[0].innerHTML);
		console.log(p.length);
		
		var dema = document.getElementsByName("dema");//注意返回的是数组
		console.log(dema[0].innerHTML)
		
		//创建新节点
		var newNode = document.createElement("input");
		newNode.value="hello"
		newNode.type="text";
		newNode.color="red";
		//添加新节点到父元素中
		var test = document.getElementById("test");
		// test.appendChild(newNode);
		var hello = document.getElementById("hello");
		test.insertBefore(newNode,hello)//在参考元素之前插入
		
		//移除子节点
		test.removeChild(hello) 
		test.removeChild(newNode)
		
		
	</script>
</body>