对元素的操作

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. Mac下替代Total Commander的工具推荐

    [推荐]:Nimble Commander 轻量小巧,免费版与收费版区别不大,比较稳定,支持sftp等其他网络存储,支持自定义热键,预览等. http://magnumbytes.com/ [其他]: ...

  2. ASP.NET MVC 使用 Log4net 记录日志

    Log4net 介绍 Log4net 是 Apache 下一个开放源码的项目,它是Log4j 的一个克隆版.我们可以控制日志信息的输出目的地.Log4net中定义了多种日志信息输出模式.它可以根据需要 ...

  3. 微服务统一登陆认证怎么做?JWT ?

    无状态登录原理 1.1.什么是有状态? 有状态服务,即服务端需要记录每次会话的客户端信息,从而识别客户端身份,根据用户身份进行请求的处理,典型的设计如tomcat中的session. 例如登录:用户登 ...

  4. 关于Maven整合SSM项目中报错Invalid bound statement (not found):的问题解决

    如图:控制不报错 页面就是报500的错误 查阅了好多资料  都说是Mapper文件写的不对  我仔细找了好几遍也解决不了问题.. 解决: 坑爹的问题害我找了一上午原因,原来是需要在pom.xml文件中 ...

  5. java批量解压文件夹下的所有压缩文件(.rar、.zip、.gz、.tar.gz)

    // java批量解压文件夹下的所有压缩文件(.rar..zip..gz..tar.gz) 新建工具类: package com.mobile.utils; import com.github.jun ...

  6. df换行问题解决

    df换行问题解决 df是linux下用来查磁盘空间的命令,而在使用了LVM分区或网络挂载的情况下,再用df取分区的使用率时,发现有些分区显示换行了,这样会导致通过脚本取的数据不对. [root@ ]# ...

  7. idea安装破解永久有效

    首先先在下面地址下载好idea安装包 链接:https://pan.baidu.com/s/1gVl3WAjC_H6jrH2cjK1paw提取码:i2t5 再下载好破解所需的jar包 链接:https ...

  8. Android 9 新功能 及 API 介绍(提供了实用的模块化的功能支持,包括 人工智能)

      Android 9(API 级别 28)为用户和开发者引入了众多新特性和新功能. 本文重点介绍面向开发者的新功能. 要了解新 API,请阅读 API 差异报告或访问 Android API 参考. ...

  9. 课程一(Neural Networks and Deep Learning),第三周(Shallow neural networks)—— 3.Programming Assignment : Planar data classification with a hidden layer

    Planar data classification with a hidden layer Welcome to the second programming exercise of the dee ...

  10. (转)详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数

    原文:https://www.jb51.net/article/138363.htm hasattr()函数 hasattr()函数用于判断是否包含对应的属性 语法: hasattr(object,n ...