前端——JS的相关操作-CSDN博客

本文链接：https://blog.csdn.net/qq_42070179/article/details/88937056

JS的相关操作

注意：以下为纯代码，不含本地资源（及可以在任何正常环境运行运行）
HTML和对应编号的JS相匹配,代码运行时需注释掉其他的代码
代码为学习视频的产品，若有侵权告知删除

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>js.Dom</title>
</head>
<body>
		*******************13***********************
		<div id="subject">jquery</div>

		*********************12删除******************
		<ul id="city">
	   	 <li id="bj" name="beijing">北京</li>
		 <li id="sh" name="shanghai">上海</li>
		 <li id="cq" name="chongqing">重庆</li>
	   </ul>

		*******************11添加节点**************
		<ul>
	   	 <li id="bj" name="beijing">北京</li>
		 <li id="sh" name="shanghai">上海</li>
		 <li id="cq" name="chongqing">重庆</li>
	  	</ul>

	********************10添加节点**************
	您喜欢的城市:<br> 
	   <ul id="city">
	   	 <li id="bj" value="beijing">北京</li>
		 <li id="sh" value="shanghai">上海</li>
		 <li id="cq" value="chongqing">重庆</li>
	   </ul>
	  
	  您喜欢的游戏:<br> 
	   <ul>
	   	 <li id="fk" value="fangkong">反恐</li>
		 <li id="ms" value="moshou">魔兽</li>
		 <li id="xj" value="xingji">星际争霸</li>
	   </ul>

	********************9修改节点**************
	 您喜欢的城市:<br> 
	   <ul>
	   	 <li id="bj" value="beijing">北京</li>
		 <li id="sh" value="shanghai">上海</li>
		 <li id="cq" value="chongqing">重庆</li>
	   </ul>
	  
	  您喜欢的游戏:<br> 
	   <ul>
	   	 <li id="fk" value="fangkong">反恐</li>
		 <li id="ms" value="moshou">魔兽</li>
		 <li id="xj" value="xingji" >星际争霸</li>
	   </ul>   

	********************8获取节点**************
	 您喜欢的城市:<br> 
	   <ul>
	   	 <li id="bj" value="beijing">北京</li>
		 <li id="sh" value="shanghai">上海</li>
		 <li id="cq" value="chongqing">重庆</li>
	   </ul>
	  
	  您喜欢的游戏:<br> 
	   <ul>
	   	 <li id="fk" value="fangkong">反恐</li>
		 <li id="ms" value="moshou">魔兽</li>
		 <li id="xj" value="xingji">星际争霸</li>
	   </ul>   

	********************7获取节点**************
	 您喜欢的城市:<br> 
	   <ul>
	   	 <li id="bj" value="beijing">北京</li>
		 <li id="sh" value="shanghai">上海</li>
		 <li id="cq" value="chongqing">重庆</li>
	   </ul>
	  
	  您喜欢的游戏:<br> 
	   <ul>
	   	 <li id="fk" value="fangkong">反恐</li>
		 <li id="ms" value="moshou">魔兽</li>
		 <li id="xj" value="xingji">星际争霸</li>
	   </ul> 


	********************7替换节点**************
	您喜欢的城市:<br> 
	   <ul>
	   	 <li id="bj" value="beijing">北京</li>
		 <li id="sh" value="shanghai">上海</li>
		 <li id="cq" value="chongqing"> 重庆</li>
	   </ul>
	  
	  您喜欢的游戏:<br> 
	   <ul>
	   	 <li id="fk" value="fangkong">反恐<p>精英</p></li>
		 <li id="ms" value="moshou">魔兽</li>
		 <li id="cq" value="chuanqi">传奇</li>
	   </ul>   


	*******************6*****************
	  <ul>
	   	 <li id="bj" value="beijing">
	   	 	北京
			<p>海淀</p>
			奥运
	   	 </li>
		 <li id="sh" value="shanghai">上海</li>
	   </ul>



  	***************5输出节点值********************

	<form name="form1" action="test.html" method="post" >
	   	  <input type="text" name="tname" value="IT精英培训_1"  id="tid_1"  ><br>
		  <input type="text" name="tname" value="IT精英培训_2"  id="tid_2"  ><br>
		  <input type="text" name="tname" value="IT精英培训_3"  id="tid_3"  ><br>
		  <input type="button" name="ok" value="保存1"/>
  	</form>
  	<p id="pid">明天上课</p>

  

  *****************4*********************
  	<form name="form1" action="test.html" method="post" >
	   	  <input type="text" name="tname" value="IT精英培训_1"  id="tid_1"  ><br>
	  <input type="text" name="tname" value="IT精英培训_2"  id="tid_2"  ><br>
	  <input type="text" name="tname" value="IT精英培训_3"  id="tid_3"  ><br>
	  <input type="button" name="ok" value="保存1"/>
	   </form>
   
   
  <h1 id="h1">明天休息</h1>

	*************3标签名获得集合元素集合**********
	<form>
		<input type="text" name="tanem" value="123" id="tid_1">
		<input type="text" name="tanem" value="456" id="tid_2">
		<input type="text" name="tname" value="789" id="tid_3">
		<input id="but1" type="button" name="Ok" value="config">
	</form>

	<select naem="numbers" id="num">
		<option value="1">1</option>
		<option value="2" selected="selected">2</option>
		<option value="3">3</option>
	</select>
	<select name="chars" id="char">
		<option value="o1">o1</option>
		<option value="o2">o2</option>
		<option value="03">o3</option>
	</select>
	<input id="but" type="button" name="button" value="Submit">




	***********************2节点对象的集合******************
	<form>
		<input type="text" name="tname" value="123" id="tid_1">
		<input type="text" name="tname" value="456" id="tid_2">
		<input type="text" name="tname" value="789" id="tid_3">
		<input type="button" name="Ok" value="config">
	</form>




	***********************1**************************

	<form>
		<input type="text" name="uername" value="IT" id="tid">
		<input type="button" name="OK" value="config">
	</form>

	
</body>
<script type="text/javascript">
	__________________13______________________

	//使用innerHTML读出id=subject中的文本内容
	var div = document.getElementById("subject");
	alert(div.innerHTML);
	
	//将<h1>今天</h1>写到div的层中
	var div = document.getElementById("subject");
	div.innerHTML = "<h1>今天</h1>";


	//—————————————————12删除节点—————————————————————
	var city = document.getElementById("city");
	var bj = document.getElementById("bj");
	city.removeChild(bj);

	//—————————————————11节点—————————————————————
	var li = document.createElement("li");
	 li.setAttribute("id", "tj");
	 li.setAttribute("value", "tianjin");

	 var text = document.createTextNode("天津");
	 li.appendChild(text);

	 var ul = document.getElementsByTagName("ul");

	 var sh = document.getElementById("sh");
	 var cq = sh.nextSibling;
	 //____等价于
	 // var cq = document.getElementById("cq");
		// ul[0].insertBefore(li,cq);

	 ul[0].insertBefore(li,cq);

	 


	//_________________10添加节点__________________
	var li = document.createElement("li");
	 li.setAttribute("id", "tj");
	 li.setAttribute("value", "tianjin");

	 alert(li.getAttribute("id"));

	 var text = document.createTextNode("天津");
	 li.appendChild(text);

	 var city = document.getElementById("city");
	 city.appendChild(li);



	//_________________9__________________

	 //   // 给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li>
		var xj = document.getElementById("xj");
		xj.setAttribute("name","xingjizhengba");
  	  //测试
  	 alert(xj.getAttribute("name"));

	  var fk = document.getElementById("fk");
	  fk.setAttribute("value", "ffkk");
	  alert(fk.getAttribute("value"));
  	  

	//_________________8__________________

	var xjs = document.getElementById("xj");
	alert(xjs.getAttribute("value"));


	// _________________7__________________
	//  点击北京节点， 将被反恐节点替换
    var bj = document.getElementById("bj");
    var fk = document.getElementById("fk");
    bj.onclick = function(){
    	var parentNode = this.parentNode;
    	parentNode.replaceChild(fk,this);
    };



	//——————————————————6——————————————————

	//打印出 id=“bj” 该节点的所有子节点的(nodeName, nodeType, nodeValue)
  	
		var nodes = document.getElementById("bj");
    alert(nodes.nodeName);
    alert(nodes.nodeType);
    alert(nodes.nodeValue);
  

    //同时打印文本值  北京 海淀  奥运 


	//———————————————————————5————————————

	//方法一 利用firstChild/lastChild  输出明天休息
  	var text = document.getElementById("h1");
    var si = text.lastChild;
    alert(si.nodeValue);
  	// //测试nodeValue是一个读写属性
    
  	
  	// //方法二childNodes表示父元素下的所有的子元素(数组)
  	var h1 = document.getElementById("h1");
  	var childs = h1.childNodes;
  	alert(childs[0].nodeValue);


	//____________________4___________________

	// //元素节点  id="tid_1"  输出nodeName nodeType nodeValue
	var node = document.getElementById("tid_1");
	 alert(node.nodeName);//input
	alert(node.nodeType);//1
	alert(node.nodeValue);//null 
	
	// 文本节点 id="pid"  输出nodeName nodeType nodeValue
	var node = document.getElementById("pid");
	var textNode = node.firstChild;
	alert(textNode.nodeName);//#text
	alert(textNode.nodeType);//3
	alert(textNode.nodeValue);//明天上课 
	
	// //属性节点  id="pid"   输出nodeName nodeType nodeValue
	 var node = document.getElementById("pid");
	var p = node.getAttributeNode("id");
	alert(p.nodeName);//id
	alert(p.nodeType);//2
	alert(p.nodeValue);//pid 
	// ____________________3__________________
	
	var inputNodes = document.getElementsByTagName("input");
	alert(inputNodes.length);
	// 输出所有包含input的节点的值
	for( var i = 0; i < inputNodes.length; i++){
		var inputNode = inputNodes[i];
		alert(inputNode.value);
	}

	// 输出所有包含input的节点，type = text的节点的value
	for( var i = 0; i < inputNodes.length; i++){
		var inputNode = inputNodes[i];
		if( inputNode.type == "text"){
			alert(inputNode.value);
		}
	}

	//输出所有下拉选select的option标签中value的值
	var options = document.getElementsByTagName("option");
	for( var i = 0; i < options.length; i++){
		var option = options[i];
		alert(option.value);
	}

	//输出所有下拉选 id="cahrs"中option标签中 value属性的值
	var chars = document.getElementById("char");
	var optionNodes = chars.getElementsByTagName("option");
	for( var i = 0; i < optionNodes.length; i++){
		var option = optionNodes[i];
		alert(option.value);
	}

	//点击按钮输出下拉框中被选中的值

	var button = document.getElementById("but");
	button.onclick = function(){
		var optionNodes = document.getElementsByTagName("option");
		for( var i = 0; i < optionNodes.length; i++){
			var optionNode = optionNodes[i];
			if(optionNode.selected){
				alert(optionNode.value);
			}
		}
	}
	

	// ____________________2获取节点集合元素________________

	var inputNodes = document.getElementsByName("tname");
	for(var i = 0; i < inputNodes.length; i++){
		var inputNode = inputNodes[i];
		inputNode.onchange = function(){
			alert(this.value);
		};
	}


	// ____________________1__________________

	var inputNode1 = document.getElementById("tid");
	alert(inputNode1.value);

	

</script>
</html>