html07-CSDN博客

本文链接：https://blog.csdn.net/qq_35860368/article/details/53679526

本文介绍了一个简单的HTML页面中使用JavaScript操作DOM元素的例子，包括创建、替换、克隆节点及通过不同属性选择元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul id="ul">
        <li class="li1">韦德</li>
        <li>科比</li>
        <li>杜兰特</li>
    </ul>
    <input type="text" name="username"/>

    <script>
        var oli = document.createElement("li");
        var textNode = document.createTextNode("詹姆斯");
        oli.appendChild(textNode);

        /*替换节点，杜兰特*/

        var oul = document.getElementById("ul");
        var lastLi = oul.lastElementChild;
        /*第一个参数 要替换的li内容，第二个参数是目标li*/
        oul.replaceChild(oli,lastLi);


        /*克隆节点:深克隆true，克隆当前节点以及节点的子节点   浅克隆false：只克隆当前这个节点*/
        var newli = oli.cloneNode(false);
        oul.appendChild(newli);

        /*通过class找到节点*/
        var oli1 = document.getElementsByClassName("li1");
        console.info(oli1);
        oli1[0].style.backgroundColor = "pink";

        /*通过name属性找元素*/
        var oinp = document.getElementsByName("username");
        console.info(oinp)
        oinp[0].style.backgroundColor = "green";


        /*通过元素找节点*/
        var ularr = document.getElementsByTagName("ul");

    </script>
</body>
</html>