对元素的操作

1、定位 

var a = document.getElementByIt( "id" )

2、同辈元素 

　　var b = a.nextSibling;            // 找 a 的下一个同辈元素，

　　var b = a.previousSibling;    // 找 a 的上一个同辈元素，

  1. <html >
  2. <head>
  3.     <title></title>
  4.    <style type ="text/css">
  5.         .div1{
  6.             width:100px;
  7.             height:100px;
  8.             background-color:red;
  9.             margin-right:10px;
  10.             font-size:35px;
  11.             color:white;
  12.             float:left ;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.  <div class="div1"></div><div class="div1" id="div2"></div><div class="div1"></div>
  18. </body>
  19. </html>
  20. <script type="text/javascript" >
  21.     var odiv2 = document.getElementById("div2");
  22.     odiv2.onclick = function () {
  23.         alert(odiv2.previousSibling.innerText);
  24.     }
  25. </script>

中间隔一个取上一个

　　odiv2.previousSibling.previousSibling.innerText

　　空格和换行也算一个元素，不管多少空格都算一个，不管多少换行都算一个

  1. <html >
  2. <head>
  3.     <title></title>
  4.     <style type="text/css">
  5.         .div1 {
  6.             width: 100px;
  7.             height: 100px;
  8.             background-color: red;
  9.             margin-right: 10px;
  10.             font-size: 35px;
  11.             color: white;
  12.             float: left;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div class="div1"></div>
  18.     <div class="div1" id="div2"></div>
  19.     <div class="div1"></div>
  20.     <div class="div1"></div>
  21. </body>
  22. </html>
  23. <script type="text/javascript">
  24.     var odiv2 = document.getElementById("div2");
  25.     odiv2.onclick = function () {
  26.         alert(odiv2.nextSibling.nextSibling.nextSibling.nextSibling.innerText);
  27.     }
  28. </script>

制作一个下拉菜单（仿qq）

  1. <html >
  2. <head>
  3.         <title></title>
  4.     <style type="text/css">
  5.         .div1 {
  6.             width: 100px;
  7.             height: 30px;
  8.             border: 2px solid black;
  9.             margin-top: 2px;
  10.             background-color: blue;
  11.             text-align: center;
  12.             line-height: 30px;
  13.         }
  14.         .div2 {
  15.             width: 100px;
  16.             height: 150px;
  17.             border: 2px solid black;
  18.             display: none;           // 隐藏菜单不留位置
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="div1">好友</div>
  24.     <div class="div2"></div>
  25.     <div class="div1">家人</div>
  26.     <div class="div2"></div>
  27.     <div class="div1">同学</div>
  28.     <div class="div2"></div>
  29.     <div class="div1">二货</div>
  30.     <div class="div2"></div>
  31.     <div class="div1">陌生人</div>
  32.     <div class="div2"></div>
  33. </body>
  34. </html>
  35. <script type="text/javascript">
  36.     var odiv1 = document.getElementsByClassName("div1");
  37.     for (var i = ; i < odiv1.length; i++) {
  38.         odiv1[i].onclick = function () {
  39.                                                                //关上下拉菜单
  40.             if (this.nextSibling.nextSibling.style.display != "none") {
  41.                 this.nextSibling.nextSibling.style.display = "none";
  42.             }
  43.             else {
  44.                 for (var j = ; j < odiv1.length; j++) {       //一次只能打开一个下拉菜单
  45.                     odiv1[j].nextSibling.nextSibling.style.display = "none"
  46.                 }
  47.                 this.nextSibling.nextSibling.style.display = "block"
  48.             }                                                  //打开下拉菜单
  49.         }
  50.     }
  51. </script>

效果图

3、父级 、子集元素

　　var b = a.parentNodes;     // 找 a 的上一级父级元素

　　var b = a.childNodes;        // 找出 a 的下一级子元素， 是一个数组

  1. var b = a.childNodes;                  //第一个子元素
  2.  
  3. var b = a.lastChild;                   //最后一个
  4.  
  5. var b = a.childNodes[ n ]              //找第n个子元素

  7. alert( nodes)[ i ] instanceof Text );  //判断是不是文本，是 true  不是 flase。

 4、创建添加元素

var  obj  =  document.createElement( "标签名" )    //  动态创建一个 Dom对象，创建一个元素。

  1. var  obj  =  document.createElement( "div" )
  2.  
  3. a.appendChild( obj )      //向 a 中添加一个元素，添加在末尾
  4.  
  5. a.removeChild( obj )      //删除一个子元素。

JS DOM操作（五） Window.docunment对象——操作元素的更多相关文章

  1. JS DOM操作（二） Window.docunment对象——操作样式

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

  2. JS DOM操作（三） Window.docunment对象——操作属性

    属性:是对象的性质与对象之间关系的统称.HTML中标签可以拥有属性,属性为 HTML 元素提供附加信. 属性总是以名称/值对的形式出现,比如:name="value". 属性值始终 ...

  3. JS DOM操作（四） Window.docunment对象——操作内容

    操作内容:即对标签所夹内容的操作 一 非表单元素内容操作 定位 var a = document.ElementById( "id" ) 1.获取内容 var s = a.inne ...

  4. Excel VBA入门（五）Excel对象操作

    本章是本系列教程的重点.但我觉得应该不是难点.从第零章开始到学完本章,应该可以把VBA用于实战中了. Excel对象主要有4个: 工作薄 Workbook 工作表 Worksheet 单元格区域 Ra ...

  5. PHP中的MySQLi扩展学习（五）MySQLI_STMT对象操作

    就像 PDO 中的 PDO_Statment 对象一样,MySQLI_STMT 对象也是一个预处理语句所形成的对象,专门用来操作 MySQLi 所生成的预处理语句的.其实操作方式之类也都比较相似,不外 ...

  6. JavaScript的DOM操作。Window.document对象

    间隔执行一段代码:window.setlnteval("需要执行的代码",间隔毫秒数) 例 :      window.setlnteval("alert("你 ...

  7. JS中基本window.document对象操作以及常用事件！

    一.找到元素 1.document.getELementById("id"):根据id找,最多找一个. var a=document.getELementById("id ...

  8. DOM操作（Window.document对象）

    间隔与延迟: 间隔一段代码: window.setInterval("代码",间隔执行秒数) 延迟一段时间后执行一段代码: window.setTimeout("执行代码 ...

  9. DOM（五）事件对象

    浏览器中的事件都是以对象的形式存在的,同样ie浏览器与标准dom浏览器之间存在获取事件对象上也存在差别.在ie浏览器中事件对象是windows对象的一个属性event,访问通常采用如下方法. oP.o ...

随机推荐

  1. UWP Background过渡动画

    首先说两件事: 1.大爆炸我还记着呢,先欠着吧... 2.博客搬家啦,新地址:https://blog.ultrabluefire.cn/ ==========下面是正文========== 前些日子 ...

  2. NTLM移除

  3. ubuntu14.04 下出现 libmysqlclient.so.20 找不到问题

    解决办法: apt-get install libzdb-dev

  4. django 中 Oauth2 实现第三方登陆

    django 中 Oauth2 实现第三方登陆 python网站第三方登录,social-auth-app-django模块, social-auth-app-django模块是专门用于Django的 ...

  5. Docker Compose模板文件介绍

    模板文件是使用 Compose 的核心,涉及到的指令关键字也比较多,这里面大部分指令跟 docker run 相关参数的含义都是类似的.默认的模板文件名称为 docker-compose.yml ,格 ...

  6. flask框架~简易编写

    flaks框架: 先导报 from flask import Flask 重定向模块:redirect url_for是简易寻址跳转 jsonify强转为json格式 建立flask对象:app = ...

  7. Python--CSV模块

    CSV csv文件格式是一种通用的电子表格和数据库导入导出格式 简介 Python csv模块封装了常用的功能,使用的简单例子如下: 写入 # 写入csv文件 import csv csvfile = ...

  8. odoo开发笔记 -- 多个视图共用一个模型

    除了写序列优先绑定之外, 窗口引用的视图id也要绑定,否则页面加载的时候,可能不是自己需要显示的视图.例如:<field name="view_id" ref="c ...

  9. ubuntu升级pip后， ImportError: cannot import name ‘main‘

    场景描述: 原先pip安装完成之后,一直没有更新版本,原pip版本为8.1.1,今天安装python 包pysftp的时候,提示需要升级pip到(pip 10.0.1); 于是乎,直接手到擒来,终端命 ...

  10. odoo开发环境搭建(三）：安装odoo依赖的python包

    odoo开发环境搭建(三):安装odoo依赖的python包 http://www.cnblogs.com/jlzhou/p/5940815.html