Dom入门(三)--------关于实际应用
关于多选按钮:
• //当窗口加载完毕之后触发匿名函数
• window.οnlοad=function(){
• //获取 的是name名称等于fav的所有节点对象
• var favs=document.getElementsByName("fav");
• alert(favs.length);
• //遍历出所有节点的value值
• for(var i=0;i<favs.length;i++){
• //得到一个具体的节点
• var fav=favs[i];
• //注册事件
• fav.οnclick=function(){
• alert("你难道真的喜欢"+this.value+"这个节目吗");
• }
• }
• }
关于下拉菜单:
//获取edus节点的name属性的值
var edus=document.getElementById("edus");
//getAttribute() 获取该节点的属性名称等于name的值
var value=edus.getAttribute("name");//得到这个属性名称的字符串,以字符串形式传递
//获取该节点的指定名称的属性节点
var nameNode=edus.getAttributeNode("name");//得到属性名称为name的属性节点名称
alert(nameNode.nodeName+"----"+nameNode.nodeType+"-----"+value);
//节点,为节点添加属性 ,第一个参数是属性的名称,第二个参数是属性的值 如果这个属性已经存在,则修改属性,如果不存在,则先创建再赋值,也是以字符串形式传递的
//修改之后在网页上查看源文件时也不会显示,用getAttribute查看时会发现变化
edus.setAttribute("name","redmary");
//属性名 属性值 ""
var value=edus.getAttribute("name");
alert(value);
修改属性例子:
//获取uname节点
var arr=document.getElementById("uname");
//获取uname节点的属性为type的节点
var aaa=arr.getAttribute("type");
alert(aaa);
//把type的类型该为button
arr.setAttribute("type","button");
var value=arr.getAttribute("type");
alert(value);
//把type的类型该为checkbox
arr.setAttribute("type","checkbox");
var value=arr.getAttribute("type");
alert(value);
创建元素:
//创建元素
var inputNode=document.createElement("input");
//为元素赋值
inputNode.setAttribute("type","text");
inputNode.setAttribute("name","uname");//现在只是游离状态,在页面上不显示
//获取指定的节点
var bdyNode=document.getElementById("bdy");
//给指定节点添加子节点
bdyNode.appendChild(inputNode);//为节点bdy添加子节点
添加数据小实例:
//获取按钮
var addNode=getId("add");
var usersNode=getId("users");
//注册按钮事件
addNode.οnclick=function(){
var tr=document.createElement("tr");
var td1=document.createElement("td");
var td1Text=document.createTextNode(getId("uname").value);
td1.appendChild(td1Text);
var td2=document.createElement("td");
var td2Text=document.createTextNode(getId("usex").value);
td2.appendChild(td2Text);
var td3=document.createElement("td");
var td3Text=document.createTextNode(getId("uage").value);
td3.appendChild(td3Text);
var td4=document.createElement("td");
//添加按钮,首先创建按钮
var delNode=document.createElement("button");
delNode.setAttribute("value","删除");
//删除事件
delNode.οnclick=function(){
usersNode.removeChild(this.parentNode.parentNode);//this.parentNode.parentNode为tr
}
td4.appendChild(delNode);
td4.appendChild(upNode);
//把td添加到tr中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
// 把tr添加到tbody中
usersNode.appendChild(tr);
}
function getId(id){
return document.getElementById(id);
}