網站首頁編程語言正文

DOM節點對象、獲取節點、節點屬性、動態操作DOM節點、toList1.0/toList2.0、元素偏移量、元素尺寸

作者：秋313 更新時間： 2022-08-30 編程語言

一、DOM節點對象

? dom節點對象

? ? ? ? ? ?html標簽元素

? ? ? ? ? ? ? <h2 id="title">元素一</h2>

? ? ? ? ? ?dom節點對象

? ? ? ? ? ?=>從dom角度，整個html文檔就是一個對象（document 文檔對象），文檔中每個標簽元素，以及元素的內容，屬性，樣式都是節點屬性

? ? ? ? ? ?=>節點對象分類

? ? ? ? ? ? ? ?（元素節點 ? 文本節點）document文檔節點 ?注釋節點

? ? ? ? ? ?=> html文檔結構

? ? ? ? ? ? ? 樹型結構

? ? ? ? ? ?=> 節點關系

? ? ? ? ? ? ? 父子關系 ? 兄弟關系

根節點：在HTML文檔中，html就是根節點。

父節點：一個節點之上的節點就是該節點的父節點，例如ul的父節點就是body，body的父節點就是html。

?子節點：一個節點之下的節點就是該節點的子節點，例如ul就是body的子節點。

兄弟節點：如果多個節點在同一層次，并擁有相同的父節點，那么這幾個節點就是兄弟節點。

body下面有7個節點，4個空節點

二、獲取節點

?節點分類

? ? ? ? ? ? 元素節點 ? 文本節點屬性節點

? ? ? ? 獲取節點對象

? ? ? ? ? 1. getElement系列

? ? ? ? ? ? ? getElementById（）

? ? ? ? ? ? ? ? ? 元素節點

? ? ? ? ? 2.querySelector 系列

? ? ? ? ? ? ?ele.innerHTML

? ? ? ? ? 3.層次結構

? ? ? ? ? ? ?父節點 ?->所有子節點 ? childNodes

? ? ? ? ? ? ? ? ? ? ?->firstChild

? ? ? ? ? ? ? ? ? ? ?->lastChild

? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ->元素子節點 children

? ? ? ? ? ? ? ? ? ? ->firstElementChild

? ? ? ? ? ? ? ? ? ? ->lastElsementChild

? ? ? ? ? ? ? 兄弟 ?->nextElementSibling

? ? ? ? ? ? ? ? ? ? ->parentElement

屬性名稱	描述
parentNode	返回節點的父節點
childNodes	返回子節點集合，childNodes[i]
firstChild	返回節點的第一個子節點，最普遍的用法就是訪問該元素的文本節點
lastChild	返回節點的最后一個子節點
naextChild	下一個節點
previousSibling	上一個節點

body下面有7個節點，4個空節點

? ? ? ? ? ? 4.非常規節點

<body>
    <div class="root">
        1
        <p>元素一</p>
        2
        <p>元素二</p>
        3
        <p>元素三</p>
        4


    </div>


    <script>
        // 獲取div父節點
        var divEle = document.querySelector('.root')
        console.log('divEle.childNodes', divEle.childNodes)
        console.log('divEle. firstchild', divEle.firstChild)
        console.log('divEle.lasthild',divEle.lastChild)
        console.log('divEle.firstchild.nextsibling',divEle.firstChild.nextSibling)//返回第一個文本節點的下一個節點

        console.log('divEle.childen:',divEle.children)//返回某一節點下所有子一級的元素節點
        console.log('divEle.firstElementChild:',divEle.firstElementChild)//返回某一節點下第一個子一級的元素節點
        console.log('divEle.lastElementChild:',divEle.lastElementChild)//返回某一節點下最后一個子一級的元素節點
        console.log('divEle.nextElementSibling',divEle.nextElementSibling)//父親節點的下一個節點為script

        console.log('divEle.parentElement',divEle.lastElementChild.parentElement)//返回最后一個子節點的父節點

        console.log('body',document.body)
        console.log('html',document.html)
        console.log('head',document.head)
    </script>

例子：購物車找節點示例

<!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>購物車找節點示例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 1200px;
            margin: 100px auto;
        }

        .container tr {
            line-height: 40px;
            text-align: center;
        }

        .containertr,
        th,
        td {
            border-bottom: 1px solid gray;
        }

        .container tr input {
            width: 20px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table class="container">
        <tr>
            <th>商品圖片</th>
            <th>商品信息</th>
            <th>單價</th>
            <th>數量</th>
            <th width="100px">總價</th>
            <th>操作</th>
        </tr>
        <tr>
            <td> <img src="https://img2.baidu.com/it/u=1499633017,1319149509&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100"
                    alt="圖片一"></td>
            <td>javascript高級編程</td>
            <td>￥28.98</td>
            <td>
                <input type="button" value="-" name="minus"><input type="text" value="0" name="amount"><input
                    type="button" name="plus" value="+">

            </td>
            <td>￥0</td>
            <td>移入收藏<br>刪除</td>
        </tr>
        <tr>
            <td> <img src="https://img2.baidu.com/it/u=1499633017,1319149509&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100"
                    alt="圖片一"></td>
            <td>css高級編程</td>
            <td>￥16.68</td>
            <td>
                <input type="button" value="-" name="minus"><input type="text" value="0" name="amount"><input
                    type="button"  value="+" name="plus">

            </td>
            <td>￥0</td>
            <td>移入收藏<br>刪除</td>
        </tr>
    </table>
    

    <script>
        /*
        點擊加號，數量加一，計算該商品總價，顯示到總價欄
           分析：
              1.給加號綁定點擊事件
              2.改變數量
              3.獲取單價*數量
        
        */
        function onPlus() {
            var plusEles = document.querySelectorAll('input[name="plus"]')
            for (var i = 0; i < plusEles.length; i++) {
                var plusEle = plusEles[i] //加號節點對象
                // 給加號綁定事件
                plusEle.onclick = function () {
                    // this關鍵字：當前點擊的節點對象
                    var amountEle = this.previousElementSibling
                    amountEle.value++
                    //獲取單價
                    var priceEle = this.parentElement.previousElementSibling
                    var price = priceEle.innerHTML
                 
                    // str.substring(開始索引，結束索引)
                    price = price.substring(1)//只有一個參數，表示截取從索引號開始所有子字符串
                
                    // // 計算價格
                    var totalPrice = price * amountEle.value
                    console.log(totalPrice)
                    var totalPriceEle = this.parentElement.nextElementSibling
                    totalPriceEle.innerHTML = `￥${totalPrice.toFixed(2)}`

       

                }
            }
        }
        onPlus()
    </script>

</body>

</html>

三、節點屬性

? ? ? ? ? ? nodeType ? ? ? ? ? nodeName ? ? ? ? ? nodeValue

? ? ? ? 元素節點 ? 1 ? ? ? ? ? ? ? 標簽名大寫 ? ? ? ? ? ?null

? ? ? ? 屬性節點 ? 2 ? ? ? ? ? ? ? ? 屬性名 ? ? ? ? ? ? ? 屬性值

? ? ? ? 文本節點 ? 3 ? ? ? ? ? ? ? ?#text ? ? ? ? ? ? ? ?文本內容

<body>
    <div>元素一</div>
    <script>
        var divEle=document.querySelector('div')
        divEle=divEle.firstChild
        console.log('nodeType',divEle.nodeType,'nodeName',divEle.nodeName,'nodeValue',divEle.nodeValue)


    </script>
    
</body>

四、動態操作DOM

? ? ? ?創建dom 節點

? ? ? ? ? ?document.creatElement('div') ? ? ? //<div></div>

? ? ? ? ? ?document.createTextNode('元素一')

? ? ? ? 添加dom節點

? ? ? ? ? ?父節點.appendChild(子節點) ?增加節點

? ? ? ? ? ?父節點.insertBefore(新節點，原子節點) ?插入節點

? ? ? ? 刪除節點

? ? ? ? ? ?父節點.removeChild（子節點）

? ? ? ? ? ?節點.remove()

? ? ? ? 替換節點

? ? ? ? ? ? 父節點.replaceChild(新節點，原節點)

? ? ? ? 克隆節點

? ? ? ? ? 節點.cloneNode()

? ? ? ? ? ? ? ?true|falase

? ? ? ? ? ? ? ?=>返回克隆的新節點

<body>
    <div class="root"></div>
    <!-- <button class="">添加節點</button> -->
    <button class="removeBtn">刪除節點</button>
    <button class="replaceBtn">替換節點</button>
    <button class="cloneBtn">克隆節點</button>
    <script>
        function test1() {
            //1. 創建節點
            var pEle = document.createElement('p')//<p></p>
            //    pEle.innerHTML='元素一'
            var textNode = document.createTextNode('元素一')
            pEle.appendChild(textNode)//增加一個文本內容為元素一的節點
            // console.log(textNode)


            //2. 添加節點
            var divEle = document.querySelector('.root')
            // divEle.appendChild(pEle)
            // console.log(divEle)
            var oldPEle = divEle.firstElementChild
            divEle.insertBefore(pEle, oldPEle)
        }
        test1()

        function test2() {
            var divEle = document.querySelector('.root')
            var oldPEle = divEle.firstElementChild
            // divEle.removeChild(oldPEle)
            oldPEle.remove()
        }
        // 刪除節點
        var removeBtn = document.querySelector('.removeBtn')
        removeBtn.onclick = function () {
            test2()
        }

        //   替換節點
        var replaceBtn = document.querySelector('.replaceBtn')
        replaceBtn.onclick = function () {
            var h2Ele = document.createElement('h2')
            h2Ele.innerHTML = '標題'//<h2>標題</h2>
            var divEle = document.querySelector('.root')
            var pEle = document.querySelector('.root>p')
            divEle.replaceChild(h2Ele, pEle)
        }
        // 克隆節點
        var cloneBtn = document.querySelector('.cloneBtn')
        cloneBtn.onclick = function () {
            var divEle=document.querySelector('.root')
            var newDivEle = divEle.cloneNode(true)
            // 添加body下
            document.body.appendChild(newDivEle)

        }

    </script>
</body>

五、元素偏移量

offsetLeft 和 offsetTop

?offsetWidth 和 offsetHeight

<style>
        *{
            margin: 0;
            padding:0;
        }
        div{
            width: 400px;
            height: 400px;
            background-color: skyblue;
            margin: 100px;
            padding: 50px;
            position: relative;
        }
        div p{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
    <script>
        function test1(){
            var pEle=document.querySelector('p')
            console.log('pEle.offsetTop',pEle.offsetTop)
            console.log('pEle.offsetLeft',pEle.offsetLeft)
       }
       test1()
    </script>

六、獲取元素尺寸

offsetWidth = 內容width + padding + border
clientWidth = 內容width + padding
window.getComputedStyle(divEle).width = ?內容width

    <style>
        *{
            padding:0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            padding: 20px;
            margin: 100px;
            border:10px solid palegreen;
            background-color:skyblue;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        function test1(){
            var div=document.querySelector('div')
            console.log('width:',window.getComputedStyle(div).width)
            console.log('clientwidth：',div.clientWidth)//內容+padding
            console.log('offsetWidth:',div.offsetWidth) //內容+padding+border

        }
        test1()
    </script>

七、toList 1.0和2.0

toList1.0

<body>
    <div class="container">
        <input type="text" placeholder="請輸入內容"><button>確定</button>
        <ul></ul>
    </div>

    <script>
        /*
          1.詳細描述需求
             點擊確定按鈕，獲取輸入框內容，顯示到ul節點下
              分析:復雜問題簡單化
                1.綁定點擊事件
                2.獲取輸入框內容
                3.創建li子節點，輸入框作用子節點文本內容，追加給ul
        
        */

        var btn = document.querySelector('button')
        btn.onclick = function () {

            // 獲取輸入框內容
            var inputEle = document.querySelector('input')
            var inputValue = inputEle.value
            //    3.創建li子節點，輸入框作用子節點文本內容，追加給ul
            var liEle = document.createElement('li')
            liEle.innerHTML = inputValue  //<li>css</li>

            // 4.追加元素
            var ulEle = document.querySelector('ul')
            ulEle.appendChild(liEle)

            // 5.清空內容
            inputEle.value = ''

            // 綁定刪除事件
            onDelete()

        }

        //分析：遍歷所有里綁定點擊事件，刪除當親點擊的元素
        function onDelete() {
            var liEles = document.querySelectorAll('ul>li')
            for (var i=0; i < liEles.length; i++) {
                var liEle = liEles[i]  //li元素

                // 綁定事件
                liEle.onclick = function () {
                    // 刪除當前點擊的元素
                    // this關鍵字：當前點擊的元素節點對象
                    this.remove()
                }
            }
        }


    </script>

</body>

toList2.0（重要?。。。?/strong>

<body> <div class="container"> <input type="text" placeholder="請輸入內容"><button>確定</button> <ul></ul> </div> <script> /* toList應用2.0版本 1.0節點操作了解 2.0數據操作重點 */ var arr=['html','css'] /* 數據操作--實現列表遍歷數組，拼接字符串，將字符串作用內容設置給顯示元素點擊確定按鈕，獲取輸入框內容，添加數組 */ function showList(){ var liArr=arr.map(function(item,index){ return`<li data-index="${index}">${item}</li>` }) var liStr=liArr.join('') var ulEle=document.querySelector('ul') ulEle.innerHTML=liStr onDelete()//綁定刪除事件 } // 刪除元素 function onDelete(){ var liEles=document.querySelectorAll('ul>li') // 循環遍歷所有li綁定事件 for(var i=0;i<liEles.length;i++){ var liEle=liEles[i] liEle.onclick=function(){ // 刪除數據 var index=this.dataset.index arr.splice(index,1) showList()//刷新 } } } // 添加元素 var btn=document.querySelector('button') btn.onclick=function(){ var inputEle=document.querySelector('input') var inputValue=inputEle.value arr.push(inputValue) inputEle.value=''//清空輸入框 showList()//刷新 } showList()//初始化執行 </script> </body>

原文鏈接：https://blog.csdn.net/qq_56756602/article/details/126579666

上一篇：MQTT - 消息隊列遙測傳輸協議

下一篇：使用Angular FormBuilder初始化新建Form

相關推薦

2022-09-20 Python中類的mro與繼承關系詳解_python

2022-03-20 Android自動攔截與接聽功能APK黑白名單_Android

2023-03-26 React性能優化的實現方法詳解_React

2022-08-26 C++宏函數和內聯函數的使用_C 語言

2023-04-21 numpy.insert()的具體使用方法_python

2022-06-22 android實現注冊登錄程序_Android

2022-11-24 React?HOC高階組件深入講解_React

2022-08-14 Python基礎教程之pip的安裝和卸載_python

欄目分類

Python教程

織夢教程

前端文檔

PHP教程

電腦知識

服務器教程

Mysql教程

Java教程

軟件教程

最近更新

window11 系統安裝 yarn

超詳細win安裝深度學習環境2025年最新版（

Linux 中運行的top命令怎么退出？

MySQL 中decimal 的用法？存儲小

get 、set 、toString 方法的使

@Resource和 @Autowired注解

Java基礎操作-- 運算符，流程控制 Flo

1. Int 和Integer 的區別，Jav

spring @retryable不生效的一種

Spring Security之認證信息的處理

Spring Security之認證過濾器

Spring Security概述快速入門

Spring Security之配置體系

【SpringBoot】SpringCache

Spring Security之基于方法配置權

redisson分布式鎖中waittime的設

maven:解決release錯誤：Artif

restTemplate使用總結

Spring Security之安全異常處理

MybatisPlus優雅實現加密？

Spring ioc容器與Bean的生命周期。

【探索SpringCloud】服務發現-Nac

Spring Security之基于HttpR

Redis 底層數據結構-簡單動態字符串（SD

arthas操作spring被代理目標對象命令

Spring中的單例模式應用詳解

聊聊消息隊列，發送消息的4種方式

bootspring第三方資源配置管理

GIT同步修改后的遠程分支

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁 編程語言 正文

DOM節點對象 、獲取節點、節點屬性、動態操作DOM節點、toList1.0/toList2.0、 元素偏移量、元素尺寸

一、DOM節點對象

二、獲取節點

三、節點屬性

四、動態操作DOM

五、元素偏移量

六、獲取元素尺寸

七、toList 1.0和2.0

toList2.0（重要?。。。?/strong>

相關推薦