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

學無先后，達者為師

網站首頁 編程語言 正文

DOM簡介及獲取元素方法屬性總結

作者：1900's 88 keys 更新時間： 2022-01-16 編程語言

什么是DOM

DOM，全稱Documnet Object Model文檔 對象 模型。

文檔樹

在這里插入圖片描述

獲取元素節點（通過document對象調用）

瀏覽器為我們提供的文檔節點對象Documne,這個對象是window屬性，可以直接在頁面中直接使用，文檔節點代表的是整個網頁##

getElementByid()

  • getElementByid("id")通過根據ID屬性獲取一個節點元素
    <div id="div">我是div</div>
    <script>
        var div = document.getElementById("div");
        console.log(div);
    </script>

在這里插入圖片描述

getElementsByTagName()

  • getElementsByTagName("Element標簽名")通過標簽名獲取一組元素節點對象
  • 這個方法會返回一個類數組對象，所有查詢到的元素都會封裝到對象中
  • 可以通過下標的形式訪問里面的內容
  • 通過length方法會返回偽數組的長度
    <ul>
        <li>江流</li>
        <li>心猿</li>
        <li>木龍</li>
        <li>刀圭</li>
        <li>意馬</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName("li");//獲取所有的li
        console.log(lis);//打印lis
        console.log(lis.length);//打印lis的長度    
    </script>

在這里插入圖片描述

getElementsByName()

  • getElementsByName("name")通過name屬性獲取一組元素節點對象
  • 這個方法會返回一個類數組對象，所有查詢到的元素都會封裝到對象中
  • 可以通過下標的形式訪問里面的內容
  • 通過length方法會返回偽數組的長度
    <div name="xiyou">西游記</div>
    <ul>
        <li name="xiyou">江流</li>
        <li name="xiyou">心猿</li>
        <li name="xiyou">木龍</li>
        <li name="xiyou">刀圭</li>
        <li name="xiyou">意馬</li>
    </ul>
    <script>
        var xiyous = document.getElementsByName("xiyou");//獲取所有name="xiyou"的元素
        console.log(xiyous);//打印xiyous
        console.log(xiyous.length);//打印xiyous的長度
    </script>

在這里插入圖片描述

事件

事件，就是用戶和瀏覽器之間的交互行為，比如：點擊按鈕，鼠標移動，關閉窗口。
可以在事件對應屬性中設置js代碼，當事件觸發時，這些代碼將會執行。

常見的 HTML 事件

onclick

  • 用戶點擊了HTML元素
<button id="button" onclick="alert('點我干嘛？')">我是button</button>

在這里插入圖片描述

onmouseover

  • 用戶把鼠標移動到 HTML 元素上
<button id="button" onmouseover="alert('點我干嘛？')">我是button</button>

在這里插入圖片描述

onmouseout

  • 用戶把鼠標移開 HTML 元素

onchange

  • HTML 元素已被改變

onkeydown

  • 用戶按下鍵盤按鍵

onload

  • 瀏覽器已經完成頁面加載
  • 通常用為window綁定一個onload事件,就可以把js代碼放在里面，然后把script代碼放在在head標簽前面，便于維護和管理代碼。
 window.onload = function(){
		代碼塊...
	};

綁定事件

  • 可以為HTML元素的對應事件綁定處理函數的形式來響應事件
  • 這樣當事件被觸發時，其對應的函數將會被調用
    例如以上面的onclick為例：
 <button id="btn">點我</button>
 <script>
     var btn = document.getElementById("btn");//獲取按鈕對象
     console.log(btn);
     btn.onclick = function () {//綁定單擊事件
         alert('叫你點你就點，見不見呀？');
     }
 </script>

在這里插入圖片描述

獲取元素節點的子節點（通過具體的元素節點調用）

getElementsByTagName()

  • getElementsByTagName("子元素名") ，這是一個方法,該方法通過具體元素節點調用時，會返回當前節點的指定標簽名后代節點。（注意：需要分清上面被document調用時的區別）
    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龍</li>
        <li >刀圭</li>
        <li >意馬</li>
    </ul>
    <script>
        var xiyou = document.getElementById("xiyou");//獲取id="xiyou"的ul元素
        
        var lis = xiyou.getElementsByTagName('li');//通過ul元素調用查詢li
        console.log(lis);//打印lis
        console.log(lis.length);//打印lis的長度
    </script>

在這里插入圖片描述

childNodes

  • childNodes是一個屬性，表示當前節點的所有子節點
  • childNodes屬性會獲取包括文本節點在內的所有節點
  • 根據DOM標準標簽間空白也會當成文本節點
  • 在IE8及以下的瀏覽器中，不會將空白文本當成子節點
    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龍</li>
        <li >刀圭</li>
        <li >意馬</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//獲取id="xiyou"的ul元素
        
        var ulChilds = ul.childNodes;//查詢ul下所有的子節點
        console.log(ulChilds);//打印ulChilds
        console.log(ulChilds.length);//打印ulChilds的長度
    </script>

在這里插入圖片描述

children

  • children屬性可以獲取當前元素的所有子元素（注意：是子元素，上面childNodes是子節點）
  • 可以彌補上面childNodes的缺點，即不包括空白文本 
    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龍</li>
        <li >刀圭</li>
        <li >意馬</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//獲取id="xiyou"的ul元素
        
        var ulChilds = ul.children;//查詢ul下所有的子元素
        console.log(ulChilds);//打印ulChilds
        console.log(ulChilds.length);//打印ulChilds的長度
    </script>

在這里插入圖片描述

firstChild

  • firstChild是一個屬性，表示當前節點的第一個子節點(包括空白文本)
    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龍</li>
        <li >刀圭</li>
        <li >意馬</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//獲取id="xiyou"的ul元素
        
        var ulFirstChild = ul.firstChild;//查詢ul下第一個子節點
        console.log(ulFirstChild);//打印ulFirstChild
    </script>

在這里插入圖片描述

firstElementChild

  • firstElementChild屬性獲取當前元素的第一個子元素（不包含空白文本）
  • 不支持IE8及以下的瀏覽器
    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龍</li>
        <li >刀圭</li>
        <li >意馬</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//獲取id="xiyou"的ul元素
        
        var ulfirstElementChild = ul.firstElementChild;//查詢ul下第一個子元素點
        console.log(ulfirstElementChild);//打印ulfirstElementChild
    </script>

在這里插入圖片描述

lastChild

  • lastChild是一個屬性,表示當前節點的最后一個子節點(包括空白文本)
    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龍</li>
        <li >刀圭</li>
        <li >意馬</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//獲取id="xiyou"的ul元素
        
        var ullastChild = ul.lastChild;//查詢ul下最后一個子節點
        console.log(ullastChild);//打印ullastChild
    </script>

在這里插入圖片描述

lastElementChild

  • lastElementChild 屬性獲取當前元素的最后一個子元素（不包含空白文本）
  • 不支持IE8及以下的瀏覽器
    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龍</li>
        <li >刀圭</li>
        <li >意馬</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//獲取id="xiyou"的ul元素
        
        var ullastElementChild = ul.lastElementChild;//查詢ul下最后一個子元素點
        console.log(ullastElementChild);//打印ullastElementChild
    </script>

在這里插入圖片描述

獲取父節點和兄弟節點（通過具體的節點調用）

parentNode

  • parentNode屬性，查詢當前節點的父元素
    <ul>
        <li >江流</li>
        <li id="monkey">心猿</li>
        <li >木龍</li>
        <li >刀圭</li>
        <li >意馬</li>
    </ul>
    <script>
        var li = document.getElementById("monkey");//獲取id="monkey"的元素
        
        var liParen = li.parentNode;//查詢li的父節點
        console.log(liParen);//打印liParen
     </script>

·

previousSibling

  • previousSibling屬性，查詢當前節點的前一個兄弟節點(包括空白文本節點)
    <ul>
        <li >江流</li>
        <li id="monkey">心猿</li>
        <li >木龍</li>
        <li >刀圭</li>
        <li >意馬</li>
    </ul>
    <script>
        var li = document.getElementById("monkey");//獲取id="monkey"的元素
        
        var liPrevious = li.previousSibling;//查詢li的前一個節點
        console.log(liPrevious);//打印liPrevious
    </script>

在這里插入圖片描述

previousElementSibling

  • previousElementSibling屬性，查詢當前節點的前一個兄弟元素(不包括空白文本)
    <ul>
        <li >江流</li>
        <li id="monkey">心猿</li>
        <li >木龍</li>
        <li >刀圭</li>
        <li >意馬</li>
    </ul>
    <script>
        var li = document.getElementById("monkey");//獲取id="monkey"的元素
        
        var liPrevious = li.previousElementSibling;//查詢li的前一個元素
        console.log(liPrevious);//打印liPrevious
    </script>

在這里插入圖片描述

nextSibling

  • nextSibling屬性，查詢當前節點的后一個兄弟節點(包括空白文本)
    <ul>
        <li >江流</li>
        <li id="monkey">心猿</li>
        <li >木龍</li>
        <li >刀圭</li>
        <li >意馬</li>
    </ul>
    <script>
        var li = document.getElementById("monkey");//獲取id="monkey"的元素
        
        var liNext = li.nextSibling;//查詢li的前一個節點
        console.log(liNext);//打印liNext
    </script>

在這里插入圖片描述

nextElementSibling

  • nextElementSibling屬性，查詢當前節點的后一個兄弟節點(不包括空白文本)
    <ul>
        <li >江流</li>
        <li id="monkey">心猿</li>
        <li >木龍</li>
        <li >刀圭</li>
        <li >意馬</li>
    </ul>
    <script>
        var li = document.getElementById("monkey");//獲取id="monkey"的元素
        
        var liNext = li.nextElementSibling;//查詢li的后一個元素
        console.log(liNext);//打印liNext
    </script>

在這里插入圖片描述

HTML5新增的獲取方式（通過document對象調用）

querySelector()

  • querySelector("選擇器名")方法用于返回指定選擇器的第一個元素對象
  • IE8支持該方法，IE7及以下不支持
    <ul>
        <li class="xiyou" >江流</li>
        <li id="monkey">心猿</li>
        <li class="xiyou" >木龍</li>
        <li class="xiyou" >刀圭</li>
        <li class="xiyou" >意馬</li>
    </ul>
    <script>
        var liId = document.querySelector("#monkey");//獲取id="monkey"的元素
        var liClass = document.querySelector(".xiyou")//獲取第一個class="xiyou"的元素
        var liElement = document.querySelector("li")//獲取第一個li的元素
        console.log("通過ID選擇器：",liId);
        console.log("通過Class選擇器：",liClass);
        console.log("通過Element選擇器：",liElement);
    </script>

在這里插入圖片描述

querySelectorAll()

  • querySelector("選擇器名")方法用于返回指定選擇器的所有元素對象集合
  • 該方法會返回一個類數組對象，所有查詢到的元素都會封裝到對象中
    • IE8支持該方法，IE7及以下不支持
    <ul>
        <li class="xiyou" >江流</li>
        <li id="monkey">心猿</li>
        <li class="xiyou" >木龍</li>
        <li class="xiyou" >刀圭</li>
        <li class="xiyou" >意馬</li>
    </ul>
    <script>
        var liClasses = document.querySelectorAll(".xiyou")//獲取所有class="xiyou"的元素
        var liElements = document.querySelectorAll("li")//獲取所有li的元素
        console.log("通過Class選擇器：",liClasses);
        console.log("通過Element選擇器：",liElements);
    </script>

在這里插入圖片描述

getElementsByClassName()

  • getElementsByClassName("class名")方法，用于通過類名來獲取某些元素的集合
  • 該方法會返回一個類數組對象，所有查詢到的元素都會封裝到對象中
  • IE8及以下版本不支持該方法，IE8可以使用querySelectorAll()替代該方法
    <ul>
        <li class="xiyou" >江流</li>
        <li id="monkey">心猿</li>
        <li class="xiyou" >木龍</li>
        <li class="xiyou" >刀圭</li>
        <li class="xiyou" >意馬</li>
    </ul>
    <script>
        var liClasses = document.getElementsByClassName("xiyou")//獲取所有class="xiyou"的元素
        console.log("通過Class選擇器：",liClasses);
    </script>

在這里插入圖片描述

原文鏈接：https://blog.csdn.net/weixin_45660621/article/details/121514863

欄目分類
最近更新