对元素的操作

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. 敏捷Scrum框架最全总结！ [转载]

    [原文链接] 2016-05-03 Sting 敏捷开发作为目前流行的开发方法,为快速迭代提供了足够的理论支持,但敏捷开发方式不应该成为忽略文档和需求分析的过程,注意每个sprint的引入,任务燃烧, ...

  2. KNIME + Python = 数据分析+报表全流程

    Python 数据分析环境 数据分析领域有很多可选方案,例如SPSS傻瓜式分析工具,SAS专业性商业分析工具,R和python这类需要代码编程类的工具.个人选择是python这类,包括pandas,n ...

  3. WPF 网易云音乐PC端

    简介 (1)左侧菜单采用 Expander+RadioButton: MVVM 绑定 后台的一个Menu 属性(使用转换器) (2)右侧采用Frame绑定Page的方式 ## [更新日志] ### 1 ...

  4. 拖拽TreeViewItem到OCX控件

    由于C#在性能方面,和C++还是有不少的差距,所以在项目中有一块是用C++的OCX控件实现,然后包括在WPF项目中.由于C++,C#属于不同的体系架构,造成了许多问题,特使是拖拽TreeViewIte ...

  5. WPF自定义控件开发实例 - ColorPicker

    开发环境:Win10 + VS2017 + .Net4.5 这个 ColorPicker 是<<WPF编程宝典:使用C#2012和.NET4.5>>这本书中的例子.这里我记录一 ...

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

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

  7. 【BZOJ5306】 [Haoi2018]染色

    BZOJ5306 [Haoi2018]染色 Solution xzz的博客 代码实现 #include<stdio.h> #include<stdlib.h> #include ...

  8. Linux 安装JavaEE环境之Tomcat安装笔记

    1.先用xftp将tomcat的压缩包上传到 /opt/ 2.在/usr/local/下使用命令mkdir tomcat 创建tomcat目录 将apache-tomcat-7.0.70.tar.gz ...

  9. web安全之XSS注入

    之前在做项目的时候有遇到一些安全问题,XSS注入就是其中之一 那么,什么是XSS注入呢? XSS又叫CSS (Cross Site Script) ,跨站脚本攻击.它指的是恶意攻击者往Web页面里插入 ...

  10. postgresql-hdd,ssd,效率

    既有ssd又有hdd是将数据存储到ssd还是将索引存储到ssd的效率更高呢? 一种说法是索引是随机扫描,将索引放入ssd效率会增高, 一种说法是将数据放入ssd效率更高   最好的情况是将数据和索引都 ...