一、获取和修改元素间的内容(3种)
1.innerHTML 获得/设置元素开始标签和结束标签之间的html原文
固定套路：1.删除父元素下所有子元素：parent.innerHTML="";
2.批量替换父元素下所有子元素：parent.innerHTML="所有子元素标签组成的html"
2.textContent/innerText: 获得开始标签和结束标签之间的文本(去除标签)
textContent 是DOM标准；innerText 是IE8；
3.文本节点内容
nodeValue
示例：读取并修改元素内容
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>读取并修改元素的内容</title> 5 <meta charset="utf-8" /> 6 <style> 7 select{width:100px;height:85px;} 8 div{display:inline-block;width:50px} 9 </style> 10 <script src="js/2_2.js"></script> 11 </head> 12 <body> 13 <!--假设两个select元素，分别保存备选地区列表和选中地区列表 14 实现两选择框之间选项的交换： 15 包括：当个选中项左右移动 16 多个选中项左右移动 17 全左移和全右移 18 要求：两个select中的地区都要按照名称首字母排序 19 --> 20 <select id="unsel" size="5" multiple> 21 <option>Argentina</option> 22 <option>Brazil</option> 23 <option>Canada</option> 24 <option>Chile</option> 25 <option>China</option> 26 <option>Cuba</option> 27 <option>Denmark</option> 28 <option>Egypt</option> 29 <option>France</option> 30 <option>Greece</option> 31 <option>Spain</option> 32 </select> 33 <div> 34 <button onclick="move(this)">>></button> 35 <button onclick="move(this)">></button> 36 <button onclick="move(this)"><</button> 37 <button onclick="move(this)"><<</button> 38 </div> 39 <select id="sel" size="5" multiple> 40 </select> 41 </body> 42 </html>