Объект вывода HTML DOM

На чтение 6 мин Просмотров 90 Опубликовано 02.01.2022

Выходной объект HTML DOM используется для представления HTNL <Output> Tag. Выходной элемент доступ getElementById ().

Синтаксис:

document.getElementById("id");

Где «id» — это идентификатор, присвоенный тегу «output».

Ценности:

Значение по умолчанию: используется для установки или возврата значения по умолчанию для элемента .

form: возвращает ссылку на форму, которой принадлежит элемент .
htmlFor: используется для возврата значения атрибута элемента .
labels: используется для возврата списка элементов меток, связанных с элементом .
name: используется для установки или возврата значения атрибута name элемента .
type: возвращает тип HTML-элемента, который представляет объект Output.
value: используется для установки или возврата значения атрибута value элемента .

Пример 1. Ниже HTML-код возвращает значение выходного элемента. Используя метод getElementById () для доступа к тегу вывода.

<!DOCTYPE html>

<html>

<head>

    <title>

        HTML DOM Output Object

    </title>

    <style>

        body {

            text-align: center;

        }

        h1 {

            color: green;

        }

    </style>

</head>

<body>

    <h1>GeeksforGeeks</h1>

    <h2>

        HTML DOM Output Object

    </h2>

    <form oninput="sumresult.value = parseInt(A.value)

                + parseInt(B.value) + parseInt(C.value)">

        <input type="number" name="A" value="50" /> +

        <input type="range" name="B" value="0" /> +

        <input type="number" name="C" value="50" />

        <br /> Submit Result:

        <output name="sumresult" id="geeks" for="A B C">

        </output>

        <br>

        <br>

    </form>

    <Button onclick="myGeeks()">Submit</Button>

    <h2 id="sudo"></h2>

    <script>

        function myGeeks() {

            var x = document.getElementById("geeks").value;

            document.getElementById("sudo").innerHTML = x;

        }

    </script>

</body>

</html>

Вывод:

Пример 2: Объект вывода можно создать с помощью метода document.createElement.

<!DOCTYPE html>

<html>

<body>

    <center>

        <h2 style="color: green;">

            GeeksForGeeks

        </h2>

        <h2 style="color: green;">

            HTML DOM Output Object

        </h2>

        <p>

            Click the Beliw button to

            create an OUTPUT element.

        </p>

        <form id="GFG" oninput=

            "x.value=parseInt(a.value)+parseInt(b.value)">0

            <input type="range" id="a" value="50">100

            +<input type="number" id="b" value="50">=

        </form>

        <br>

        <button onclick="Create()">Try it</button>

        <p id="sudo"></p>

    </center>

    <script>

        function Create() {

            // Create an output tag

            var x = document.createElement("OUTPUT");

            x.setAttribute("name", "x"); // Set name attribute

            x.setAttribute("for", "a b"); // Set firm attribute

            document.getElementById("GFG").appendChild(x);

            document.getElementById("sudo").innerHTML =

                `The output element was created. You can

                Change the value of the range or number

                field to see the result of a calculation.`;

        }

    </script>

</body>

</html>

Вывод: