jacascript DOM節點獲取

来源:http://www.cnblogs.com/sspeng/archive/2017/04/16/6685822.html
-Advertisement-
Play Games

前言：這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！ getElementById() obj.getElementById(id) 該方法接收一個參數（該元素的id），若找到則返回該元素對象，若不存在則返回null； 任何HTML元素可以有一個 id 屬性， ...


前言：這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！

 

getElementById()

  • obj.getElementById(id) 該方法接收一個參數（該元素的id），若找到則返回該元素對象，若不存在則返回null；
  • 任何HTML元素可以有一個 id 屬性，在文檔中該值必須唯一；
  • 若瀏覽器中出現多個 id 名的情況，CSS樣式對所有該 id 名的元素都生效，但 javascript 腳本僅對第一個出現該 id 名的元素生效；

getElementsByTagName()

  • obj.getElementsByTagName(tagName) 方法接收一個參數，即要取得元素的標簽名，而返回的是包含0或多個元素的類數組對象 HTMLCollection。可以使用方括弧語法或 item() 方法來訪問類數組對象中的項，length 屬性表示對象中元素的數量；

getElementsByName()

  • obj.getElementsByName(name) 方法會返回帶有給定 name 特性的所有元素;
  • IE9及以下瀏覽器只支持在表單元素上使用 getElementsByName() 方法；
  • IE9及以下瀏覽器中使用 getElementsByName() 方法也會返回id屬性匹配的元素。因此，不要將 name 和 id 屬性設置為相同的值；

 

getElementsByClassName()

　　HTML5 新增了 getElementsByClassName() 方法；

　　在 javascript 中 class 是保留字，所以使用 className 屬性來保存 HTML 的 class 屬性值；

  • obj.getElementsByClassName(classaName) 方法接收一個參數，是包含一個或多個類名的字元串，返回帶有指定類的所有元素的類數組對象 HTMLCollection。傳入多個類名時，類名的先後順序不重要。與 getElementsByTagName() 類似，該方法既可以用於 HTML 文檔對象 document，也可以用於 element 元素對象；
  • IE8及以下瀏覽器不支持 getElementsByClassName();
  • 在操作 class 類名時，需要通過 className 屬性添加、刪除和替換類名。因為 className 是一個字元串，所以即使只修改字元串一部分，也必須每次都設置整個字元串的值。要從 className 字元串中刪除一個類名，需要把類名拆開，刪除不想要的那個，再重新拼成一個新字元串;

classList

  • HTML5 為所有元素添加了 classList 屬性，這個 classList 屬性是新集合類型 DOMTokenList 的實例，它有一個表示自己包含多少元素的 length 屬性，而要取得每個元素可以使用 item() 方法，也可以使用方括弧法;
  • IE9及以下瀏覽器不支持 classList 屬性；

　　classList 還有以下4個方法，我們主要用這些方法操作類名，有了 classList 屬性，className屬性基本沒有什麼用武之地了：

  1. obj.classList.add(value); 將給定的字元串值添加到列表中，沒有返回值，如果值已存在，則不添加;
  2. obj.classList.contains(value); 表示列表中是否存在給定的值，如果存在則返回true，否則返回false;
  3. obj.classList.remove(value); 從列表中刪除給定的字元串，沒有返回值；
  4. obj.classList.toggle(value); 如果列表中已經存在給定的值，刪除它並返回false；如果列表中沒有給定的值，添加它並且返回true;
        <div class="test abc"></div>
        <script>
            var oTest = document.getElementsByClassName('test')[0];
            var oTestAbc = document.getElementsByClassName('test abc')[0];
            var oAbc = document.getElementsByClassName('abc')[0];
            console.log(oTest === oTestAbc);//true
            console.log(oAbc === oTestAbc);//true
            console.log(oAbc === oTest);//true
            
            console.log(oTest.classList);//["test", "abc", value: "test abc"] 
            console.log(oTest.classList[0]);//"test" 
            console.log(typeof oTest.classList[0]);//"string" 
            console.log(oTest.classList.item(0));//"test" 
            
            //add()將給定的字元串值添加到列表中，沒有返回值，如果值已存在，則不添加;
            oTest.classList.add('def');
            console.log(oTest.classList);//["test", "abc", "def", value: "test abc def"] 
            
            //contains()表示列表中是否存在給定的值，如果存在則返回true，否則返回false;
            console.log(oTest.classList.contains('def'));//true
            console.log(oTest.classList.contains('abcde'));//false
            
            //remove()從列表中刪除給定的字元串，沒有返回值；
            oTest.classList.remove('abc');
            console.log(oTest.classList);//["test", "def", value: "test def"]
            
            //toggle()如果列表中已經存在給定的值，刪除它並返回false；如果列表中沒有給定的值，添加它並且返回true;
            console.log(oTest.classList.toggle('hello'));//true
            console.log(oTest.classList);//["test", "def", "hello", value: "test def hello"]
            console.log(oTest.classList.toggle('test'));//false
            console.log(oTest.classList);//["def", "hello", value: "def hello"]
        </script>

 

選擇器API

　　HTML5 拓展了 querySelector()、querySelectorAll() 和 matchesSelector() 這3種方法，通過 CSS選擇器 查詢DOM文檔取得元素的引用的功能變成了原生的API，解析和樹查詢操作在瀏覽器內部通過編譯後的代碼來完成，極大地改善了性能。

  • obj.querySelector(selector) 方法接收一個CSS選擇符，返回與該模式匹配的第一個元素，如果沒有找到匹配的元素，返回null。該方法既可用於文檔 document 類型，也可用於元素element 類型。IE7及以下不支持。
  • obj.querySelectorAll(selector) 接收一個CSS選擇符，返回一個類數組對象，如果沒有匹配元素，返回空的類數組對象，而不是null；IE7及以下不支持;
  • obj.matchesSelector(selector) 方法接收一個CSS選擇符參數，如果調用元素與該選擇符相匹配，返回true；否則返回false；
  • obj.matchesSelector(selector) 有相容性問題，IE9+瀏覽器支持 msMatchesSelector() 方法，firefox 支持 mozMatchesSelector() 方法，safari 和 chrome 支持webkitMatchesSelector() 方法。
        <div id="wrapper">
            <ul class="box">
                <li class="no1">第一行</li>
                <li class="no2">第二行</li>
                <li class="no3">第三行</li>
                <li class="no4">第四行</li>
                <li class="no5">第五行</li>
            </ul>
        </div>
        <script type="text/javascript">
            var oWrapper = document.querySelector('#wrapper');
            var oUl = oWrapper.querySelector('ul');
            
            var oLiNo1 = oWrapper.querySelector('.no1');
            //obj.querySelector(selector) 方法接收一個CSS選擇符，返回與該模式匹配的第一個元素，
            var oLiFirst = oWrapper.querySelector('li');
            var oFirstLi = oWrapper.querySelector('ul > li');
            console.log(oLiNo1 === oLiFirst);//true
            console.log(oLiNo1 === oFirstLi);//true
            console.log(oLiFirst === oFirstLi);//true
            console.log(oLiNo1.innerHTML , oLiFirst.innerHTML , oFirstLi.innerHTML);//第一行 第一行 第一行
            
            //obj.querySelectorAll(selector) 接收一個CSS選擇符，返回一個類數組對象
            var oWrapperAll = document.querySelectorAll('#wrapper');
            console.log(oWrapperAll);//[div#wrapper]
            console.log(oWrapperAll[0] === oWrapper);//true
            
            var oWrapperArray = oWrapperAll[0];
            var oLiFirstAll = oWrapperArray.querySelectorAll('li');
            var oLiFirstArrayNo1 = oWrapperArray.querySelectorAll('li')[0];
            console.log(oLiFirstArrayNo1 === oLiNo1);//true
            console.log(oLiFirstAll[1].innerHTML);//第二行
            
//            console.log(oWrapperArray.matchesSelector('#wrapper'));
            //TypeError: oWrapperArray.matchesSelector is not a function
            
            console.log(oWrapperArray.webkitMatchesSelector('#wrapper'));//true
            //obj.matchesSelector(selector) 有相容性問題，
            //IE9+瀏覽器支持 msMatchesSelector() 方法，
            //firefox 支持 mozMatchesSelector() 方法，
            //safari 和 chrome 支持webkitMatchesSelector() 方法。
        </script>

 

　　選擇器API使用時，需要註意的是：

  • querySelectorAll() 方法得到的類數組對象是非動態實時的，所以如果要計算長度等的實事值，最好重新獲取；當然以前的 getElementById() 之類的就沒這個毛病；
  • selector 類方法在元素上調用時，指定的選擇器仍然在整個文檔中進行匹配，然後過濾出結果集，以便它只包含指定元素的後代元素。這看起來是違反常規的，因為它意味著選擇器字元串能包含元素的祖先而不僅僅是所匹配的元素；所以如果出現後代選擇器，為了防止該問題，可以在參數中顯式地添加當前元素的選擇器；
        <div id="wrapper">
            <ul class="box">
                <li class="no1">第一行</li>
                <li class="no2">第二行</li>
                <li class="no3">第三行</li>
                <li class="no4">第四行</li>
                <li class="no5">第五行</li>
            </ul>
        </div>
        <script type="text/javascript">
            var oWrapper = document.querySelector('#wrapper');
            var oUl = oWrapper.querySelector('ul');
            
            var oLiLast = oUl.querySelector('li:last-of-type');
            var oLiAll = oUl.querySelectorAll('ul > li');
            console.log(oLiLast.innerHTML);//第五行
            console.log(oLiAll.length);//5
            
            var newLi = document.createElement('li');
            newLi.innerHTML = '新加的Li，放到最後面';
            oUl.appendChild(newLi);
            //querySelectorAll() 方法得到的類數組對象是非動態實時的；
            console.log(oLiLast.innerHTML);//第五行
            console.log(oLiAll.length);//5
            console.log(oUl.querySelector('li:last-of-type').innerHTML);//新加的Li，放到最後面
            console.log(oUl.querySelectorAll('ul > li').length);//6
        </script>
        
        
        
        <div class="wrapper">
            <div class="test1"></div>
            <div class="test2"></div>
        </div>
        <script type="text/javascript">
            var oWrapper = document.querySelector('.wrapper');
            //selector 類方法在元素上調用時，指定的選擇器仍然在整個文檔中進行匹配，然後過濾出結果集，以便它只包含指定元素的後代元素。
            //這看起來是違反常規的，因為它意味著選擇器字元串能包含元素的祖先而不僅僅是所匹配的元素
            console.log(oWrapper.querySelectorAll('div div'));//[div.test1, div.test2]
            //這句代碼我的理解是獲取oWrapper內部子孫元素中，div里嵌套的div，這裡沒有這種情況，所以應該彈出一個空數組
            
            //如果出現後代選擇器，為了防止該問題，可以在參數中顯式地添加當前元素的選擇器
            console.log(oWrapper.querySelectorAll('.wrapper div div'));//[]
            console.log(oWrapper.querySelectorAll('.wrapper div'));//[div.test1, div.test2]
        </script>

 

參考資料

　　大神的講解更清晰，他的其他隨筆也很好， http://www.cnblogs.com/xiaohuochai/p/5795796.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 博客皮膚的設計
    第一次寫博客，有點小激動。由於我的興趣方向是web前端，所以就給自己設計了個頁面。 這個頁面的主要特點就是磨砂效果，還有背景固定效果。靜止不動首先想到的就是position: fixed，只要將背景圖填滿全屏，再設置固定定位就可以了。不過要註意不能把#home當做固定背景，否則子元素也會固定，滾動條 ...
  • jacascript DOM節點——節點內容
    前言：這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！ innerHTML 在讀模式下，返回與調用元素的所有子節點(包括元素、註釋和文本節點)對應的 HTML 標記； 在寫模式下，innerHTML 會根據指定的值創建新的 DOM 樹，然後用這個 DOM 樹完全 ...
  • JQuery分頁插件封裝（源碼來自百度，自己封裝）
    最近由於項目的需要，做了一個基於JQuery的表格分頁插件封裝，部分源碼來源百度，經由自己封裝完成。 下麵是具體代碼和說明，僅供參考。第一步可以先將我的HTML，CSS，JS這三部分的代碼創建好後先運行看看，下圖是文件目錄展示。 html CSS js 好了，到了這裡如果你完成了創建並且運行可以看到 ...
  • combobox和combotree模糊查詢
    First First Second Second ...
  • HTML5新特性-多線程（Worker SharedWorker）
    There is no doubt that JavaScript是沒有多線程之說的，他只能一件事一件事的做，做完一件事再做下一件事，假如你的js要花一段比較長的時間做一件事的話，那麼瀏覽器將會卡頓一段時間，不對用戶的操作產生響應，這可咋辦呢？謝天謝地，HTML5為我們提供了實現多線程的機制，這麼好... ...
  • HTML5優勢
    難道還沒有考慮使用HTML5？ 當然我猜想你可能有自己的原因；它現在還沒有被廣泛的支持，在IE中不好使，或者你就是喜歡寫比較嚴格的XHTML代碼。HTML5是web開發世界的一次重大的改變，事實上不管你是否喜歡，它都是代表著未來趨勢。其實HTML5並不難理解和使用。我們這裡能列出許多原因為什麼現在要 ...
  • js中的函數
    一、函數定義的方式 (1)普通方式 語法： function 函數名（參數）{ 函數體 } Code: function method(){ alert("testMethod"); } method(); Code: function method(){ alert("testMethod"); ...
  • 為博客園文章中插入的代碼片段加一個運行按鈕
    博客園裡大家都分享了很多的有用知識，看到好的代碼，總想拿到手上去試一下，然後慢慢體會！如果是展示一段完整能運行的代碼，若能給讀者提供一個【運行代碼】的按鈕，就方便多了！前兩天開通了博客園的JS許可權（發郵件到[email protected]可以申請開通），今天先拿這個試了一下手，先來體驗一把吧： ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類