前端05-JSDom 获取节点、创建和添加元素、间接查找节点、删除节点

获取节点

getElementById()            根据id获取dom对象，如果id重复，那么以第一个为准
getElementsByTagName()        根据标签名获取dom对象数组
getElementsByClassName()    根据样式名获取dom对象数组
getElementsByName()            根据name属性值获取dom对象数组，常用于多选获取值
                
注意：
       a标签正常会执行跳转的操作，设置href="javascript:void(0)" 表示伪协议  将不会跳转
       操作 dom 必须等节点初始化完毕后，才能执行
处理方式两种:
      （1）把 script 调用标签移到html末尾即可；
      （2）使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS。

<p id="p1" class="para">这是一个段落<span>文本</span></p>
		<p id="p1" class="para">这又是一个段落</p>
		<input type="text" name="txt" />
		<input type="checkbox" name="hobby" value="游泳" />游泳
		<input type="checkbox" name="hobby" value="篮球" />篮球
		<input type="checkbox" name="hobby" value="足球" />足球
		<hr />
		<a href="javascript:testById()">按照id获取</a>
		<a href="javascript:void(0)" onclick="testByName()">按照name获取</a>
		<a href="javascript:void(0)" onclick="testByTagName()">按照标签名获取</a>
		<a href="javascript:void(0);" onclick="testByClass();">按照class获取</a>
		
		<script type="text/javascript">
			//加载事件
			/* window.onload = function(){
				var p = document.getElementById("p1");
				console.log(p);
			} */
			
			//按照id获取
			function testById(){
				var p = document.getElementById("p1");
				console.log(p);
			}
			
			//按照name获取
			function testByName(){
				var hobbys = document.getElementsByName("hobby");
				console.log(hobbys);
				var text = document.getElementsByName("txt")[0];
				console.log(text);
			}
			
			//按照标签名获取
			function testByTagName(){
				var inputs = document.getElementsByTagName("input");
				console.log(inputs);
			}
			
			//按照class获取
			function testByClass(){
				var paras = document.getElementsByClassName("para");
				console.log(paras);
			}
		</script>

创建和添加元素

创建节点和插入节点
                createElement()        创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
                createTextNode()      创建一个文本节点，可以传入文本内容
                innerHTML                也能达到创建节点的效果，直接添加到指定位置了
                write()                        将任意的字符串插入到文档中
                appendChild()           向元素中添加新的子节点，作为最后一个子节点 
                                                  如果追加的元素不存在，则添加新的；如果追加的元素存在，则会将原有的元素添加到新的位置（剪切）
                insertBefore()            向指定的已有的节点之前插入新的节点
                                        newItem：要插入的节点
                                        exsitingItem：参考节点   需要参考父节点

<button onclick="addPara();">添加段落</button>
		<button onclick="addImg();">添加图片</button>
		<button onclick="addTxt();">添加文本框</button>
		<button onclick="addOptions()">添加选项</button>
		<select name="music">
			<option value="-1">你心内的一首歌</option>
			<option value="0">南山南</option>
			<option value="1">喜欢你</option>
		</select>
		<hr />
		<div id="container"></div>
		
		<span>周杰伦</span>
		<script type="text/javascript">
			//获取需要添加节点的位置
			var div = document.getElementById("container");
			
			//添加段落
			function addPara(){
				//方式一
				//创建元素节点
				/* var p = document.createElement("p");
				//创建文本节点
				var text = document.createTextNode("段落标签");
				//将文本节点追加到元素节点的内部
				p.appendChild(text);
				//将元素追加到div的内部
				 */
				
				
				//方式二
				//创建元素节点
				/* var p = document.createElement("p");
				p.innerHTML = "段落方式二";
				console.log(p); 
				div.appendChild(p);*/
				
				
				//方式三
				var p = "<p>段落方式三</p>";
				//给div设置内容
				div.innerHTML += p;
				
			}
			
			//添加图片
			function addImg(){
				//方式一
				//创建一个图片
				/* var img = document.createElement("img"); 
				//设置图片属性
				img.src = "img/lbw.jpg";
				img.width = "100";
				img.height = "100";
				//将图片追加到指定位置
				div.appendChild(img); */
				
				//方式二
				//创建一个图片
				/* var img = document.createElement("img"); 
				//设置图片属性
				img.setAttribute("src","img/lbw.jpg");
				img.setAttribute("width","100");
				img.setAttribute("height","100");
				//将图片追加到指定位置
				div.appendChild(img); */
				
				//方式三
				var str = "<img src='img/lbw.jpg' width='100' height='100' />";
				div.innerHTML += str;
			}
		
			//添加文本框
			function addTxt(){
				//方式一
				var input = document.createElement("input"); 
				/*input.type = 'text';
				input.name = 'uname';
				 */
				
				//方式二
				// setAttribute设置属性
				input.setAttribute("type",'text');
				div.appendChild(input);
				
			}
		
			//添加选项
			function addOptions(){
				//用户输入歌曲名称
				var sname = prompt("请输入歌曲名称");
				
				//获取下拉框的节点
				var select = document.getElementsByName("music")[0];
				
				//方式一
				//创建下拉选项
				/* var option = document.createElement("option");
				//设置下拉选项的内容
				option.innerHTML = sname;
				//设置属性
				option.value = 2;
				//将下拉选项追加到下拉框中
				select.appendChild(option); */
				
				//方式二
				/* var options = select.options; //下拉框的所有下拉选项
				//创建下拉选项
				var newOption = document.createElement("option");
				newOption.innerHTML = sname;
				//将选项添加到下拉框数组中
				options.add(newOption); */
				
				//方式三
				var options = select.options; //下拉框的所有下拉选项
				//创建下拉选项
				var newOption = new Option();
				console.log(newOption);
				newOption.innerHTML = sname;
				//将选项添加到下拉框数组中
				options.add(newOption);
			}
		
			//将任意的字符串插入到文档中
			// document.write("到爱打架欧艾斯");
			
			//insertBefore
			//获取目标位置
			var select = document.getElementsByName("music")[0];
			//获取需要移动的元素节点
			var zjl = document.getElementsByTagName("span")[0];
			//参考父节点   
			var parent = select.parentElement;
			parent.insertBefore(zjl,select);

间接查找节点

childNodes           返回元素的一个子节点的数组
firstChild               返回元素的第一个子节点
lastChild               返回元素的最后一个子节点
nextSibling           返回元素的下一个兄弟节点
parentNode          返回元素的父节点
previousSibling    返回元素的上一个兄弟节点

<div id="div1">
	<span>span 1号</span><span>span 2号</span>
	<div>块级元素</div>
</div>
<span>兄弟节点</span>
		
		<script type="text/javascript">
			var div1 = document.getElementById("div1");
			//childNodes
			var childNodes = div1.childNodes;
			console.log(childNodes);
			//firstChild
			console.log(div1.firstChild);
			//lastChild
			console.log(div1.firstChild);
			//nextSibling
			console.log(div1.nextSibling);
			//parentNode
			console.log(div1.parentNode);
			//previousSibling
			console.log(div1.previousSibling);
		</script>

删除节点

removeChild()   从元素中移除子节点
目标节点.父节点.removeChild(目标节点);

<div>div元素</div>
<button type="button" onclick="fun()">删除div</button>
		<script type="text/javascript">
			function fun(){
				//获取目标节点
				var div = document.getElementsByTagName("div")[0];
				//删除
				div.parentElement.removeChild(div);
			}
		</script>