How to select all li at once using JavaScript

JavaScript DOM Manipulation (Article) DOM Manipulation (Program)

125

---

Program:

<span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html&gt;</span><span class="pln">
    </span><span class="tag">&lt;body&gt;</span><span class="pln">
        </span><span class="tag">&lt;ul&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;</span><span class="pln"> Hello </span><span class="tag">&lt;/li&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;</span><span class="pln"> Hello </span><span class="tag">&lt;/li&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;</span><span class="pln"> Hello </span><span class="tag">&lt;/li&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;</span><span class="pln"> Hello </span><span class="tag">&lt;/li&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;</span><span class="pln"> Hello rumman </span><span class="tag">&lt;/li&gt;</span><span class="pln">
        </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
    </span><span class="tag">&lt;/body&gt;</span><span class="pln"> 
</span><span class="tag">&lt;/html&gt;</span><span class="pln">


&lt;!- Script Code --&gt;
</span><span class="tag">&lt;script&gt;</span><span class="pln">
    </span><span class="kwd">let</span><span class="pln"> elementLi </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementsByTagName</span><span class="pun">(</span><span class="str">'li'</span><span class="pun">);</span><span class="pln">
    </span><span class="typ">Array</span><span class="pun">.</span><span class="kwd">from</span><span class="pun">(</span><span class="pln">elementLi</span><span class="pun">).</span><span class="pln">forEach</span><span class="pun">(</span><span class="pln">element </span><span class="pun">=&gt;{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">elementLi</span><span class="pun">);</span><span class="pln">
        element</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">color </span><span class="pun">=</span><span class="pln"> </span><span class="str">'blue'</span><span class="pun">;</span><span class="pln">
        element</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">boxShadow </span><span class="pun">=</span><span class="pln"> </span><span class="str">'2px 5px #888888'</span><span class="pun">;</span><span class="pln">
        element</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">border </span><span class="pun">=</span><span class="pln"> </span><span class="str">'1px solid'</span><span class="pun">;</span><span class="pln">
        element</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">padding </span><span class="pun">=</span><span class="pln"> </span><span class="str">'10px'</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">});</span><span class="pln">
</span><span class="tag">&lt;/script&gt;</span>

Output:

Copy above code and run it in your environment to see the output. 

Explanation:

---

---