DOM manipulation in JS

DOM operations in JS can mainly change the content, structure (tags), attributes, and styles of web pages.

The same operations for the DOM are also achieved by manipulating the properties of the object

Change the content of the element

For the text box element, its content belongs to the value of the value attribute
For other tags, the content refers to the part of the content written between two tags, so it cannot be implemented using the value attribute

To solve this problem we use two node object attributes

The innerText attribute of the element
Element's innerHTML attribute

Both of these attributes can modify the content between a node

note:

It can be recognized for HTML files <>. If there is <>in the content , the content string in the HTML file may be <>treated as a tag.

The difference between the two

innerText

When innerText gets the content operation, it will not process the internal label with string, and will not get the label.
When innerText sets the content, it will output the string directly to the page without parsing the content <>, and will retain spaces and line breaks in the string .

innerHTML

When innerHTML gets content, it will process all the tags and content inside it and return it
When innerHTML sets the content, it will parse the "<>" in the string and then reflect it on the page, without preserving the spaces and line breaks in the string.

Instance

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作之改变文本内容</title>
    <style>
    </style>
</head>

<body>
    <input type="text" value="请输入一个内容" id="txt">
    <h3 id="myh3"><u>改变之前的内容1</u></h3>
    <h2 id="myh2"><u>改变之前的内容2</u></h2>
    <b id="myb">a</b>
    <script>
        window.onload = function () {
     
     
            var txt = document.getElementById("txt");
            txt.onmousedown = function () {
     
     
                txt.value = "改变之后";
            }

            var h3 = document.querySelector("#myh3");
            h3.onmousedown = function () {
     
     
                h3.innerText = "改变之后1";
            }

            var h2 = document.querySelector("#myh2");
            h2.onmousedown = function () {
     
     
                h2.innerHTML = "改变之后2";
            }

            var b = document.getElementById("myb");
            b.onmousedown = function () {
     
     
                b.innerHTML = "<u>这是下划线</u>";
            }
        }
    </script>
</body>

</html>

Change the style of the element

After obtaining the element object by DOM operation, you can also use JS to manipulate the style (size, color, position, etc.) of the element

Common way

element.style starts to operate on the content of style (style)
element.className styles the class name

Manipulate styles through the style attribute

The style attribute of the element object is also an object
Through the style attribute = value of the element
The style naming method in JS adopts the camel case naming method
JS modifies the style style operation, which produces in-line styles, with higher CSS weight

By manipulating the className attribute

Element object.className=value, using className is not class, because class in JS is a special keyword
If there are more style modifications, it is more convenient to modify in this way
className will directly change the content of the class attribute of the element and will overwrite the original class value. If you don't want to overwrite it, you can use multiple class names.

Instance

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标移入表格一行换色</title>
    <style>
        * {
     
     
            margin: 0px;
            padding: 0px;
        }

        table tr td {
     
     
            border: 1px solid red;
            text-align: center;
        }

        table {
     
     
            margin: 100px auto;
            width: 400px;
            height: 400px;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>
                红米
            </td>
            <td>
                5900元
            </td>
        </tr>
        <tr>
            <td>
                华为
            </td>
            <td>
                9999元
            </td>
        </tr>
        <tr>
            <td>
                小米
            </td>
            <td>
                2000元
            </td>
        </tr>
        <tr>
            <td>
                vivo
            </td>
            <td>
                100元
            </td>
        </tr>
    </table>
    <script>
        window.onload = function () {
     
     
            var a = document.querySelectorAll("table tr")
            for (var i = 0; i < a.length; i++) {
     
     
                a[i].onmouseover = function () {
     
     
                    for (var j = 0; j < a.length; j++) {
     
     
                        a[j].style.backgroundColor = "white";
                    }
                    this.style.backgroundColor = "orange";
                }
                a[i].onmouseout = function () {
     
     
                    for (var j = 0; j < a.length; j++) {
     
     
                        a[j].style.backgroundColor = "white";
                    }
                    b.style.display = "none";
                }
            }
        }
    </script>
</body>

</html>