JavaScript 基础操作总结（三）
7. 插入节点：
1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode, targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面
节点 targetNode 必须是 element 元素的一个子节点
2). 自定义 insertAfter() 方法
//把 newNode 插入到 refNode 的后面
function insertAfter(newNode, refNode){
//1. 测试 refNode 是否为其父节点的最后一个子节点
var parentNode = refNode.parentNode;
if(parentNode){
var lastNode = parentNode.lastChild;
//2. 若是： 直接把 newNode 插入为 refNode 父节点的最后一个子节点
if(refNode == lastNode){
parentNode.appendChild(newNode);
}else{
//3. 若不是：获取 refNode 的下一个兄弟节点，然后插入到其下一个兄弟节点的前面
var nextNode = refNode.nextSibling;
parentNode.insertBefore(newNode, nextNode);
}
}
}
8. innerHTML 属性：
1). 浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。
innerHTML 属性可以来读，写某给 定元素里的 HTML 内容。
var cityNode = document.getElementById("city");
alert(cityNode.innerHTML);
//互换 #city 节点 和 #game 节点的内容
var tempHTML = cityNode.innerHTML;
var gameNode = document.getElementById("game");
cityNode.innerHTML = gameNode.innerHTML;
gameNode.innerHTML = tempHTML;
<script type="text/javascript">
window.onload = function(){
//1. 为 #province 添加 onchange 响应函数
document.getElementById("province").onchange = function(){
//1.1. 把 #city 节点除第一个子节点外都移除
var cityNode = document.getElementById("city");
var cityNodeOptions = cityNode.getElementsByTagName("option");
var len = cityNodeOptions.length;
for(var i = 1; i < len; i++){
//为将city 的子节点全部删除，每次只删除第二个节点即可
cityNode.removeChild(cityNodeOptions[1]);
}
//2. 加载 cities.xml 文件，得到代表该文档的 document 对象
var xmlDoc = parseXml("cities.xml");
var provinceValue = this.value; //province 的名称
if(provinceValue == ""){
return;
}
//3. 在 cities.xml 文档中查找和选择的省匹配的 province 节点
//根据属性找节点 title[@lang="eng"]
//直接使用 XPath 奇数查找 XML 文档中匹配的方法
var provinceEles = xmlDoc.selectNodes("//province[@name='"
+ provinceValue +"']");
//4. 再得到 province 节点的所有 city 子节点
var cityNodes = provinceEles[0].getElementsByTagName("city");
//5. 遍历 city 子节点，得到每一个 city 子节点的文本值
for(var i = 0; i < cityNodes.length; i++){
//6. 利用得到的文本值创建 option 节点
//<option>cityName</option>
var cityText = cityNodes[i].firstChild.nodeValue;
var cityTextNode = document.createTextNode(cityText);
var optionNode = document.createElement("option");
optionNode.appendChild(cityTextNode);
//7. 并把 6 创建的 option 节点添加为 #city 的子节点。
document.getElementById("city").appendChild(optionNode);
}
}
}
//js 解析 xml 文档的函数，只支持 ie
function parseXml(fileName){
//IE 内核的浏览器
if(window.ActiveXObject){
//创建 DOM 解析器
var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = "false";
//加载 XML 文档，获取 XML文档对象
doc.load(fileName);
return doc;
}
}
</script>
<body>
<select id="province">
<option value="">请选择</option>
<option value="河北省">河北省</option>
<option value="辽宁省">辽宁省</option>
<option value="山东省">山东省</option>
</select>
<select id="city"><option value="...">请选择</option></select>
</body>
**************************************************************************************
*********************************************************************************
<script type="text/javascript">
/*
* 需求：若 checkedAll_2 别选择，则 name=items 的checkbox 都被选中
* 若 #checkedAll_2 取消选中，则 name=items 的 checkbox 都取消选中
* 若 name=items 的 checkbox 被选中，则 #checkedAll_2 的 checkbox 也被选中
* 若 name=items 的 checkbox 有一个没有被选中，则 #checkedAll_2 取消选择。
*/
//提示： 事件需要加给 #checkedAll_2，获取 name=items 的 checkbox 数组
// 判断是否被选中，若被选择，则 name=items 的 checkbox 都要被选择
// 若没有被选择，则 name=items 的 checkbox 都要取消选择
// 根据是否存在 checked 属性来判断是否被选择，可以使其 checked 属性等于 true
// checked = false 取消选择。
// 还需要给每个 name=items 的 checkbox 加响应函数
// 判断 name=items 的 checkbox 是否都被选中：选择的个数和总个数是否相等。
// 若都被选择：则使 #checkedAll_2 被选择
// 若没有被选择：则使 #checkedAll_2 取消选择
window.onload = function(){
document.getElementById("checkedAll_2").onclick = function(){
var flag = this.checked;
var items = document.getElementsByName("items");
for(var i = 0; i < items.length; i++){
items[i].checked = flag;
}
}
var items = document.getElementsByName("items");
for(var i = 0; i < items.length; i++){
items[i].onclick = function(){
var number = 0;
for(var j = 0; j < items.length; j++){
if(items[j].checked){
number++;
}
}
document.getElementById("checkedAll_2").checked =
(number == items.length);
}
}
//全选
document.getElementById("CheckedAll").onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].checked = true;
}
}
//全部选
document.getElementById("CheckedNo").onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].checked = false;
}
}
//反选
document.getElementById("CheckedRev").onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].checked = !items[i].checked;
}
}
//提交
document.getElementById("send").onclick = function(){
for(var i = 0; i < items.length; i++){
if(items[i].checked){
alert(items[i].value);
}
}
}
}
</script>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAll_2"/>全选/全部选
<br/> <input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/> <input type="button" id="CheckedAll" value="全选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反选"/>
<input type="button" id="send" value="提交"/>
</form>
</body>