对元素的操作

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. 受邀与微软售前技术团队参与TFS技术沟通会议

    微软正式发布Azure DevOps Server 2019的第一个版本,作为Team Foundation Server (TFS)2018的升级版本和替代产品. 作为开发运维一体化平台的主打产品, ...

  2. 【DirectX】 AudioVideoPlayback 中的事件BUG

    当访问 Video 中的 Audio 属性时,会造成 Video 的所有事件失效.经过反汇查看源码,原来在访问Audio属性时,Audio会通过当前Video对象创建一个新实例.而这个新实例会覆盖掉当 ...

  3. 去除DataTable指定列的重复行

    DataTable dt = ds.Tables[]; //获得 datatable DataView dv = new DataView(dt); DataTable dt2 = dv.ToTabl ...

  4. AngularJs创建自定义Service

    AngularJs可以创建自定义的service.下面的自定义service实现一个double倍数的服务: 参考下面语法: app.service('double', function () { t ...

  5. 【转】 js数组 Array 交集 并集 差集 去重

    原文:http://blog.csdn.net/ma_jiang/article/details/52672762 最劲项目需要用到js数组去重和交集的一些运算,我的数组元素个数可能到达1000以上, ...

  6. jzoj4512

    01分數規畫 我們可以二分一個ans,然後化一下式子 一個總共有k個人的方案,要使(a[1]+a[2]+....+a[k])/(b[1]+b[2]+....+b[k])>=ans(a[1]+a[ ...

  7. Swift5 语言参考(一) 关于语言参考

    本系列文章的这一部分描述了Swift编程语言的形式语法.此处描述的语法旨在帮助您更详细地理解语言,而不是允许您直接实现解析器或编译器. Swift语言相对较小,因为Swift代码中几乎无处不在的许多常 ...

  8. postgresql-tps

    tps TPS就是每秒事务数,但是事务是基于虚拟用户数的,假如1个虚拟用户在1秒内完成1笔事务,那么TPS明显就是1:如果 某笔业务响应时间是1ms,那么1个用户在1秒内能完成1000笔事务,TPS就 ...

  9. [Leetcode]下一个更大元素II

    题目 给定一个循环数组(最后一个元素的下一个元素是数组的第一个元素),输出每个元素的下一个更大元素.数字 x 的下一个更大的元素是按数组遍历顺序,这个数字之后的第一个比它更大的数,这意味着你应该循环地 ...

  10. C#编程任务: 把工作交给别人并等待其执行完成

    生活中有这样的场景: 我有一件事情需要别人帮忙去办, 但是别人也很忙呀, 所以我只能把任务记载他的任务清单上, 等他一个个扫下来扫到我的并且完成之后再来告诉我. 这其实是一个多线程的问题. 我是线程A ...