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>
时间: 2024-08-29 09:47:37

js DOM操作练习的相关文章

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

创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic

Js DOM 操作

HTML DOM对标签属性的操作 1.获取属性值 对象.getAttribute("属性名") 对象.属性名 2.设置属性 对象.setAttribute("属性名","属性值") 对象.属性名 = "属性值" 3.删除属性 对象.remove("属性名") 对象.属性 = "" ? 以上操作不包含对class的操作 如果要对class进行操作 那么class需要写成className

js——DOM操作(一)

DOM:Document Object Model  文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义  为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树,同时定义了很多方法来操作这颗树中的每一个元素(节点) DOM节点 如: getElementById getElementByTagName document document.body ... //*************************************** childNode

JS DOM操作

DOM --文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM. DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言.. Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等, Dom技术使得页面的交互性大大地增强. var  v  =  document.getEl

JS——DOM操作(childNodes、nodeType和children区别与用法)

DOM中节点的类型 DOM中一共有12中类型.但是我们常用的只有几种. 首先我们了解下DOM中一般常见的节点类型有哪些? 1.元素节点 DOM中的原子都是元素节点,比如<body><table><div>等等. 如果把Web上的文档比作一座大厦,则元素就是构成这块大厦的砖石.一个文档是由N个元素组成的.元素可包含其他元素. 2.文本节点 任意的文字.空格.换行.空白行都算是文本节点. 3.属性节点 属性节点,故名思议就是其他节点的属性.例如所有的元素都有title属性,

JS——DOM操作(操纵元素属性【getAttribute、setAttribute...】)

常见元素操作: (1):oDiv.style.display='block'; (2):oDiv.style['display']='block'; (3):DOM方式 [看下面列举↓↓↓↓] DOM方式操作元素属性 1>获取:getAttribute(' 名称 ') 2>设置:setAttribute(' 名称 ',' 值 ') 3>删除:removeAttribute(' 名称 ') 详细看如下代码: 1 <!DOCTYPE html> 2 <html lang=&

JS DOM操作(二) Window.docunment对象——操作属性

属性:是对象的性质与对象之间关系的统称.HTML中标签可以拥有属性,属性为 HTML 元素提供附加信. 属性总是以名称/值对的形式出现,比如:name="value". 属性值始终被包括在引号内.双引号是最常用的,在某些个别的情况下,比如属性值本身就含有双引号,必须使用单引号, 属性总是在 HTML 元素的开始标签中规定. 属性实例 HTML 链接由 <a> 标签定义.链接的地址在 href 属性中指定: < a href="http://www.baidu

JS DOM操作(二) Window.docunment 对象操作

一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class  用在客户端 name  用在服务端 用 id 定位                  --  根据 id 最多只能找一个       var  a  =  document.getElementById( "id 名" )                                             -- 将找到的变了放到变量 a 中 用 class 定位      

js dom操作获取节点的一些方法

在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码: 1 //js获取下一个兄弟节点 2 function getNextSibling(eleObj){ 3 var next = eleObj.nextSibling; 4 if(next.nodeType == 3){ // 文本节点 5 return next.nextSibling; 6 } 7 return next; 8 } 9 //js获取上一个兄弟节点 10 function getPrevio