獲取DOM節點的常用方法

阿新 • • 發佈：2018-12-21

DOM操作是為了方便程式設計師操作頁面元素。
常見的DOM節點有：
元素節點，即HTML標籤
文字節點，即標籤裡面的內容包含空格
屬性節點即標籤裡面的屬性比如 a標籤有 href href就是屬性節點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素節點</title>
</head>
<script type="text/javascript">
    window.onload=function 
(){
        var o=document.getElementById('box');
        var cs=o.childNodes;//獲取所有子節(包含屬性節點,文字節點)
        //這裡注意返回的是位元組列表  通過下標可以獲取,這裡下標是從 0開始 
        console.log(cs);//位元組列表
        console.log(cs[0]);//空格是text型別的  下標0是第一個節點 
        cs[1].innerHTML="名字";//把內容寫入第2個節點
        cs[3].style.color="red";//改變第4個節點的文字顏色 


        var fc=o.firstChild;//獲取第一個子節點
        console.log(fc);

        var d=o.lastChild;//獲取最後一個子節點
        console.log(d);
        console.log(o.parentNode);//獲取當前元素節點的父節點
        console.log(o.previousSibling);//獲取當前節點的前一個同級節點(上一個)
        console.log(o.nextSibling);//獲取當前節點的後一個同級節點（下一個）
        var i=o.previousSibling.previousSibling;//上一個的上一個    連綴 

        console.log(i);
    }
</script>
<body>
    <p></p>
    <div id="box">
        <div><a href=""></a>嘿嘿</div>
        <div><a href=""></a>哈哈哈</div>
    </div>
    <b></b>
</body>
</html>

以上執行結果
這裡寫圖片描述

操作一個節點首先要獲取到
var o=document.getElementById(‘box ‘); 存在變數o 中
總結獲取節點的所有方法：
childNodes 獲取所有子節點返回值是listNode 子節點列表通過下標獲取
firstChild 獲取當前節點的第一個節點
lastChild 獲取當前節點的最後一個節點
parentNode 獲取當前節點的父節點
previousSibling 獲取當前的節點前一個同級節點，兄弟節點（上一個）
nextSibiling 獲取當前節點後一個同級節點（下一個）

同時獲取上一個或者下一個的時候可以用連綴比如上面程式碼
var i=o.previousSibling.previousSibling; 獲取div的上一個元素節點的上一個
o的上一個節點是空格 text , text上一個是p標籤所以它是p
這裡寫圖片描述

獲取DOM節點的常用方法

獲取DOM節點的常用方法

使用jQuery操作DOM的常用方法和節點

DOM（包括獲取元素節點的方法以及獲取和設定元素節點的屬性）

JavaScript中的獲取DOM節點

vue怎麽不通過dom操作獲取dom節點

jQuery DOM節點操作方法大全

vue1和vue2獲取dom元素的方法

獲取元素節點的方法比較

通過ref來獲取DOM節點

JavaScript - DOM節點常用屬性

vue-獲取dom節點

JS獲取DOM節點

javascript-dom的常用方法

原生JS獲取DOM 節點到瀏覽器頂部的距離或者左側的距離

ionic2 獲取dom節點

在linux和windows下獲取路徑的常用方法

Jquery獲取時間的常用方法

python中日期獲取和轉換常用方法

餓了麼專案---7、ref屬性註冊節點資訊，並獲取DOM節點（1）

React 事件對象、鍵盤事件、表單事件、ref獲取dom節點、react實現類似Vue雙向數據綁定

獲取DOM節點的常用方法

相關推薦