I’m trying to targeting a specific id. I’m trying to move around the nodes changing values and or adding attributes as I please, but for some reason I can’t get it to work. In fact, it’s giving me a weird output.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script>
window.onload = function() {
var main = document.getElementById('main');
var children = main.childNodes;
for(var i = 0, ii = children.length; i < ii; i++) {
children[i].nodeValue = 'changed out';
}
}
</script>
</head>
<body>
<div id="main">
<h1>Header 1</h1>
<p>Content 1</p>
<h1>Header 2</h1>
<p>Content 2</p>
</div>
</body>
</html>
Ouput is:
changed out
Header 1
changed out
Content 1
changed out
Header 2
changed out
Content 2
changed out
…??? Not sure why that’s the output.
Where are all these additional nodes coming from?
I’ve been reading and it says chilNodes return an array like. So I did this:
var main = document.getElementById('main');
var children = main.childNodes;
var h1 = children.getElementsByTagName('h1');
for(var i = 0, ii = h1.length; i < ii; i++) {
h1[i].innerHTML = 'changed out';
}
yet it returned an error stating that it getElementsByTagName was not a function
After a few hours working with their example I gave up on it. I did manage to somewhat getting working. The problem that I was having is that fire fox is not reliable enough to tell me the correct node type.
The following doesn’t seem to work on the first node, it seems to skip it and correctly push the rest into the array.
window.onload = function() {
var main = document.getElementById('main');
var nodes = buildChildNodes(main.childNodes);
}
function buildChildNodes(nodeList) {
var children = [],
i = 0,
current = nodeList[i];
while (current) {
// 8 -- Comment node 3 -- Text node
if (current.nodeType != 8 && current.nodeType != 3) {
children.push(current);
}
current = nodeList[++i].nextSibling;
}
return children;
}
I ended up with another way of getting the children and it seems to work across all modern browsers.
window.onload = function() {
var main = document.getElementById('main');
var nodes = main.getElementsByTagName('*') || main.all;
for(var i = 0, ii = nodes.length; i < ii; i++) {
console.log(nodes[i].innerHTML);
}
}
I’ve gotten it to work. But I’m still stumped as to why there are blank/undefined nodes?
window.onload = function() {
var main = document.getElementById('main');
var nodes = main.childNodes;
for (var i = 0, ii = nodes.length; i < ii; i++) {
console.log('Node: ' + nodes[i].innerHTML);
}
}
