对元素的操作

1、定位 

var a = document.getElementByIt( "id" )

2、同辈元素 

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

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

<html >

<head>

    <title></title>

   <style type ="text/css">

        .div1{

            width:100px;

            height:100px;

            background-color:red;

            margin-right:10px;

            font-size:35px;

            color:white;

            float:left ;

        }

    </style>

</head>

<body>

 <div class="div1"></div><div class="div1" id="div2"></div><div class="div1"></div>

</body>

</html>

<script type="text/javascript" >

    var odiv2 = document.getElementById("div2");

    odiv2.onclick = function () {

        alert(odiv2.previousSibling.innerText);

    }

</script>

中间隔一个取上一个

　　odiv2.previousSibling.previousSibling.innerText

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

<html >

<head>

    <title></title>

    <style type="text/css">

        .div1 {

            width: 100px;

            height: 100px;

            background-color: red;

            margin-right: 10px;

            font-size: 35px;

            color: white;

            float: left;

        }

    </style>

</head>

<body>

    <div class="div1"></div>

    <div class="div1" id="div2"></div>

    <div class="div1"></div>

    <div class="div1"></div>

</body>

</html>

<script type="text/javascript">

    var odiv2 = document.getElementById("div2");

    odiv2.onclick = function () {

        alert(odiv2.nextSibling.nextSibling.nextSibling.nextSibling.innerText);

    }

</script>

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

<html >

<head>

        <title></title>

    <style type="text/css">

        .div1 {

            width: 100px;

            height: 30px;

            border: 2px solid black;

            margin-top: 2px;

            background-color: blue;

            text-align: center;

            line-height: 30px;

        }

        .div2 {

            width: 100px;

            height: 150px;

            border: 2px solid black;

            display: none;           // 隐藏菜单不留位置

        }

    </style>

</head>

<body>

    <div class="div1">好友</div>

    <div class="div2"></div>

    <div class="div1">家人</div>

    <div class="div2"></div>

    <div class="div1">同学</div>

    <div class="div2"></div>

    <div class="div1">二货</div>

    <div class="div2"></div>

    <div class="div1">陌生人</div>

    <div class="div2"></div>

</body>

</html>

<script type="text/javascript">

    var odiv1 = document.getElementsByClassName("div1");

    for (var i = ; i < odiv1.length; i++) {

        odiv1[i].onclick = function () {

                                                               //关上下拉菜单

            if (this.nextSibling.nextSibling.style.display != "none") {

                this.nextSibling.nextSibling.style.display = "none";

            }

            else {

                for (var j = ; j < odiv1.length; j++) {       //一次只能打开一个下拉菜单

                    odiv1[j].nextSibling.nextSibling.style.display = "none"

                }

                this.nextSibling.nextSibling.style.display = "block"

            }                                                  //打开下拉菜单

        }

    }

</script>

效果图

3、父级 、子集元素

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

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

var b = a.childNodes;                  //第一个子元素

var b = a.lastChild;                   //最后一个

var b = a.childNodes[ n ]              //找第n个子元素



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

 4、创建添加元素

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

var  obj  =  document.createElement( "div" )

a.appendChild( obj )      //向 a 中添加一个元素，添加在末尾

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. ElectronNetTest

    系统环境:Ubuntu 18.04.2 Desktop 软件环境:asp.net core 2.2,Node.js(version>8.6) Github上有人说不支持 asp.net core ...

  2. 背水一战 Windows 10 (62) - 控件（媒体类）: InkCanvas 保存和加载, 手写识别

    [源码下载] 背水一战 Windows 10 (62) - 控件(媒体类): InkCanvas 保存和加载, 手写识别 作者:webabcd 介绍背水一战 Windows 10 之 控件(媒体类) ...

  3. MariaDB 单表查询与聚合(5)

    MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可MariaDB的目的是完全兼容MySQL,包括API和命令行,MySQL由于现在闭源了,而能轻松成为MySQ ...

  4. Shell - 简明Shell入门10 - 管道（Pipe）

    示例脚本及注释 #!/bin/bash echo '##### Number of *.conf : ' find /etc -name *.conf | grep system | wc -l ec ...

  5. python3 调用 salt-api

    使用python3调用 salt-api 在项目中我们不能使用命令行的模式去调用salt-api,所以我们可以写一个基于salt-api的类,方便项目代码的调用.在这里特别附上两种方式实现的pytho ...

  6. SQLYog执行SQL脚本提示：错误代码： 1067 - Invalid default value for '数据库表'查询：解决办法

    强烈建议:完全卸载当前版本MySQL,重新安装5.6及以上版本 完全卸载方法:https://jingyan.baidu.com/article/3d69c551611290f0ce02d77b.ht ...

  7. Unity项目接入应用宝SDK实现截图功能

    Unity项目接入应用宝SDK实现截图功能 问题由来 点击应用宝悬浮窗 如图所示 左下角有一个截图按钮 需要解决那些问题 截图信息需要由游戏引擎提供 SDK获取截图信息为同步 但是Unity引擎没有提 ...

  8. WebDriver高级应用实例（4）

    4.1操作web页面的滚动条 被测网页的网址: http://v.sogou.com Java语言版本的API实例代码 import org.testng.annotations.Test; impo ...

  9. MapReduce中的partitioner

    1.日志源文件: 1363157985066 13726230503 00-FD-07-A4-72-B8:CMCC 120.196.100.82 i02.c.aliimg.com 24 27 2481 ...

  10. Intellij IDEA 环境配置与使用

    Intellij IDEA 是我感觉最牛X的IDE开发工具,没有之一! 先share一篇教程: http://pan.baidu.com/s/1i3fzJff 调整字体 设置默认的JDK 显示行号 版 ...