<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li {
width: 100px;
height: 100px;
background-color: pink;
margin: 5px;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li id="box"></li>
<li></li>
<li></li>
</ul>
<script src="tools.js"></script>
<script>
//获取box改为red
var box = getEle("box");
box.style.backgroundColor = "red"
//获取第一个和最后一个子节点
var parent = box.parentNode;//定义一个父节点
getFirstNode(parent).style.backgroundColor = "yellow";
getLastNode(parent).style.backgroundColor = "yellow";
//获取上一个和下一个兄弟节点
getNextNode(box).style.backgroundColor = "blue";
getPrevNode(box).style.backgroundColor = "blue";
//指定兄弟节点
getEleOfIndex(box,0).style.backgroundColor = "green";
getEleOfIndex(box,1).style.backgroundColor = "green";
//获取所有的兄弟节点(返回值是数组,所以用for循环操作)
var arr = getAllSiblings(box);
for(var i=0;i<arr.length;i++){
arr[i].style.backgroundColor = "black";
}
// //父节点
// div.parentNode;
//
// //访问兄弟节点
// div.previousSibling;
// div.previousElementSibling;
// div.nextSibling;
// div.nextElementSibling;
//
// //访问单个子节点
// div.firstChild;
// div.firstElementChild;
// div.lastChild;
// div.lastElementChild;
//
//
// //获取所有子节点
// div.childNodes;
// div.children;
//
//
// //获取指定的兄弟节点
// div.parentNode.children[index];
//
// //获取所有的兄弟节点(返回值是一个数组)封装
// function fn(ele){
// //定义一个新数组,装所有的兄弟元素,将来返回
// var newArr = [];
// var arr = ele.parentNode.children;
// for(var i=0;i<arr.length;i++){
// //判断,如果不是传递过来的元素本身,那么添加到新数组中。
// if(arr[i]!==ele){
// newArr.push(arr[i]);
newArr[newArr.length] = arr[i];
// }
// }
// return newArr;
// }
//-----------------------toools封装源代码--------------------
/**
* Created by Lenovo on 2016/9/2.
*/
function getEle(id){
return document.getElementById(id);
}
/**
* 功能:给定元素查找他的第一个元素子节点,并返回
* @param ele
* @returns {Element|*|Node}
*/
function getFirstNode(ele){
var node = ele.firstElementChild || ele.firstChild;
return node;
}
/**
* 功能:给定元素查找他的最后一个元素子节点,并返回
* @param ele
* @returns {Element|*|Node}
*/
function getLastNode(ele){
return ele.lastElementChild || ele.lastChild;
}
/**
* 功能:给定元素查找他的下一个元素兄弟节点,并返回
* @param ele
* @returns {Element|*|Node}
*/
function getNextNode(ele){
return ele.nextElementSibling || ele.nextSibling;
}
/**
* 功能:给定元素查找他的上一个兄弟元素节点,并返回
* @param ele
* @returns {Element|*|Node}
*/
function getPrevNode(ele){
return ele.previousElementSibling || ele.previousSibling;
}
/**
* 功能:给定元素和索引值查找指定索引值的兄弟元素节点,并返回
* @param ele 元素节点
* @param index 索引值
* @returns {*|HTMLElement}
*/
function getEleOfIndex(ele,index){
return ele.parentNode.children[index];
}
/**
* 功能:给定元素查找他的所有兄弟元素,并返回数组
* @param ele
* @returns {Array}
*/
function getAllSiblings(ele){
//定义一个新数组,装所有的兄弟元素,将来返回
var newArr = [];
var arr = ele.parentNode.children;
for(var i=0;i<arr.length;i++){
//判断,如果不是传递过来的元素本身,那么添加到新数组中。
if(arr[i]!==ele){
newArr.push(arr[i]);
}
}
return newArr;
}
//--------------------------排他思想-------------------------------
// 干掉所有人 最后留下自己 this调用自己
//1.获取事件源
// var ul = getEle("list");
// var liArr = ul.children;
// //2.绑定事件
// for(var i=0;i<liArr.length;i++){
// var a = getFirstNode(liArr[i]);
// a.onclick = function () {
// //3.书写事件驱动程序
// //排他思想
// for(var j=0;j<liArr.length;j++){
// liArr[j].className = "";
// }
// this.parentNode.className = "current";
// }
// }
// }
</script>
</body>
</html>