[Python知识库] 【四十三】Python全栈之路--JS

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> Python知识库 -> 【四十三】Python全栈之路--JS -> 正文阅读

[Python知识库]【四十三】Python全栈之路--JS

文章目录

1. dom节点

1.1 dom节点获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM document object model 文档顶级节点</title>
</head>
<body>
    <div id="box">
        <p class="p1" >张三</p>
        <p class="p2">李四</p>
        <p class="p3">赵刘</p>
        <p name="ceshi1"></p>
        <p name="ceshi1"></p>
    </div>

    <div>
        <input type="text" name="username" />
        <input type="password" name="pwd" />
        
        <p1>112233</p1>
        <box>55666</box>
    </div>

    <script>
        console.log(document)
        // ### 1 通过id获取div节点对象
        var box = document.getElementById("box");
        console.log(box);

        // ### 2 通过类名获取节点对象 [返回的是数组]
        var p2 = document.getElementsByClassName("p2");
        console.log(p2 , typeof(p2));
        // 获取李四节点对象
        lisi = p2[0];
        console.log(lisi)
        // 获取王五节点对象
        wangwu = p2[1];
        console.log(wangwu);

        // ### 3.通过标签获取节点对象 [返回的是数组]
        var p = document.getElementsByTagName("p");
        console.log(p)
        console.log(p[1])
       
        // ### 4.通过标签身上的name属性 [返回的是数组] 一般用在input表单中
        var ceshi1 = document.getElementsByName("username")[0];
        console.log(ceshi1);


        // ### 通过css选择器获取对应的元素节点        
        // ### 5.querySelector ,只获取找到的第一个;
        var p1 = document.querySelector(".p1");
        console.log(p1)
        var box = document.querySelector("#box");
        console.log(box)
        // input表单有两个,但是只获取第一个;
        var input = document.querySelector("input");
        console.log(input);
        // ### 6.querySelectorAll 获取所有找到的元素节点,返回数组
        var all = document.querySelectorAll("input[name=username]")[0];
        console.log(all);


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

1.2 节点元素层级关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点元素层级关系</title>
</head>
<body>
    <div id="box">
        <p>
            <input type="text" name="username" />
            <input type="password" name="pwd" />
        </p>
        <p class="p1" >张三</p>
        <p class="p2">李四</p>
        <p class="p3">赵刘</p>
        <p name="ceshi1"></p>
        <p name="ceshi1"></p>
    </div>
    <script>

        // ### 获取对应的节点元素
        console.log(document)
        console.log(document.documentElement); // html
        console.log(document.documentElement.children) 
        // 找html里面所有的子节点children
        var html_children = document.documentElement.children
        console.log(html_children) // head , body
        body = html_children[1];
        console.log(body); // head , body
        var div = body.children[0]
        console.log(div);
        var p0 = div.children[0]
        console.log(p0)
        var input = p0.children
        console.log(input)
        var input1 = input[0]
        console.log(input1)
        // 获取下一个节点对象nextSibling
        console.log(input1.nextSibling.nextSibling);
        // 获取下一个元素节点对象 nextElementSibling
        var input2 = input1.nextElementSibling;
        console.log(input2);
        // 获取上一个节点对象 previousSibling
        console.log(input2.previousSibling)
        // 获取上一个元素节点对象 previousElementSibling
        console.log(input2.previousElementSibling)
        // 获取input2父节点元素对象;
        console.log(input2.parentElement)
    </script>
    
</body>
</html>