Question: I'm trying to change all bold characters to italic ones and vica versa. I figured out I need to iterate through the entire document.

So far I defined the two styles and a part of the function, not sure if the styles are needed.

```
        .bold {
            font-weight: bold;
        }
        .italic {
            font-style: italic;
        }

        <script>
        function swap() {
            if (fontWeight == 'bold') {
                fontWeight == 'normal';
                fontStyle == 'italic';
            }
            elseif (fontStyle == 'italic') {
                fontStyle == 'normal';
                fontWeight == 'bold';
            }
        </script>

```

Answer: 
Well, you could do this with `querySelectorAll`, considering only swapping `.bold` and `.italic` depending on their current class:

```js
function swapCollection( collection, from, to ) {
  if ( !collection ) {
    return;
  }

  for( let i = 0; i < collection.length; ++i ) {
    const elm = collection[ i ];
    elm.classList.remove( from );
    elm.classList.add( to );
  }
}

function swap() {
  const allBold = document.querySelectorAll( '.bold' );
  const allItalic = document.querySelectorAll( '.italic' );

  swapCollection( allBold, 'bold', 'italic' );
  swapCollection( allItalic, 'italic', 'bold' );
}

document.getElementById( 'swap' ).addEventListener( 'click', swap );
```

```css
.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}
```

```html
<div>
  <span class="bold">Hello</span> <span class="italic">world!</span>
</div>

<button id="swap">swap</button>
```
You can also use getElementsByClassName to choose class and change style then:

```
   function swap() {
    var mass=document.getElementsByClassName("bold");
      for (i in mass){
        mass[i].style.fontWeight="normal";
      }
    }

```