码迷,mamicode.com
首页 > Web开发 > 详细

js DOM操作练习

时间:2014-11-26 18:28:32      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   sp   for   on   

1.有如下html,如果用js获得被选中的option的text描述(非value)
<select id="select_id">
    <option vlue="1">text1</option>
    <option vlue="2">text2</option>
    <option vlue="3">text3</option>
    <option vlue="4">text4</option>
</select>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
 <select id="select_id">
     <option value="text1">text1</option>
    <option value="text2">text2</option>
    <option value="text3">text3</option>
 </select>
 <script>
  var obj=document.getElementById("select_id");  //获取select元素
  obj.onchange=function(){
      for(var i=0;i<obj.options.length;i++){
        if(obj.options[i].selected)
        alert(obj.options[i].text);              //输出被选项的文本信息
    }
  }
 </script>
</body>
</html>

2.有如下html,如何用js取得month的值
<form id="form_id">
<input type="radio" name="month"value=1 />
<input type="radio" name="month"value=2 />
<input type="radio" name="month"value=3 />
<input type="radio" name="month"value=4 />
</form>

3.有如下html,如何通过Dom方法来取得最后一个p的text
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
  <p>Hello World!</p>
  <p>Isn‘T this exciting!<p>
  <p>You‘re learning to ues ths DOM!</p>
</body>
</html>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
  <p>Hello World!</p>
  <p>Isn‘T this exciting!<p>
  <p>You‘re learning to ues ths DOM!</p>
 <script>
  var obj=document.getElementsByTagName("p");
  var txt=obj[obj.length-1].innerHTML||obj[obj.length-1].textContent;  //IE与Firefox浏览器兼容
  alert(txt);   
 </script>
</body>
</html>

4..要用标准dom方法来动态在页面body中加入如下html,该如何做?
<p id="pl">hello world</p>

<script>
     var p=document.createElement("p");                 //创建元素节点
    var txt=document.createTextNode("hello world!");   //创建文本节点
    p.appendChild(txt);                                // 将文本节点添加到新创建元素中
    document.body.appendChild(p);                      //将添加了文本的元素添加到页面中
 </script>

 

js DOM操作练习

标签:style   blog   http   io   ar   color   sp   for   on   

原文地址:http://www.cnblogs.com/duduSunny/p/4123789.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!