title: 05-DOM操作练习:访问关系的封装
publish: true
访问关系的函数封装
(1)函数封装
新建一个文件名叫tools.js
,然后在里面封装访问关系。代码如下。
tools.js:
function getEle(id){ return document.getElementById(id); }
function getFirstNode(ele){ var node = ele.firstElementChild || ele.firstChild; return node; }
function getLastNode(ele){ return ele.lastElementChild || ele.lastChild; }
function getNextNode(ele){ return ele.nextElementSibling || ele.nextSibling; }
function getPrevNode(ele){ return ele.previousElementSibling || ele.previousSibling; }
function getEleOfIndex(ele,index){ return ele.parentNode.children[index]; }
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; }
|
上方代码中,我们单独来重视一下最后一个方法:获取指定元素的兄弟元素:
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; }
|
(2)函数的调用举例:
<!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>
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";
var arr = getAllSiblings(box); for(var i=0;i<arr.length;i++){ arr[i].style.backgroundColor = "green"; }
</script> </body> </html>
|
注意:上方代码中,我们引用到了tools.js
这个工具类。