对元素的操作

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. Linux安全之SYN攻击原理及其应对措施

    TCP自从1974年被发明出来之后,历经30多年发展,目前成为最重要的互联网基础协议,但TCP协议中也存在一些缺陷. SYN攻击就是利用TCP协议的缺陷,来导致系统服务停止正常的响应. SYN攻击原理 ...

  2. .net core 与ELK（2）安装Elasticsearch可视化工具

    elasticsearch-head是els的界面插件,地址https://github.com/mobz/elasticsearch-head 1.进入github并下载 wget https:// ...

  3. Ef-Code-First 使用实体类映射出数据库

    最近面试时很多面试官都问到了EF框架 好记性不如烂笔头 赶紧记下来 code-first是EF框架中的一种,是使用实体类来进行数据库表的映射,所以实体类中的字段要规范(我认为) 比如: 如果有外键的话 ...

  4. 【转】PowerDesigner快捷键

    一般快捷键 快捷键 说明 F4 打开检查模型窗口,检查模型 F5 如果图窗口内的图改变过大小,恢复为原有大小即正常大小 F6 放大图窗口内的图 F7 缩小图窗口内的图 F8 在图窗口内中查看全部图内容 ...

  5. [学习笔记]min_25筛

    神佬yyb 神佬zsy 想不到花了两个小时的时间看 \(min\_25\) 筛就看懂了 实际去追了一下魔禁3 我们先举个例子.如求 \[\sum_{i=1}^{n}f(i)\] 其中 \(f(i)\) ...

  6. atomic write pipe

    阅读 skynet 代码 socket_server 部分,发现对 socket 的写操作流程是这样的: 1. 各个服务(各线程)将数据写到 sendctrl_fd,这是一个 pipe 的 写端 2. ...

  7. 转---30 分钟学会 Flex 布局

    正文从这开始- Flex 基本概念: 在 flex 容器中默认存在两条轴,水平主轴(main axis) 和垂直的交叉轴(cross axis),这是默认的设置,当然你可以通过修改使垂直方向变为主轴, ...

  8. css 的 conic-gradient 学习

    偶然间在微信公众号奇舞周刊上看到了这篇文章<CSS Painting API>,算是对 conic-gradient的初次见面. 后来有空的时候,百度搜了一下,看了这篇文章<CSS神 ...

  9. 设计模式《JAVA与模式》之责任链模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述责任链(Chain of Responsibility)模式的: 责任链模式是一种对象的行为模式.在责任链模式里,很多对象由每一个对象对其 ...

  10. Data - Hadoop伪分布式配置 - 使用Hadoop2.8.0和Ubuntu16.04

    系统版本 anliven@Ubuntu1604:~$ uname -a Linux Ubuntu1604 4.8.0-36-generic #36~16.04.1-Ubuntu SMP Sun Feb ...