I have problems with DOM in javascript

Question

Text editor: Visual studio code

Browser: Firefox

OS: Fedora 31

and with node, I get "document is not defined" I'm new so I don't know what to do?

My error:

TypeError: lovers.style is undefined

let lovers = document.getElementsByClassName("lover");
lovers.style.color = "red";

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>traning</title>
    <link rel="stylesheet" href="style.css" S>

</head>

<body>
    <li class="title">2435</li>
    <li class="lover">4534</li>
    <li class="hater">s43343</li>
</body>
<script src="./app.js"></script>

</html>

node dosn't need a browser to execute its JS code, so it won't have access to the `document` — Nick Parsons, Dec 14 '19 at 05:04
Also `getElementsBy*` returns a HTMLCollection (not a singleelement) — Nick Parsons, Dec 14 '19 at 05:13

score 0 · Accepted Answer · answered Dec 14 '19 at 05:12

The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class names. This object does not contain the style property. To make this work, you need to extract the first element from the array using [0].

let lovers = document.getElementsByClassName("lover")[0];
lovers.style.color = "red";

I have problems with DOM in javascript

1 Answers1