DOM概述選取文檔元素

spademan 發布于2019-08-23 10:42 / 1700人閱讀

摘要：腳本化文檔客戶端的存在使得靜態的文檔變成了可交付式的應用概述文檔對象是表示和操作和文檔內容的基礎。舉一個栗子即可以獲取的值為的元素。通過標簽名選取元素對象的方法可用來選取指定類型。

腳本化文檔
客戶端js的存在使得靜態的html文檔變成了可交付式的web應用

DOM概述

文檔對象（DOM）是表示和操作html和xml文檔內容的基礎api。

這是標題

這是內容

將會有一個樹狀圖
我懶就不寫了。

選取文檔元素 通過ID選取元素

舉一個栗子，通過ID查找多個元素

/*
 *    函數接收任意多的字符串參數
 *    每個參數將當做元素的id傳給document.getElementById()
 *    返回一個對象，它把這些id映射到對應的Element對象
 *    如果一個id未定義，將會拋出一個Error對象
 */
function getElements(/*ids...*/) {
    var elements = {};    // 開始是一個空map映射對象
    for (var i = 0; i < arguments.length; i++) {    // 循環每個參數
        var id = arguments[i];
        var elt = document.getElementById(id);    // 進行查找元素
        if (elt == null)
            throw new Error("No element with id:" + id);    // 拋出異常
        elements[id] = elt;    // 完成映射關系
    };
    return elements;
};

通過名字選取元素

有些html標簽會有name元素，區別于id，name屬性的值不必是唯一的，多個元素可能存在相同的名字。
舉一個栗子

var radiobuttons = document.getElementsByname("favorite_cole");

即可以獲取name的值為

favorite_cole

的元素。

通過標簽名選取元素

Document 對象的getElementByTagName()方法可用來選取指定類型。所有的html元素。
舉一個栗子，選取所有包含span元素的對象

var spans = document.getElementsByTagName("h3")

將會返回一個NodeList對象

var firstspara = document.getElementsByTagName("p")   // 選取所有的p元素的，返回一個所有p元素的對象

console.log(firstspara[0]); // 返回第一個元素

查找第一個p元素里的span元素

var firstpara = document.getElementsByTagName("p");
firstpara[0].getElementsByTagName("span");

這樣能獲取第一個p元素里的所有的span元素
另外document還有兩個屬性，分別是特殊的body，以及head元素，這兩個元素如果源代碼未包含，其瀏覽器會隱式的創建他們，以及documentElement指代文檔的根元素。html中，總是為html元素

節點列表和html集合

getElementsByName()以及getElementsByTagName()都會返回NodeList對象

Nodelist 對象 ： 屬于只讀的類數組對象（擁有數組的屬性，并且其length會有js解釋器自動進行維護，并且可以進行折斷）可以對NodeList類數組對象可以進行循環迭代，得出所有的節點。

對NodeLsit對象進行循環迭代

// 實現一個將所有的image進行全部隱藏
for (var i = 0; i < document.getElementsByTagName("img").length; i++ ) {
    document.getElementsByTagName("img")[0].style.display = "none";        // 設置其css為的display的屬性值為none
};

返回值為設置的style 為none

不能再類數組上調用數組的方法，不過可以通過原型鏈來完成間接的調用

var content = Array.prototype.map.call(document.getElementsByTagName("p"),
    (e) => {
        return e.innerHTML;    // 返回序列化過的html代碼，該方法繼承自Element，所有Document對象的方法都基于其，因為同樣是document繼承來的，所以具有innerHTML方法
    }
)  // 創建一個數組，并把該數組的元素傳入回調函數中進行處理

注意，保存的不是快照，伴隨著html中的DOM的更新，屬于實時操作的，這一點灰常有用
如果在一個沒有div中的有一個該方法，如果頁面動態加載進的div元素，其中的length會自動更新加1，也會自動成為NodeLsit成員，
迭代刪除一個元素

var snapshot = Array.prototype.slice.call(document.getElementsByTagName("img"), 0)    // 使用淺拷貝，生成副本對副本進行操作

再次使用

Array.prototype.splice()

執行刪除操作，但是其真正的節點不會刪除，因為是一個副本
下面是通過css選取元素

云服務器 GPU云服務器 JavaScipt選取元素 DOM元素修改DOM元素 dom獲取元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96604.html

Xpath、Jsoup、Xsoup(我的Java爬蟲之二)

摘要：它最主要的目的是為了在或文檔節點樹中定位節點所設計。選取所有擁有名為的屬性的元素。選取元素的所有元素，且其中的元素的值須大于。實例路徑表達式結果選取元素的所有子元素。如在加載文件的時候發生錯誤，將拋出，應作適當處理。從Xpath說起什么是Xpath XPath是W3C的一個標準。它最主要的目的是為了在XML1.0或XML1.1文檔節點樹中定位節點所設計。XPath是一種表達式語言，...

Big_fat_cat 2019-08-15 17:48 評論0 收藏0
jQuery筆記總結篇

摘要：希望在做所有事情之前，操作文檔。不受層級限制子選擇器在給定的父元素下匹配所有子元素。相鄰選擇器匹配所有緊接在元素后的元素。判斷當前對象中的某個元素是否包含指定類名，包含返回，不包含返回下標過濾器精確選出指定下標元素獲取第個元素。原文鏈接 http://blog.poetries.top/2016... 首先，來了解一下jQuery學習的整體思路 showImg(https://seg...

NoraXie 2019-08-22 10:39 評論0 收藏0
你所不了解的querySelector

摘要：而事實上，它會在的子代元素中匹配查詢條件。它們并不會相對于任何特定的元素，甚至不會相對于調用的元素。偽選擇器是相對當前作用域進行匹配的。它們是和的替代方法，存在父節點上。了解像這些坑很重要，因為從它們的行為中很難了解它們的實質特性。原文鏈接地址：http://blog.lxjwlt.com/front-...筆者整理筆記： 1.API介紹先看看MDN上怎么介紹這個API的：概述返回...

freewolf 2019-08-20 11:39 評論0 收藏0
jQuery 入門詳解（一）

摘要：前面也花了不少時間，專門介紹了基礎這一塊，從最基礎的講起，再到以及特效。對象，文檔對象模型，每一份都可以表示成一棵樹。注意選擇器返回的是對象。名稱用法描述相當于，子類選擇器相當于后代選擇器查找兄弟節點，不包括自己本身。 showImg(https://segmentfault.com/img/remote/1460000013677116?w=1920&h=1080); jQuery ...

only_do 2019-08-22 15:20 評論0 收藏0
CSS選擇器概述

摘要：常用于鏈接描點上用戶行為選擇器選擇匹配的元素，且匹配元素被激活。，選擇的是奇數項，而使用選擇的卻是偶數項否定偽類選擇器選擇器功能描述匹配所有除元素外的元素屬性選擇器語法選擇器功能描述用于選取帶有指定屬性的元素。 CSS選擇器概述一.CSS3 選擇器分類 showImg(https://segmentfault.com/img/bVbbO88?w=805&h=422); 二.選擇器語法...

wangjuntytl 2019-08-29 15:37 評論0 收藏0