对元素的操作

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. Spring Cloud实践之服务注册与发现Eureka

    一.简述: 服务提供者producer与服务消费者consumer都注册到eureka server,然后服务consumer在其应用内直接调用producer的服务名来调用服务,而不是像之前一样调用 ...

  2. Asp.net管线事件(页面请求周期)

    在处理该请求时将由 HttpApplication 类执行以下事件. 希望扩展 HttpApplication 类的开发人员尤其需要注意这些事件. . 对请求进行验证,将检查浏览器发送的信息,并确定其 ...

  3. D3.js (v3)+react框架 基础部分之认识选择集和如何绘制一个矢量图

    首先需要下载安装d3.js  :  yarn add d3 然后在组建中引入 :  import * as d3 from 'd3' 然后定义一个方法,在componentDidMount()这个钩子 ...

  4. Django中安装搜索引擎方法。

    全文检索 全文检索不同于特定字段的模糊查询,使用全文检索的效率更高,并且能够对于中文进行分词处理. haystack:全文检索的框架,支持whoosh.solr.Xapian.Elasticsearc ...

  5. Django设置联合唯一约束 -- migrate时报错处理

    异常信息: a unique database constraint for 2 or more fields together 场景描述: 对于ORM中多对多关系的中间表,如果该关系表是手动创建的, ...

  6. 使用.NetCore在Linux上写TCP listen 重启后无法绑定地址

    拥抱.net core的过程中, 将公司的一套java项目改成了.net core 2.0版的. 里面的tcp服务被我用msdn的SocketAsyncEventArgs方式重写了, 然而在测试的过程 ...

  7. 九浅一深ThreadLocal

    ThreadLocal的作用.使用示例 ThreadLocal是线程的本地存储,存储在其内的值只能被当前线程访问到,其他线程获取不到,可以存储任意对象.经常用来存储当前线程的一些上下文信息,这样不用通 ...

  8. PHP：判断客户端是否使用代理服务器及其匿名级别

    要判断客户端是否使用代理服务器,可以从客户端所发送的环境变量信息来判断. 具体来说,就是看HTTP_VIA字段,如果这个字段设置了,说明客户端使用了代理服务器. 匿名级别可以参考下表来判断. 给出一个 ...

  9. C# 多线程八之并行Linq(ParallelEnumerable)

    1.简介 关于并行Linq,Ms官方叫做并行语言集成(PLINQ)查询,其实本质就是Linq的多线程版本,常规的Linq是单线程的,也就是同步的过程处理完所有的查询.如果你的Linq查询足够简单,而且 ...

  10. JS 中 if / if...else...替换方式

    说说烂大街的if/if...else...,程序中用得最多的流程判断语句. 对着曾经满屏的if/if...else...,心想能不能搞点事情,折腾点浪花浪里呀浪. 对顶着"这个需求很简单,怎 ...