js DOM操作练习

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>

 

转载于:https://www.cnblogs.com/duduSunny/p/4123789.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值