Python的dom節(jié)點(diǎn)怎么獲取

發(fā)布時(shí)間：2022-01-24 09:21:03 來(lái)源：億速云閱讀：267 作者：iii 欄目：開發(fā)技術(shù)

本文小編為大家詳細(xì)介紹“Python的dom節(jié)點(diǎn)怎么獲取”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Python的dom節(jié)點(diǎn)怎么獲取”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

1. dom節(jié)點(diǎn)

1.1 dom節(jié)點(diǎn)獲取

<!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 文檔頂級(jí)節(jié)點(diǎn)</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 通過(guò)id獲取div節(jié)點(diǎn)對(duì)象
        var box = document.getElementById("box");
        console.log(box);
        // ### 2 通過(guò)類名獲取節(jié)點(diǎn)對(duì)象 [返回的是數(shù)組]
        var p2 = document.getElementsByClassName("p2");
        console.log(p2 , typeof(p2));
        // 獲取李四節(jié)點(diǎn)對(duì)象
        lisi = p2[0];
        console.log(lisi)
        // 獲取王五節(jié)點(diǎn)對(duì)象
        wangwu = p2[1];
        console.log(wangwu);
        // ### 3.通過(guò)標(biāo)簽獲取節(jié)點(diǎn)對(duì)象 [返回的是數(shù)組]
        var p = document.getElementsByTagName("p");
        console.log(p)
        console.log(p[1])
        // ### 4.通過(guò)標(biāo)簽身上的name屬性 [返回的是數(shù)組] 一般用在input表單中
        var ceshi1 = document.getElementsByName("username")[0];
        console.log(ceshi1);

        // ### 通過(guò)css選擇器獲取對(duì)應(yīng)的元素節(jié)點(diǎn)        
        // ### 5.querySelector ,只獲取找到的第一個(gè);
        var p1 = document.querySelector(".p1");
        console.log(p1)
        var box = document.querySelector("#box");
        console.log(box)
        // input表單有兩個(gè),但是只獲取第一個(gè);
        var input = document.querySelector("input");
        console.log(input);
        // ### 6.querySelectorAll 獲取所有找到的元素節(jié)點(diǎn),返回?cái)?shù)組
        var all = document.querySelectorAll("input[name=username]")[0];
        console.log(all);

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

1.2 節(jié)點(diǎn)元素層級(jí)關(guān)系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>節(jié)點(diǎn)元素層級(jí)關(guān)系</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>
        // ### 獲取對(duì)應(yīng)的節(jié)點(diǎn)元素
        console.log(document)
        console.log(document.documentElement); // html
        console.log(document.documentElement.children) 
        // 找html里面所有的子節(jié)點(diǎn)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)
        // 獲取下一個(gè)節(jié)點(diǎn)對(duì)象nextSibling
        console.log(input1.nextSibling.nextSibling);
        // 獲取下一個(gè)元素節(jié)點(diǎn)對(duì)象 nextElementSibling
        var input2 = input1.nextElementSibling;
        console.log(input2);
        // 獲取上一個(gè)節(jié)點(diǎn)對(duì)象 previousSibling
        console.log(input2.previousSibling)
        // 獲取上一個(gè)元素節(jié)點(diǎn)對(duì)象 previousElementSibling
        console.log(input2.previousElementSibling)
        // 獲取input2父節(jié)點(diǎn)元素對(duì)象;
        console.log(input2.parentElement)
    </script>
</body>
</html>

1.3 修改_清空內(nèi)容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 修改/清空內(nèi)容</title>
</head>
<body>
    <button onclick="func1()">修改內(nèi)容</button>
    <button onclick="func2()">清空內(nèi)容</button>
    <div id="box" >
        <p>我是最帥的最有錢的<a href="#">最有味的</a>男人</p>
    </div>
    <script>
        // innerHTML 獲取標(biāo)簽里面所有內(nèi)容 [標(biāo)簽 + 文本]
        // innerText 獲取標(biāo)簽里面所有字符串[文本]
        var p = document.querySelector("#box p");
        // console.log把數(shù)據(jù)展現(xiàn)在控制臺(tái)
        console.log(p);
        // document.write 把數(shù)據(jù)以字符串的形式展現(xiàn)在瀏覽器
        document.write(p);
        // 點(diǎn)擊button1觸發(fā)如下任務(wù) , 修改
        function func1(){
            var content = p.innerHTML;
            var content = p.innerText;
            console.log(content);
            // p.innerHTML = `我被修改了 <a href=''>點(diǎn)我中大獎(jiǎng)</a>...1`;
            p.innerText = `我被修改了 <a href=''>點(diǎn)我中大獎(jiǎng)</a>...2`;
        }
        // 點(diǎn)擊button2觸發(fā)如下任務(wù) , 清空
        function func2(){
            p.innerHTML = '';
        }

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

1.4 隱藏顯示密碼效果

<!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>
    <input type="password" name="pwd" value="111" class="abcd" /> <button onclick="change()" id="btn" >點(diǎn)我顯示密碼</button>
    <div>
        <img src="images/oneal1.jpg" />
    </div>
    
    <script>
        // 效果1: 顯示隱藏密碼
        var password = document.querySelector("input[name=pwd]")
        console.log(password);
        console.log(password.type);
        console.log(password.name);
        console.log(password.value); 
        console.log(password.className)
        function change(){
            var btn = document.querySelector("#btn")
            console.log(btn);
            if(password.type=="password"){
                password.type = "text";
                btn.innerHTML = "點(diǎn)我隱藏密碼";
            }else{
                password.type= "password";
                btn.innerHTML = "點(diǎn)我顯示密碼";
            }
        }
        // 效果2:點(diǎn)擊換圖片
        var img = document.querySelector("img");
        console.log(img)
        img.onclick = function(){
            console.log(img.src) // http://127.0.0.1:5500/images/oneal1.jpg
            var arr = img.src.split("/")
            imgname = arr[arr.length - 1]
            console.log(arr , imgname);
            if(imgname == "oneal1.jpg"){
                img.src = "images/bakeli.jpg";
            }else{
                img.src = "images/oneal1.jpg";
            }
        }
    </script>
</body>
</html>![請(qǐng)?zhí)砑訄D片描述](https://cache.yisu.com/upload/information/20220123/112/884131.jpg?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54as5aSc5rOh6p645p2e,size_20,color_FFFFFF,t_70,g_se,x_16)

2. 全選_反選_不選

2.1 全選_反選_不選

<!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;}
        ul
        {list-style: none;}
        #ul1 li
        {float:left;}
        #ul1 li button
        {width:80px;height:30px;}
        #ul1 li button:hover
        {background-color: tan;}
        #ul2
        {clear:both;}
    </style>
</head>
<body>
    <ul id="ul1">
        <li><button>全選</button></li>        
        <li><button>不選</button></li>
        <li><button>反選</button></li>
    </ul>
    <ul id="ul2">
        <li><input type="checkbox"  /> 看電影 </li>
        <li><input type="checkbox" /> 吃面 </li>
        <li><input type="checkbox" /> 燙頭 </li>
        <li><input type="checkbox" /> 跑步 </li>
        <li><input type="checkbox" /> 籃球 </li>
    </ul>
    <script>
        // 獲取btn節(jié)點(diǎn)對(duì)象
        var btn1 = document.querySelector("#ul1 li:nth-child(1) button");
        var btn2 = document.querySelector("#ul1 li:nth-child(2) button");
        var btn3 = document.querySelector("#ul1 li:nth-child(3) button");
        // 全選
        btn1.onclick = function(){
            // 獲取#ul2 li 里的input
            /*
                var data_lst = document.getElementById("ul2").getElementsByTagName("input");
                console.log(data_lst)
            */
            var data_lst = document.querySelectorAll("#ul2 li input");
            console.log(data_lst)
            // 獲取數(shù)組當(dāng)中每一個(gè)input節(jié)點(diǎn)元素對(duì)象
            for(var input of data_lst){
                //console.log(input.checked)
                // 設(shè)置節(jié)點(diǎn)input的checked屬性為true;
                input.checked = true;                
            }
        }
        // 不選
        btn2.onclick = function(){
            var data_lst = document.querySelectorAll("#ul2 li input");
            console.log(data_lst)
            // 獲取數(shù)組當(dāng)中每一個(gè)input節(jié)點(diǎn)元素對(duì)象
            for(var input of data_lst){
                //console.log(input.checked)
                // 設(shè)置節(jié)點(diǎn)input的checked屬性為true;
                input.checked = false;                
            }
        }
        // 反選
        btn3.onclick = function(){
            var data_lst = document.querySelectorAll("#ul2 li input");
            console.log(data_lst)
            // 獲取數(shù)組當(dāng)中每一個(gè)input節(jié)點(diǎn)元素對(duì)象
            for(var input of data_lst){
                if(input.checked === true){
                    input.checked = false;
                }else{
                    input.checked = true;
                }
            }
        }
    </script>

</body>
</html>

2.2 js控制css的相關(guān)屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js控制css的相關(guān)屬性</title>
    <style>
        .box
        {border:solid 1px red;}
        .box_new
        {position: absolute; left:200px;}
    </style>
</head>
<body>
    <button id="box1">點(diǎn)擊我換顏色</button>
    <button id="box2">點(diǎn)擊我隱藏</button>
    <button id="box3">點(diǎn)擊我顯示</button>
    <button id="box4">點(diǎn)擊邊框換圓角</button>
    <button id="box5">點(diǎn)擊加樣式</button>
    <div class="box" >你好評(píng)</div>
   <script>
        var box = document.querySelector(".box");
        console.log(box);
        // js的dom對(duì)象獲取相關(guān)的css屬性
        // 獲取方法一
        console.log(box.style.width);
        console.log(box.style.backgroundColor);
        // 獲取方法二
        console.log(box.style["width"]);
        console.log(box.style["background-color"]);
        console.log(box.style["font-size"]);
        // 獲取方法三 getComputedStyle 獲取該節(jié)點(diǎn)對(duì)象的所有樣式
       console.log( window.getComputedStyle(box)["font-size"] , "<===getComputedStyle===>");
       console.log( window.getComputedStyle(box).fontSize , "<===getComputedStyle===>");
        // 事件綁定
       var box1 = document.getElementById("box1");
       var box2 = document.getElementById("box2");
       var box3 = document.getElementById("box3");
       var box4 = document.getElementById("box4");
       var box5 = document.getElementById("box5");
       box1.onclick = function(){
            box.style.backgroundColor = "red";
       }
       box2.onclick = function(){
            box.style.display = "none";
       }
       box3.onclick = function(){
            box.style.display = "block";
       }
       box4.onclick = function(){
            //box.style.borderRadius = "100%";
            var point = 0;
            var t = setInterval( function(){
                box.style.borderRadius = `${point}%`;
                if(point < 100){
                    point++;
                }else{
                    clearInterval(t)
                    console.log("結(jié)束了... ")
                }
            } , 50)
        }
        /* 重點(diǎn) 添加樣式*/
        box5.onclick = function(){
            // box.className = "box box_new";
            box.className += " box_new";
        }
    </script>
</body>
</html>

2.3 js事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js事件</title>
    <style>
        *{margin:0px;padding:0px;}
        .box
        {width:100px;height:100px;background: green;position: absolute;left:0px;}
    </style>
</head>
<body>
    <!-- 1.事件的靜態(tài)綁定 -->
    <button onclick="func1()">按鈕1</button>
    <div class="box"></div>
    <script>
        var box = document.getElementsByClassName("box")[0];
        var t;
        console.log(box);
        function func1(){
            var left = parseInt(window.getComputedStyle(box).left)
            console.log(left ,typeof(left));
            // console.log(box.style.left);
            t = setInterval(function(){
                left += 10;
                box.style.left  = `${left}px`;
            } , 50)
        } 
        
        // 2.事件的動(dòng)態(tài)綁定 
        // onmouseover 鼠標(biāo)指針懸停在指定元素上時(shí)觸發(fā)
        box.onmouseover = function(){
            clearInterval(t);
        }
        // onmouseout  鼠標(biāo)指針離開指定元素時(shí)觸發(fā)
        box.onmouseout = function(){
            func1()
        }
    </script>
</body>
</html>

3. 模態(tài)框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模態(tài)框</title>
    <style>
        .box {
            position:fixed;
            width:100%;
            height:100%;
            top:0px;
            background-color: greenyellow;
            display: none;
        }
        .content
        {            
            border:solid 1px red;
            width:500px;
            height:500px;
            background-color:tan;
            margin:auto;
            margin-top:14%;        
        }
    </style>
</head>
<body>
    <button id="login">登錄</button>
    <div class="box">
        <div class="content" >
            <span class="close">X</span>
            <br />
            <span>賬號(hào): <input type="text"  /></span>
            <br / >
            <span>密碼: <input type="password"  /></span>
        </div>
    </div>
    <script>
        var btn = document.getElementById("login");
        var box = document.querySelector(".box");
        var close = document.querySelector(".close");
        btn.onclick = function(){
            console.log(11)
            box.style.display = "block";
        }
        close.onclick = function(){
            box.style.display = "none";
        }

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

讀到這里，這篇“Python的dom節(jié)點(diǎn)怎么獲取”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)