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操作练习的更多相关文章

  1. JS DOM操作(创建、遍历、获取、操作、删除节点)

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  2. js dom 操作

    JS的DOM操作   1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...

  3. JS—DOM操作

    节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...

  4. js——DOM操作(一)

    DOM:Document Object Model  文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义  为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树 ...

  5. JS DOM操作 函数 事件 阻止事件冒泡

    一 函数 1.字符串函数 s.tolowerCase( ):    -- 变小写 s.toupperCase( ):   -- 变大写 s.substr( 2 , 8 ):     -- 截取     ...

  6. JS DOM操作(五) Window.docunment对象——操作元素

    定位: var a = document.getElementByIt( "id" ) 同辈元素 var b = a.nextSibling;            -- 找 a ...

  7. JS DOM操作(二) Window.docunment对象——操作样式

    一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class  用在客户端 name  用在服务端 用 id 定位                  -- ...

  8. JS DOM操作(一) 对页面的操作

    DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...

  9. js dom 操作技巧

    1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...

随机推荐

  1. PyQt5+requests实现车票查询工具

    PyQt5+requests实现一个车票查询工具,供大家参考,具体内容如下 结构图   效果图   思路 1.search(QPushButton)点击信号(clicked)连接到自定义的槽函数(ev ...

  2. VS2017 + Qt5 + OpenCV400 环境配置

    首先为VS2017 IDE点赞. 配置核心 配置 Qt5 和 OpenCV400,最主要的就是头文件路径.库路径以及库文件名字. 配置方法和步骤 新建一个工程,或者打开一个已有的工程: 选择 View ...

  3. 对Kaldi nnet3进行奇异值分解(SVD)以减小模型大小

    用处 基于SVD实现模型压缩以适配低功耗平台     根据nnet3bin/nnet3-copy,nnet3-copy或nnet3-am-copy的"--edits-config" ...

  4. Maven 引入外部包

    当需要从外部引入一个包(譬如说读写Excel 的POI  jar 包 ), 不需要手动地去官网下载一个包然后粘贴到相应的地方. 只需要把Java 工程 转为 Maven 工程 ( 在工程上右键 > ...

  5. [luoguP2827] 蚯蚓(堆?队列!)

    传送门 35分做法 用堆来取最大值,暴力更新其余数的值. 65~85分做法 还是用堆来取最大值,其余的数增加可以变成新切开的两个数减少,最后统一加上一个数. #include <queue> ...

  6. React Native学习(十)—— 生命周期

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...

  7. 介绍css 的3D 变换(3D transform)

    https://desandro.github.io/3dtransforms/docs/card-flip.html ---------------------------------------- ...

  8. Spring MVC的简单使用方法

    一.Multiaction Controller package cn.framelife.mvc.control; import org.springframework.stereotype.Con ...

  9. JS 获取form表单的所有数据

    在HTML中用js获取通过GET.POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值. 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为 ...

  10. protobuf入门

    ,step1:准备.proto文件 syntax = "proto3"; message gps_data { int64 id = 1; string terminalId = ...