Node
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id="start">
<ul>
<li><a href="./532">html</a></li>
<li><a href="./533">css</a></li>
<li><a href="./534">JavaScript</a>
<ul>
<li><a href="./535">JavaScript Core</a></li>
<li><a href="./536">DOM</a></li>
<li><a href="./537">BOM</a></li>
</ul>
</li>
</ul>
<script>
function traverse(target, callback){
if(target.nodeType === 1){
//if(target.nodeName === 'A')
callback(target);
var c = target.childNodes;
for(var i=0; i<c.length; i++){
traverse(c[i], callback);
}
}
}
traverse(document.getElementById('start'), function(elem){
console.log(elem);
});
</script>
</body>
</html>
콘솔에서 이렇게 치면 테그가 a 것만 블루로 바꾼다
traverse(document.getElementById('start'), function(elem){
if (elem.nodeName === 'A'){
elem.style.color = 'blue';}
});
<!DOCTYPE html>
<html>
<body id="start">
<ul>
<li><a href="./532">html</a></li>
<li><a href="./533">css</a></li>
<li><a href="./534">JavaScript</a>
<ul>
<li><a href="./535">JavaScript Core</a></li>
<li><a href="./536">DOM</a></li>
<li><a href="./537">BOM</a></li>
</ul>
</li>
</ul>
<script>
function traverse(target, callback){
if(target.nodeType === 1){
//if(target.nodeName === 'A')
callback(target);
var c = target.childNodes;
for(var i=0; i<c.length; i++){
traverse(c[i], callback);
}
}
}
traverse(document.getElementById('start'), function(elem){
console.log(elem);
});
</script>
</body>
</html>제귀함수로 다불러오기
'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글
| 16.JavaScript NodeText (0) | 2020.04.17 |
|---|---|
| 15.JavaScript Node API (0) | 2020.04.16 |
| 13.JavaScript jQuery 조회범위 (0) | 2020.04.16 |
| 12.JavaScript API (0) | 2020.04.16 |
| 11.JavaScript Collection (0) | 2020.04.14 |
Or71nH