JS DOM操作（五） Window.docunment对象——操作元素
对元素的操作
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对象——操作元素的更多相关文章
- JS DOM操作（二） Window.docunment对象——操作样式
一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class 用在客户端 name 用在服务端 用 id 定位 -- ...
- JS DOM操作（三） Window.docunment对象——操作属性
属性:是对象的性质与对象之间关系的统称.HTML中标签可以拥有属性,属性为 HTML 元素提供附加信. 属性总是以名称/值对的形式出现,比如:name="value". 属性值始终 ...
- JS DOM操作（四） Window.docunment对象——操作内容
操作内容:即对标签所夹内容的操作 一 非表单元素内容操作 定位 var a = document.ElementById( "id" ) 1.获取内容 var s = a.inne ...
- Excel VBA入门（五）Excel对象操作
本章是本系列教程的重点.但我觉得应该不是难点.从第零章开始到学完本章,应该可以把VBA用于实战中了. Excel对象主要有4个: 工作薄 Workbook 工作表 Worksheet 单元格区域 Ra ...
- PHP中的MySQLi扩展学习（五）MySQLI_STMT对象操作
就像 PDO 中的 PDO_Statment 对象一样,MySQLI_STMT 对象也是一个预处理语句所形成的对象,专门用来操作 MySQLi 所生成的预处理语句的.其实操作方式之类也都比较相似,不外 ...
- JavaScript的DOM操作。Window.document对象
间隔执行一段代码:window.setlnteval("需要执行的代码",间隔毫秒数) 例 : window.setlnteval("alert("你 ...
- JS中基本window.document对象操作以及常用事件！
一.找到元素 1.document.getELementById("id"):根据id找,最多找一个. var a=document.getELementById("id ...
- DOM操作（Window.document对象）
间隔与延迟: 间隔一段代码: window.setInterval("代码",间隔执行秒数) 延迟一段时间后执行一段代码: window.setTimeout("执行代码 ...
- DOM（五）事件对象
浏览器中的事件都是以对象的形式存在的,同样ie浏览器与标准dom浏览器之间存在获取事件对象上也存在差别.在ie浏览器中事件对象是windows对象的一个属性event,访问通常采用如下方法. oP.o ...
随机推荐
- C#: 以管理员权限运行包含有cd命令的.bat文件
最近在做项目的时候遇到一种情:用C#程序以管理员权限去执行一个bat文件,且此bat文件里面有cd命令来进入文件的下一级目录,比如: echo test begin cd test1 setup1.e ...
- 【CF600E】 Lomsat gelral
CF600E Lomsat gelral Solution 考虑一下子树的问题,我们可以把一棵树的dfn序搞出来,那么子树就是序列上的一段连续的区间. 然后就可以莫队飞速求解了. 但是这题还有\(\T ...
- Git安装学习记录
1.下载: https://gitforwindows.org/ 2.安装:https://blog.csdn.net/chengyuqiang/article/details/54178683 3. ...
- Python基础 --函数的参数
定义函数的时候,我们把参数的名字和位置确定下来,函数的接口定义就完成了.对于函数的调用者来说,只需要知道如何传递正确的参数,以及函数将返回什么样的值就够了,函数内部的复杂逻辑被封装起来,调用者无需了解 ...
- mysql基础知识（3）
十六.组合查询 使用 union 来组合查询,如果第一个查询返回M行,第二个查询返回N行,那么组合查询的结果一般为 M+N 行. 注意:每个查询必须包含相同的行.表达式的聚集函数:默认会去除相同行.表 ...
- HTTP笔记（二）
HTTP首部 不管是请求报文还是响应报文,都会包含首部信息.HTTP首部都是由字段名和字段值构成的,中间由英文冒号:隔开.一个首部字段名可以对应多个字段值. 四种首部字段的类型: 通用首部字段:请求报 ...
- 目标检测技术演进：R-CNN、Fast R-CNN、Faster R-CNN
看到一篇循序渐进讲R-CNN.Fast R-CNN.Faster R-CNN演进的博文,写得非常好,摘入于此,方便查找和阅读. object detection,就是在给定的图片中精确找到物体所在位置 ...
- 玩转mongodb（七）：索引，速度的引领（全文索引、地理空间索引）
本篇博文主要介绍MongoDB中一些常用的特殊索引类型,主要包括: 用于简单字符串搜索的全文本索引: 用于球体空间(2dsphere)和二维平面(2d)的地理空间索引. 一.全文索引 MongoDB有 ...
- TDSQL“相似查询工具MSQL+”入选VLDB论文
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云数据库 TencentDB发表于云+社区专栏 作者介绍:王晓宇,腾讯数据库TDSQL团队成员,目前参与TDSQL数据库内核研发工 ...
- Python中bisect的使用
在<Think Python>中第十章的练习中,涉及到了分半查找的bisect模块.为此,在网上查阅了Python中bisect模块的相关内容.有几个链接相对权威和明白: 1> ht ...