How to assign specific attribute to all childNodes in loop

Question

I have a html tags which have some n number of child loop inside that.

<div class="class1 " id="id1" style="position: absolute; z-index: 12005; v left: -10000px; top: -10000px; width: 228px; height: 0px; font-size: 11px;">
    <div class="class2" id="id2" style="width: 228px;">
        <div class="class3">H1</div>
        <div class="class3">H2</div>
        <div class="class3">H3</div>
        <div class="class3">H4</div>
    </div>
</div>

I wanted to set height to all child div like class1, class2,... What I am trying to use here is

var myDiv2 = document.getElementByID('id2')
myDiv2 = childNodes.forEach({

})

you want to set the height of all the child div of the div having id ="id2" is it ? — Arjita Mitra, Jul 22 '17 at 08:35
the purpose is not clearly explained. You could get better suggestions if you explain it in detail or answer these why what how with a proper example. If you just want to set all the div element have height as same as parent then why you do not use CSS inherit property and you would not require JS support anymore. — sagar, Jul 22 '17 at 08:54
If your question really is about setting height, I'd strongly recommend just using CSS, especially since all the elements you want to affect already have the same classname — Paul, Jul 22 '17 at 08:56
Dear @David, it seems like your question and the sample code are contradicting. you want to `set height to all child div like class1, class2 ..` while your sample code says that you want to change height only inside `#id2` and there are no such class as `class1, class2` inside that node. Please rectify question. However I have given an answer which might work with your requirement if you will manipulate a little. — Priya, Jul 23 '17 at 13:56

score 2 · Answer 1 · answered Jul 22 '17 at 08:47

If you want to set the height of every div inside the node of id 'id2' you should use this code that gonna set a heigth of 100px for every child node :

childList = document.getElementById('id2').childNodes
childList.forEach(function(item){
    item.style.heigth="100px"
});

Note that childList represents a NodeList of all the nodes inside the node of id 'id2'. The variable item represents the Node itself

Priya · Answer 2 · 2017-07-23T13:50:52.200

Try document.querySelectAll.

setTimeout(myFunction, 1000);

function myFunction() {
  var x = document.querySelectorAll("#id2 > [class^='class']");
  x.forEach(function(elem) {
    elem.style.height = "30px"
  });
}

/** css for testing **/

div {
  border: 1px solid red;
  color: red;
  padding: 4px;
  margin: 4px;
  width: 100%;
}

<div class="class1 " id="id1" style="width: 228px; height: 0px; font-size: 11px;">
  <div class="class2" id="id2" style="width: 228px;">
    <div class="class3">H1</div>
    <div class="class3">H2</div>
    <div class="class3">H3</div>
    <div class="class3">H4</div>
  </div>
</div>

Other solution will be with good old javascript

function setElementHeightWhereClassMatching(elem, className, height) {
  if (elem.children.length > 0) {
    var childList = elem.children,
      i;
    for (i = 0; i < childList.length; i = i + 1) {
      if (className.test(childList[i].getAttribute("class"))) {
        childList[i].style.height = height;
        if (childList[i].children.length > 0) {
          setElementHeightWhereClassMatching(childList[i], className, height)
        }
      }
    }
  }
}

function myFunction() {
  var parent = document.getElementById('id1');
  setElementHeightWhereClassMatching(parent, new RegExp('class[\\d]+'), '40px');
  console.log('all class inside id1 changed to 40px height');
}

setTimeout(myFunction, 1000);

function my2Function() {
  var parent = document.getElementById('id2');
  setElementHeightWhereClassMatching(parent, new RegExp('class[\\d]+'), '15px');
  console.log('all class inside id2 changed to 10px height');
}

setTimeout(my2Function, 3000);

div#id1,
div#id1 div {
  border: 1px solid red;
  color: red;
  padding: 4px;
  margin: 4px;
  display: inline-block;
  width: 100%;
}

<div class="class1 " id="id1" style="width: 228px; height: 0px; font-size: 11px;">
  <div class="class2" id="id2" style="width: 228px;">
    <div class="class3">H1</div>
    <div class="class3">H2</div>
    <div class="class3">H3</div>
    <div class="class3">H4</div>
  </div>
</div>

i get `Object doesn't support property or method 'forEach'`. — Nina Scholz, Jul 22 '17 at 09:03
@NinaScholz I am sure <= IE8 are not supporting `forEach`, same applies for `querySelectAll` ref: https://stackoverflow.com/a/20099008/465560 — Priya, Jul 22 '17 at 09:07
This is overkill and wrong. What if the markup ever changes and another class name is added to the class list, *before* the existing ones? This code would simply stop doing what is required. Also, this will affect all the divs in the example, not just the children. — Reinstate Monica Cellio, Jul 22 '17 at 09:15
@NinaScholz I am not sure but you can give a try to the old javascript solution. I don't have `Edge` to test. — Priya, Jul 22 '17 at 09:34
@Archer, I have given the possible answer for the given HTML markup. But we can always use the other selector `[class*='class']` which will recognise. And don't you think the question already says that every class with the matching div should change. — Priya, Jul 22 '17 at 09:40
Only the child divs should change. Also, using `[class*='class]` will match every element with the word `class` in any class name used. This is scrappy and prone to problems in the long term. It would work in the exact scenario above, but in nearly all other cases it would be plain wrong. — Reinstate Monica Cellio, Jul 23 '17 at 13:38

score 0 · Answer 3 · answered Jul 22 '17 at 11:31

if you want to set height of all child's div, you can use css.

.class2 .class3{height:100px;}

or if you want with javascript then you can use

var parentDiv = document.getElementById("id2");
var children = parentDiv.children;
for(var i = 0; i < child.length; i++){
 child[i].style.color = "green";
}

How to assign specific attribute to all childNodes in loop

3 Answers3