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>
js DOM操作练习的更多相关文章
- JS DOM操作（创建、遍历、获取、操作、删除节点）
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- js dom 操作
JS的DOM操作 1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...
- JS—DOM操作
节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...
- js——DOM操作（一）
DOM:Document Object Model 文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义 为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树 ...
- JS DOM操作 函数 事件 阻止事件冒泡
一 函数 1.字符串函数 s.tolowerCase( ): -- 变小写 s.toupperCase( ): -- 变大写 s.substr( 2 , 8 ): -- 截取 ...
- JS DOM操作（五） Window.docunment对象——操作元素
定位: var a = document.getElementByIt( "id" ) 同辈元素 var b = a.nextSibling; -- 找 a ...
- JS DOM操作（二） Window.docunment对象——操作样式
一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class 用在客户端 name 用在服务端 用 id 定位 -- ...
- JS DOM操作（一） 对页面的操作
DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...
- js dom 操作技巧
1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
随机推荐
- I - DFS（依然是漫水填充）
Description There is a rectangular room, covered with square tiles. Each tile is colored either red ...
- java读utf8 的txt文件，第一个字符为空或问号问题
参考:https://blog.csdn.net/yangzhichao888/article/details/79529756 https://blog.csdn.net/wangzhi291/ar ...
- ie下php session不能用（域名的合法定义）
今天遇到了一个奇怪的问题.应用程序的后台ie下居然无法登陆,老是提示验证码不正确,明明输入是正确的.于是抓包.测试.调试,最终发现罪魁祸首phpsessionid在ie下没有办法写入.研究了一下,发现 ...
- 文件权限设置与http,php的关系
在web服务器上的文件要使用什么权限比较好呢.我开始的时候直接都是777,后台安全部门的同事,通过漏洞把我管理的服务器给搞了.报告到我这里,我才意识到权限的设置不能马虎.环境采用nginx+php,一 ...
- 【Intellij 】Intellij IDEA 添加jar包的三种方式
一.直接复制:(不推荐) 方法:直接将硬盘上的jar包复制粘贴到项目的lib目录下即可. 注意: 1.对于导入的eclipse项目,该方式添加的jar包没有任何反应,用make编译项目会报错 2.对于 ...
- 新vim配置文件
"******************************************************特殊设置************************************ ...
- 基于端口的信息探测-portscan-1.0
http://www.tiaozhanziwo.com/archives/174.html
- Linux纯Shell实现DNSPod动态域名
http://www.anrip.com/post/872 开发背景: 公司有台嵌入式拨号上网设备,内置busybox和完整wget命令(支持https协议),但没有curl.python.ruby. ...
- 条款五：对应的new和delete要采用相同的形式
string *stringarray = new string[100]; ... delete stringarray; 上述程序的运行情况将是不可预测的.至少,stringarray指向的100 ...
- 一个Navi过程下多个DocumentCompleted事件问题的解决的方法
7.16 Marked to Write.... 七月份马克的一篇文章了,今天才想起来把他写完,呵呵. 原本是七月份用来做微博爬虫的,后来发现新浪对机器人的检測不好绕过,连简单地訪问都会被检測出来,后 ...