1、用脚本实现上图所示的结果，打印所选择的；
用到的方法：
getElementsByTagName()
说明
1、查询给定标签名的所有元素
2、因为在html页面中，标签名不是唯一的，所以返回值为节点的集合。
3、这个集合可以当做数组来处理,length属性为集合里所有元素的个数
4、可以有两种形式来执行这个方法：
1、var elements=document.getElementsByTagName(tagName);
2、var elements =element.getElementsByTagName(tagName);
5、从这两种方法可以看出持有这个方法的对象并不一定是整个文档对象
(document).也可以是某一个元素节点。
getElementsByName()
说明：
1、查找给定name属性的所有元素，这个方法将返回一个节点集合，也可以称为对象集合。
2、这个集合可以作为数组来对待，length属性的值表示集合的个数。
3、因为在html页面中，name不能唯一确定一个元素，所以方法的名称为getElementsByName而不是getElementByName
<body>
<div id="frm">
用户名：<input type="text" name="username" id="uname"/>
</div>
<div id="frm1">
你喜欢的是哪个数字：<br/>
<input type="checkbox" value="1" name="fav"/>1
<input type="checkbox" value="2" name="fav"/>2
<input type="checkbox" value="3" name="fav"/>3<br/>
<input type="checkbox" value="4" name="fav"/>4
<input type="checkbox" value="5" name="fav"/>5
<input type="checkbox" value="6" name="fav"/>6
</div>
</body><script type="text/javascript">
window.οnlοad=function(){
//document的查找方法
//document.getElementsByTagName();
//根据id名称查找frm节点对象
//var frm=document.getElementById("frm");
//获取frm节点里边所有的标签名称为input节点对象
//var inputs=frm.getElementsByTagName("input");
//采用document获取
var docinputs=document.getElementsByTagName("input")
//作业
//及为这些节点添加事件处理
for(var i=0;i<docinputs.length;i++){
var ipt=docinputs[i];
if(ipt.type=="checkbox"){
display(ipt);
ipt.οnclick=function(){
var select="";
var radioObj=document.getElementsByName("fav");
for(var j=0;j<radioObj.length;j++){
if(radioObj[j].checked==true){
select+=radioObj[j].value;
}
}
alert("你选中了"+select);
}
}
}
}
</script>
2、用脚本实现以上效果，响应打印出所选择的，
用到的方法：
getElementById()
说明：
1、 查询给定ID属性值的元素，返回该元素的元素节点。也称为元素对象。
2、 因为在一个html页面中id的值是唯一的，所以返回值也是唯一的。所以方法的名称为getElementById()而不是getElementsById()
3、 该方法只能用于document对象，类似与java的static关键字。
<body>
<div id="frm">
用户名：<input type="text" name="username" id="uname"/>
</div>
<div id="frm1">
选择众多的学历：：
<select name="edu" id="edus">
<option value="博士">博士</option>
<option value="硕士">硕士</option>
<option value="本科">本科</option>
<option value="大专">大专</option>
<option value="高中">高中</option>
<option value="中专">中专</option>
</select>
</div>
</body><script type="text/javascript">
window.οnlοad=function(){
//获取id=edus里边的所有option元素
//第一步：首先采用document.getElementById("edus");
var edus=document.getElementById("edus");
//为edus触发事件
edus.οnchange=function(){
//作业：事件里边弹出option选中的值
alert(edus.value);
}
}
</script>3、用脚本实现
把博士与幼儿园交换和把id为uname的元素节点的类型变成checkbox；
用到 的方法：
replaceChild()
说明
1、把一个给定父元素里的一个子节点替换为另外一个子节点
2、var reference =element.replaceChild(newChild,oldChild)
3、返回值指向已经被替换掉的那个子节点的引用
getAttribute()
说明
1、返回一个给定元素的给定属性的节点的值
2、varattributeValue = element.getAttribute(attributeName)
3、给定属性的名字必须以字符串的形式传递给该方法
4、给定属性的值将以字符串的形式返回
5、通过属性获取属性节点
getAttributeNode(属性的名称) -----------返回属性节点
setAttribute()
说明
1、将给定元素添加一个新的属性或改变它现有属性的值
2、element.setAttribute(attributeName,attributeValue);
3、属性的名字和值必须以字符串的形式传递
4、如果这个属性已经存在，那么值将被attributeValue取代
5、如果这个属性不存在，那么先创建它，再给他赋值
<body>
<div id="frm">
用户名：<input typ="text" name="username" id="uname"/>
</div>
<div id="frm1">
选择众多的学历：：
<select name="edu" id="edus">
<option value="博士">博士</option>
<option value="硕士">硕士</option>
<option value="本科">本科</option>
<option value="大专">大专</option>
<option value="高中">高中</option>
<option value="中专">中专</option>
</select>
</div>
<div>
<option value="幼儿园" id="yey">幼儿园</option>
</div>
</body>脚本实现：
<script type="text/javascript">
window.οnlοad=function(){
//获取id=edus里边的所有option元素
//第一步：首先采用document.getElementById("edus");
var edus=document.getElementById("edus");
var newNode=document.getElementById("yey");
//var oldNode=document.getElementById("bs");
var options=edus.getElementsByTagName("option");
//
for(var i=0;i<options.length;i++){
if(options[i].value=="博士"){
edus.replaceChild(newNode,options[i]);
}
}
var inputDom=document.getElementById("uname");
var value=inputDom.getAttribute("name");
alert(value);
var attrNameNode=inputDom.getAttributeNode("name");
alert(attrNameNode.nodeName+"--"+attrNameNode.nodeType);
//兼容性问题
inputDom.setAttribute("type","checkbox");
}
</script>用到的方法：
createElement()
说明
1、按照给定的标签名创建一个新的元素节点，方法的参数为被创建的元素的名称
2、var reference =document.createElement(elementName);
3、方法的返回值指向新建节点的引用，返回值是一个元素节点，所以nodeType 为1
4、新建的节点不会自动添加到文档里，只是存在于document里一个游离的对象
createTextNode()
说明
1、创建一个包含给定文本的新文本节点
2、这个方法的返回值指向这个新建的文本节点的引用
3、该方法有一个参数：新建文本节点的文本内容
4、它是一个文本节点，所以nodeType值为3
5、新建的文本对象不会自动添加到文档里，属于游离态的对象。
appendChild()
说明
1、为给定元素增加一个子节点
var newreference =element.appendChild(newChild);
2、给定子节点newChild将成为element的最后一个节点
3、方法的返回值指向新增节点的引用
4、该方法通常与createElement()与createTextNode()一起使用
5、新节点可以追加给文档中的任何一个元素（不是属性和文本）
<body>
您喜欢的词语：
<br>
<ul id="ul">
<li id="gl" value="geili">
给力
</li>
<li id="nol" value="geili">
你out了
</li>
<li id="ly" value="laoye">
老爸
</li>
</ul><script type="text/javascript">
window.onload = function(){
//第一步：新一个元素
var liElement = document.createElement("li");
//第二步：增加文本节点
var textElement=document.createTextNode("传说");
liElement.appendChild(textElement);
//第三步：给元素设置属性id，value
liElement.setAttribute("id","cs");
liElement.setAttribute("value","chuanshuo");
//获取id为gl元素的父元素
var parentElement=document.getElementById("gl").parentNode;
//将新建的元素追加到父元素里
parentElement.appendChild(liElement);
//alert("成功");
}
</script>
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
