十四、innerHTML属性
浏览器几乎都支持该属性,但不是DOM标准的组成部分。
innerHTML属性可以用来读,写给某给定元素里的HTML内容。
window.οnlοad=function(){
//互换#city节点和#game节点中的内容。
varcityNode=document.getElementById("city");
var tempHTML=cityNode.innerHTML;
var gameNode=document.getElementById("game");
cityNode.innerHTML=gameNode.innerHTML;
gameNode.innerHTML=tempHTML;
}
十四、总结
1.创建节点
①创建元素节点:document.createElement(tagName)
varliNode=document.createElement(“li”);
②创建属性节点:需要先创建一个元素节点,然后通过 . 的方式为其属性赋值即可。
var aNode=document.createElement(“a”);
aNode.href=”deleteEmp?id=xxx”;
③创建文本节点:document.createTextNode(textContent)
varxmText=document.createTextNode(“厦门”);
④注意:新创建的节点不会自动地加入到文档树的任何位置,需要调用节点的appendChild()方法把新创建的节点加入到文档树的合适位置。
2.加入子节点:appendChild(newChild)
①把节点加为指定节点的最后一个子节点。
②代码:
//创建li节点:<li></li>
varliNode=document.createElement(“li”);
//创建一个文本节点:厦门
varxmText=document.createTextNode(“厦门”);
//加入子节点:<li>厦门</li>
liNode.appendChild(xmText);
3.节点的替换:replaceChild(newChild,oldChild)
①该方法除了替换外,还有移动节点的功能。
②代码:
varbjNode=document.getElementById(“bj”);
varrlNode=document.getElementById(“rl”);
vargameNode=document.getElementById(“game”);
//将把rlNode替换为bjNode,同时bjNode被移动
gameNode.replaceChild(bjNode,rlNode);
③可以自定义一个replaceEach(aNode,bNode)实现aNode和bNode的互换
functionreplaceEach(aNode,bNode){
//1.获取aNode和bNode的父节点,使用parentNode属性
var aParent=aNode.parentNode;
var bParent=bNode.parentNode;
if(aParent&&bParent){
//2.克隆aNode或bNode
varaNode2=aNode.cloneNode(true);
//3.分别调用aNode的父节点和bNode的父节点的replaceChild()
//实现节点的互换
bParent.replaceChild(aNode2,bNode);
aParent.replaceChild(bNode,aNode);
}
}
4.移除节点:removeChild(refChild);
①可以借助于parentNode属性
②代码:
varbjNode=document.getElementById(“bj”);
bjNode.parentNode.removeChild(bjNode);
5.节点的插入:insertBefore(newNode,refNode);
①若newNode是文档中的节点,也具有移动节点的功能
②代码:
varcityNode=document.getElementById(“city”);
varbjNode=document.getElementById(“bj”);
varrlNode=document.getElementById(“rl”);
cityNode.insertBefore(rlNode,bjNode);
③W3C没有定义insertAfter方法
自定义insertAfter(newNode,refNode):实现把newNode加为refNode之后
functioninsertAfter(newNode,refNode){
//1.测试refNode是否为其父节点的最后一个子节点
var parentNode=refNode.parentNode;
if(parentNode){
varlastNode=parentNode.lastChild;
//2.若是:直接把newNode插入为refNode父节点的最后一个子节点
if(refNode==lastNode){
parentNode.appendChild(newNode);
}
//3.若不是:获取refNode的下一个兄弟节点,
//然后插入到其下一个兄弟节点的前面
else{
varnextNode=refNode.nextSibling;//下一个兄弟
parentNode.insertBefore(newNode,nextNode);
}
}
6.innerHTML属性
①非标准,但所有的浏览器都支持
②读写属性,读写某HTML元素的HTML内容
③代码:
varcityNode=document.getElementById("city");
alert(cityNode.innerHTML);
//互换#city节点和#game节点中的内容。
vartempHTML=cityNode.innerHTML;
var gameNode=document.getElementById("game");
cityNode.innerHTML=gameNode.innerHTML;
gameNode.innerHTML=tempHTML;
十五、实验---Select级联选择
window.onload = function(){
//1.为#province添加onchange响应函数
document.getElementById("province").οnchange=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++){
cityNode.removeChild(cityNodeOptions[1]);
}
var provinceVal=this.value;
if(provinceVal==""){
return;
}
//2.加载cities.xml文件,得到代表给文档的document对象
var xmlDoc=parseXml("cities.xml");
//3.在cities.xml文档中查找和选择的省匹配的province节点
//直接使用XPath技术查找XML文档中匹配的节点。
var provinceEles=xmlDoc.selectNodes("//province[@name='"
+provinceVal+"']")
//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的子节点。
cityNode.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;
}
}
}
十六、实验---Checkbox全选
一、需求:
若#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.οnlοad=function(){
document.getElementById("checkedAll_2").οnclick=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].οnclick=function(){
//记录有多少items被选中了
var number=0;
for(var j=0;j<items.length;j++){
if(items[j].checked){
number++;
}
}
document.getElementById("checkedAll_2").checked=(items.length==number);
}
}
//全选
document.getElementById("CheckedAll").οnclick=function(){
for(var i=0;i<items.length;i++){
items[i].checked=true;
}
}
//全不选
document.getElementById("CheckedNo").οnclick=function(){
for(var i=0;i<items.length;i++){
items[i].checked=false;
}
}
//反选
document.getElementById("CheckedRev").οnclick=function(){
for(var i=0;i<items.length;i++){
items[i].checked=!items[i].checked;
}
}
//提交
document.getElementById("send").οnclick=function(){
for(var i=0;i<items.length;i++){
if(items[i].checked){
alert(items[i].value);
}
}
}
}