1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script type="text/javascript"> 8 /* 9 定义一个函数，专门用来为指定元素绑定单击响应函数 10 参数 11 idStr 要绑定单击响应函数的对象id属性值 12 */ 13 function myClick(str,fun){ 14 var a=document.getElementById(str); 15 a.onclick=fun; 16 } 17 window.onload=function(){ 18 19 20 myClick("01",function(){ 21 var shanghai=document.getElementById("shanghai"); 22 var a=shanghai.parentNode; 23 alert(a.innerHTML); 24 alert(a.innerText); 25 }); 26 myClick("02",function(){ 27 //返回Android前一个兄弟节点 28 var a=document.getElementById("Android"); 29 var ps=a.previousSibling; 30 alert(ps.innerHTML); 31 }); 32 /* 33 innerText 该属性可以获取到元素内容的文本内容 34 它和innerHTML类似，不同的是它会自动将HTML去掉，得到其中的文本内容 35 */ 36 myClick("03",function(){ 37 var a=document.getElementById("name"); 38 //读取a的value属性值，文本框的value属性值，就是文本框中填写的内容 39 alert(a.value); 40 }); 41 myClick("04",function(){ 42 //获取#shanghai中的文本节点 43 var sh=document.getElementById("shanghai"); 44 //alert(sh.innerHTML); 45 //alert(sh.innerText); 46 //var fc=sh.firstChild; 47 //alert(fc.nodeValue); 48 alert(sh.firstChild.nodeValue); 49 }); 50 }; 51 </script> 52 <style type="text/css"> 53 *{ 54 margin:0px; 55 padding:0px; 56 } 57 ul{ 58 text-docoration:none; 59 } 60 </style> 61 <body> 62 <!-- 63 parentNode 表示当前节点的父节点 64 previousSibling 表示当前节点的前一个兄弟节点(可以获取到空白的文本) 65 previousElementSibling 获取前一个兄弟元素 ie8及以下不支持 66 nextSibling 表示当前节点的后一个兄弟节点 67 --> 68 你的名字： 69 <input type="text" id="name"/> 70 <p>你喜欢的城市是什么？</p> 71 <ul id="city"> 72 <li id="shanghai">上海</li> 73 <li>北京</li> 74 <li>深圳</li> 75 </ul> 76 <p>你的手机的操作系统？</p> 77 <ul id="phone"> 78 <li>IOS</li><li id="Android">Android</li> 79 </ul> 80 <input type="button" value="button1" id="01"> 81 <input type="button" value="button2" id="02"> 82 <input type="button" value="button3" id="03"> 83 <input type="button" value="button4" id="04"> 84 </body> 85 </html>