[英]how to get value of h2 tag for a div inside other div with id using javascript
I have a div with id, which has some other div's without id. 我有一个带有id的div,其中有一些没有id的div。
Some thing like: 就像是:
<div class="mainDivClass" id="mainDiv">
<div class="subDivClass">
<h2>one</h2>
Hello One!!
</div>
<div class="subDivClass">
<h2>two</h2>
Hello Two!!
</div>
<div class="subDivClass">
<h2>three</h2>
Hello Three!!
</div>
</div>
In my javascript, I am looping through above div like: 在我的javascript中,我循环遍历上面的div,如:
var divLists = document.getElementById('mainDiv').firstChild.childNodes;
for (var i = 0; i < tabLists.length; i++) {
var anchor = divLists[i].firstChild;
var iconFile;
if(i==0)
{
iconFile = 'details.png';
}
else
{
iconFile = 'search1.png';
}
anchor.style.backgroundImage = 'url(' + iconFile + ')';
anchor.style.backgroundRepeat = 'no-repeat';
anchor.style.backgroundPosition = '1px 2px';
anchor.className = 'toplevel-tab';
}
As shown, I am setting iconFile variable on value of i. 如图所示,我在i的值上设置了iconFile变量。 So for i = 0, it would be details.png while for all others, it would be search1.png.
所以对于i = 0,它将是details.png,而对于所有其他的,它将是search1.png。
Now, I want to decide the iconFile variable value based on the h2 value of the element. 现在,我想根据元素的h2值来决定iconFile变量值。 That is, if h2 is banana, banana.png will go in iconFile but if h2 is orange, orange.png will be selected.
也就是说,如果h2是banana,banana.png将进入iconFile,但如果h2是橙色,则会选择orange.png。
How to get h2 value inside javascript ? 如何在javascript中获取h2值?
Thanks for reading!! 谢谢阅读!!
Nik 聂
Don't use innerHTML, it's an unreliable proprietary Microsoft method; 不要使用innerHTML,它是一种不可靠的Microsoft专有方法; should you get used to using it you will immediately begin having problems if you start coding at an application level and not be able to figure out why.
如果您习惯使用它,如果您在应用程序级别开始编码而无法弄清楚原因,您将立即开始遇到问题。 Stick to using DOM specifications instead.
坚持使用DOM规范。
An example that you can obviously throw in to a loop... 一个你可以明显投入循环的例子......
document.getElementById('subDivClass').getElementsByTagName('h2').firstChild.nodeValue
.parentNode - The parent element of the currently referenced element. .parentNode - 当前引用元素的父元素。
.parentNode.parentNode.parentNode - You can use this as much as you want to go up or around the DOM. .parentNode.parentNode.parentNode - 您可以使用它来尽可能多地使用DOM。
.childNodes[0] - Index of child elements, does NOT contain reference to text nodes AFTER an element (use treewalker for that). .childNodes [0] - 子元素的索引,不包含对元素之后的文本节点的引用(使用树行者)。
.nodeValue - The text value of a node, do NOT use innerHTML. .nodeValue - 节点的文本值,不要使用innerHTML。
.textContent - Gets or sets the text of an element (but no child elements); .textContent - 获取或设置元素的文本(但没有子元素); a bit easier than
nodeValue
though it still has reasonable limitations. 虽然它仍然有合理的限制,但比
nodeValue
容易一些。
.previousSibling - The element BEFORE the reference element, not a child/parent. .previousSibling - 引用元素之前的元素,而不是子元素/父元素。
.nextSibling - The element AFTER the reference element, not a child/parent. .nextSibling - 引用元素之后的元素,而不是子元素/父元素。
You can reveal all objects (eg methods, properties and other objects) for any object using the in operator to discover what else is available to you... 您可以使用in运算符显示任何对象的所有对象(例如方法,属性和其他对象),以发现您可以使用的其他对象...
for (i in document.getElementById('mainDiv')) {alert('i = '+i);}
It should be noted that if you're stuck using the HTML parser .nodeName
will be all uppercase (eg the old Internet Explorer way) versus using the XML parser (application/xhtml+xml) the .nodeName
will properly return the element's name as lowercase (unless you're really in to the 90's style or something). 应该注意的是,如果你使用HTML解析器
.nodeName
将全部为大写(例如旧的Internet Explorer方式)而不是使用XML解析器(application / xhtml + xml) .nodeName
将正确地返回元素的名称为小写(除非你真的喜欢90年代的风格)。
It should also be noted that when you use previousSibling
and nextSibling
that line breaks alone will create a textNode
and those line breaks will mess with CSS (setting the font-size
to 5px will generally eliminate this). 还应该注意的是,当你使用
previousSibling
和nextSibling
,单独换行会创建一个textNode
,那些换行符会混乱CSS(将font-size
设置为5px通常会消除这种情况)。
If you want all the H2 elements inside the mainDivClass you can use the getElementsByTagName method: 如果你想要mainDivClass中的所有H2元素,你可以使用getElementsByTagName方法:
var outerDiv = document.getElementById("mainDiv");
var h2s = outerDiv.getElementsByTagName("h2");
This returns all the H2 elements as an array of elements. 这将所有H2元素作为元素数组返回。
var answer = function () {
var parent = document.getElementById("mainDiv"),
h2 = parent.getElementsByTagName("h2"),
a = h2.length,
b;
for (b = 0; b < a; b += 1) {
switch (h2[b].innerHTML) {
case "one":
//do something
break;
case "two":
//do something
break;
default:
//do something else
break;
}
}
};
The h2 value will be used as below: h2值将使用如下:
for (var i = 0; i < tabLists.length; i++) {
var anchor = tabLists[i].firstChild;
var iconFile;
if(tabLists[i].firstChild.innerHTML == "Tab 0")
{
iconFile = 'one.png';
}
else if(tabLists[i].firstChild.innerHTML == "apple")
{
iconFile = 'apple.png';
}
else if(tabLists[i].firstChild.innerHTML == "orange")
{
iconFile = 'banana.png';
}
else if(tabLists[i].firstChild.innerHTML == "banana")
{
iconFile = 'orange.png';
}
anchor.style.backgroundImage = 'url(' + iconFile + ')';
anchor.style.backgroundRepeat = 'no-repeat';
anchor.style.backgroundPosition = '1px 2px';
anchor.className = 'toplevel-tab';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.