JavaScript中如何通过一个元素去查找该元素的子元素节点
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript中如何通过一个元素去查找该元素的子元素节点相关的知识，希望对你有一定的参考价值。
<ul>
<li><a href="fireworks.jpg"><img src="fireworks.jpg" title="a fireworks display" /></a></li>
<li><a href="coffee.jpg"><img src="coffee.jpg" title="a cup of black coffee" /></a></li>
<li><a href="rose.jpg"><img src="rose.jpg" title="A red,red rose" /></a></li>
<li><a href="bigben.jpg"><img src="bigben.jpg" title="The famous clock" /></a></li>
</ul>
这是一段html代码，我们看到<li>中的<a>元素节点去查找一下个<img>元素节点，我查了好像只能通过childNodes数组属性去查找，但是找到的是该元素节点子节点的属性节点和文本节点，并不能找到下一个元素节点。而且通过parentNode属性可以查找元素节点。
哪位javascript和DOM高手解决我的问题啊，不要告诉我设置ID后通过getElementById来访问。谢谢啦！希望能和JavaScript的高手多交流交流啊！O(∩_∩)O~
<div></div>
<div></div>
</div>
<script>
function dom()
var s= document.getElementById("test");
var chils= s.childNodes; //得到s的全部子节点
var par=s.parentNode; //得到s的父节点
var ns=s.nextSbiling; //获得s的下一个兄弟节点
var ps=s.previousSbiling; //得到s的上一个兄弟节点
var fc=s.firstChild; //获得s的第一个子节点
var lc=s.lastChile; //获得s的最后一个子节点
</script> 参考技术A 不管你用什么方法，先定位到li或者a节点
然后用getElementsByTagName("IMG")[0]
这个就是你的img节点了 参考技术B function get_nextSibling(n)
y=n.nextSibling;
while (y.nodeType != 1)
y=y.nextSibling;
return y;
本回答被提问者采纳 参考技术C function get_nextSibling(n)
y=n.nextSibling;
while (y.nodeType != 1)
y=y.nextSibling;
return y;
参考技术D getElementsByTagName
返回一个数组
JavaScript中数组元素的线性搜索
线性搜索：将给定的数组元素一个接一个的与我们需要查找的元素进行比较。
示例：1、该示例通过prompt()函数实现用于输入需要查找的元素。
2、给定一组数组元素
3、将查询结果通过set_innerHTML()函数输出到指定页面标签内。
（注：set_innerHTML()函数弥补JavaScript的innerHTML属性，JavaScript的innerHTML属性不能进行网页交互时输出。即网页交互时使用innerHTML属性JavaScript程序无响应。）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="file:///E|/dreamweaver workspace/html/innerHTML/innerHTML.js"></script>
<title>数组元素的线性查找</title>
<script>
var numbles = new Array(1,2,3,4,5,6,7,8,9,45,15,41,78,261,35,10);
var index = 0;var flag = 0;
var input = prompt("请您输入想查找的数：","eg:25");
while(flag == 0 ){
if(input == numbles[index]){
flag = 1;
}else{
index= index+1;
if(index >= numbles.length){
flag = 2;
}else{;
};
};
};
/*使用innerHTML获得的js代码是不能被执行的，js只有在页面初次加载的时候才有效。JavaScript的innerHTML不能进行交互吗？*/
if(flag == 1){
//document.getElementById("result").innerHTML = ("您需要寻找的数：" + input + "已找到，且存在目标数组中的索引号为：" + index)
set_innerHTML("result",("您需要寻找的数：" + input + "已找到，且存在目标数组中的索引号为：" + index));
}else{
// document.getElementById("result").innerHTML = ("不好意思！您寻找的数：" + input + "不存在");
set_innerHTML("result",("不好意思！您寻找的数：" + input + "不存在"));
}
</script>
</head>
<body>
<p><span id="result"></span></p>
</body>
</html>
以上是关于JavaScript中如何通过一个元素去查找该元素的子元素节点的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Javascript“查找”由 Angular 组件提供的元素？
Selenium c#如何通过JavaScript查找元素？