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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM对象</title>
</head>

<body>
    <!-- 这是一个段落 -->
    <p style="color: red;">段落元素</p>
    <form action="1.php" ></form>
    <form action="2.php" name="login">
        <input type="text" name="username" value="晚风">
    </form>
    <form action="3.php" ></form>
    <script>
        // 节点 html文档中所有内容都是节点
        // 节点树  DOM树
        // 节点类型有那些 元素  文本 属性  注释 文档  这些都是节点

        // 返回当前的文档类型
        console.log(document.doctype)

        // 返回 html 主树干
        console.log(document.documentElement)

        // 返回值是head
        console.log(document.head)
        // 返回body
        console.log(document.body)

        // 返回title 页面标题
        console.log(document.title)
        // 返回 所有form表单
        console.log(document.forms);
        console.log(document.forms[0]['outerHTML']);
        console.log(document.forms[1]['outerHTML']);
        console.log(document.forms.item(2)['outerHTML']);
        // console.log(document.getElementById("login")['outerHTML']);
        // 获取指定表单
        console.log(document.forms.namedItem("login")['outerHTML']);

        // 使用 login  name获得表单 然后指定 表单内input标签的name 加上value 即可得到值
        console.log(document.forms.namedItem("login").username.value);





    </script>
</body>

</html>
Last modification：February 1, 2022
© Allow specification reprint
反正也没人会打赏