資訊專欄INFORMATION COLUMN
摘要：腳本化文檔客戶端的存在使得靜態(tài)的文檔變成了可交付式的應(yīng)用概述文檔對象是表示和操作和文檔內(nèi)容的基礎(chǔ)。舉一個栗子即可以獲取的值為的元素。通過標(biāo)簽名選取元素對象的方法可用來選取指定類型。
腳本化文檔
客戶端js的存在使得靜態(tài)的html文檔變成了可交付式的web應(yīng)用
文檔對象（DOM）是表示和操作html和xml文檔內(nèi)容的基礎(chǔ)api。
這是標(biāo)題
這是標(biāo)題
這是內(nèi)容
將會有一個樹狀圖
我懶就不寫了。
舉一個栗子，通過ID查找多個元素
/*
* 函數(shù)接收任意多的字符串參數(shù)
* 每個參數(shù)將當(dāng)做元素的id傳給document.getElementById()
* 返回一個對象，它把這些id映射到對應(yīng)的Element對象
* 如果一個id未定義，將會拋出一個Error對象
*/
function getElements(/*ids...*/) {
var elements = {}; // 開始是一個空map映射對象
for (var i = 0; i < arguments.length; i++) { // 循環(huán)每個參數(shù)
var id = arguments[i];
var elt = document.getElementById(id); // 進(jìn)行查找元素
if (elt == null)
throw new Error("No element with id:" + id); // 拋出異常
elements[id] = elt; // 完成映射關(guān)系
};
return elements;
};
通過名字選取元素
有些html標(biāo)簽會有name元素，區(qū)別于id，name屬性的值不必是唯一的，多個元素可能存在相同的名字。
舉一個栗子
var radiobuttons = document.getElementsByname("favorite_cole");
即可以獲取name的值為
favorite_cole
的元素。
通過標(biāo)簽名選取元素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元素，這兩個元素如果源代碼未包含，其瀏覽器會隱式的創(chuàng)建他們，以及documentElement指代文檔的根元素。html中，總是為html元素
getElementsByName()以及getElementsByTagName()都會返回NodeList對象
Nodelist 對象 ： 屬于只讀的類數(shù)組對象（擁有數(shù)組的屬性，并且其length會有js解釋器自動進(jìn)行維護(hù)，并且可以進(jìn)行折斷）可以對NodeList類數(shù)組對象可以進(jìn)行循環(huán)迭代，得出所有的節(jié)點。
對NodeLsit對象進(jìn)行循環(huán)迭代
// 實現(xiàn)一個將所有的image進(jìn)行全部隱藏
for (var i = 0; i < document.getElementsByTagName("img").length; i++ ) {
document.getElementsByTagName("img")[0].style.display = "none"; // 設(shè)置其css為的display的屬性值為none
};
返回值為設(shè)置的style 為none
不能再類數(shù)組上調(diào)用數(shù)組的方法，不過可以通過原型鏈來完成間接的調(diào)用
var content = Array.prototype.map.call(document.getElementsByTagName("p"),
(e) => {
return e.innerHTML; // 返回序列化過的html代碼，該方法繼承自Element，所有Document對象的方法都基于其，因為同樣是document繼承來的，所以具有innerHTML方法
}
) // 創(chuàng)建一個數(shù)組，并把該數(shù)組的元素傳入回調(diào)函數(shù)中進(jìn)行處理
注意，保存的不是快照，伴隨著html中的DOM的更新，屬于實時操作的，這一點灰常有用
如果在一個沒有div中的有一個該方法，如果頁面動態(tài)加載進(jìn)的div元素，其中的length會自動更新加1，也會自動成為NodeLsit成員，
迭代刪除一個元素
var snapshot = Array.prototype.slice.call(document.getElementsByTagName("img"), 0) // 使用淺拷貝，生成副本對副本進(jìn)行操作
再次使用
Array.prototype.splice()
執(zhí)行刪除操作，但是其真正的節(jié)點不會刪除，因為是一個副本
下面是通過css選取元素
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96604.html
摘要：它最主要的目的是為了在或文檔節(jié)點樹中定位節(jié)點所設(shè)計。選取所有擁有名為的屬性的元素。選取元素的所有元素，且其中的元素的值須大于。實例路徑表達(dá)式結(jié)果選取元素的所有子元素。如在加載文件的時候發(fā)生錯誤，將拋出，應(yīng)作適當(dāng)處理。 從Xpath說起 什么是Xpath XPath是W3C的一個標(biāo)準(zhǔn)。它最主要的目的是為了在XML1.0或XML1.1文檔節(jié)點樹中定位節(jié)點所設(shè)計。XPath是一種表達(dá)式語言，...
摘要：希望在做所有事情之前，操作文檔。不受層級限制子選擇器在給定的父元素下匹配所有子元素。相鄰選擇器匹配所有緊接在元素后的元素。判斷當(dāng)前對象中的某個元素是否包含指定類名，包含返回，不包含返回下標(biāo)過濾器精確選出指定下標(biāo)元素獲取第個元素。 原文鏈接 http://blog.poetries.top/2016... 首先，來了解一下jQuery學(xué)習(xí)的整體思路 showImg(https://seg...
摘要：而事實上，它會在的子代元素中匹配查詢條件。它們并不會相對于任何特定的元素，甚至不會相對于調(diào)用的元素。偽選擇器是相對當(dāng)前作用域進(jìn)行匹配的。它們是和的替代方法，存在父節(jié)點上。了解像這些坑很重要，因為從它們的行為中很難了解它們的實質(zhì)特性。 原文鏈接地址：http://blog.lxjwlt.com/front-...筆者整理筆記： 1.API介紹 先看看MDN上怎么介紹這個API的：概述返回...
摘要：前面也花了不少時間，專門介紹了基礎(chǔ)這一塊，從最基礎(chǔ)的講起，再到以及特效。對象，文檔對象模型，每一份都可以表示成一棵樹。注意選擇器返回的是對象。名稱用法描述相當(dāng)于，子類選擇器相當(dāng)于后代選擇器查找兄弟節(jié)點，不包括自己本身。 showImg(https://segmentfault.com/img/remote/1460000013677116?w=1920&h=1080); jQuery ...
摘要：常用于鏈接描點上用戶行為選擇器選擇匹配的元素，且匹配元素被激活。，選擇的是奇數(shù)項，而使用選擇的卻是偶數(shù)項否定偽類選擇器選擇器功能描述匹配所有除元素外的元素屬性選擇器語法選擇器功能描述用于選取帶有指定屬性的元素。 CSS選擇器概述 一.CSS3 選擇器分類 showImg(https://segmentfault.com/img/bVbbO88?w=805&h=422); 二.選擇器語法...
閱讀 1573·2023-04-26 02:29
閱讀 3067·2021-10-11 10:58
閱讀 2905·2021-10-08 10:16
閱讀 3165·2021-09-24 09:47
閱讀 1574·2019-08-29 16:56
閱讀 2725·2019-08-29 11:03
閱讀 2011·2019-08-26 13:35
閱讀 3180·2019-08-26 13:34
