通過css類/選擇器選取元素文件結構和遍歷元素樹的文件

mysoul8021發表於2018-08-06
CSS

通過css類選取元素

html所有的元素擁有class屬性，該屬性會對元素進行分組，標識為某一組。
js中使用className屬性來儲存HTML的class的屬性值

var NodeList = document.getElementById("first")
close.log(NodeList.class)

儘管如此，js還定義了一個方法，即一個getElementsByClassName()，是基於class屬性值中的識別符號來選取成組的文件元素
還有一個類似的getElementsByTagName()的方法也是獲取一個組，返回的是一組的內容即NodeList。返回的是類陣列。
一個使用getElementsByClassName()的例子

// 查詢其class屬性值中包含warning的所有元素
var warnings = document.getElementsByClassName("warning");
// 查詢以log命名並且含有error和fatal類的元素的所有後代
var log = document.getElementById("log");
var fatal = log.getElementByClassName("fatal error");     // 先獲取id為log，在獲取class為fatal error的元素

一個相容，瀏覽器根據！doctype來進行選擇怪異模式，和標準模式的，怪異模式是為了向後相容而存在的，標準模式不是（相容以及不太重要了，但是還要知道一點，這是ie8的問題，但願再過幾年直接win7也沒有了）

通過css選擇器選擇元素

css樣式表可以進行選擇，這裡僅僅是一些常見的css選擇器

#nav // id = nav 的元素
div // 選擇div元素
.warning // 選擇class屬性為waring的元素

// 基於屬性值選取元素
p[lang="fr"]    // 所有語言為fr的元素
*[name="x"]    // 所有包含name="x"的屬性的元素

// 將選擇器進行組合使用
span.fatal.error     // 選擇class中包含fatal和error的span元素
span[lang="fr"].warning // 所有使用法語，並且class中包含warning的span元素

// 選擇器指定文件結構
#log span     // id 為log元素的後代元素中的所有的span元素
#log > span // id 為log元素的子元素中所有的span元素
body>h1:first-child // <body>的子元素中的第一個<h1>元素

// 選擇器組合選擇多個或者組合元素
div, #log     // 所有的div元素，以及id為log的元素屬於和關係

// 正則選擇器
a[src^="https"]    // 選擇src屬性為https開頭的
a[src$=".pdf"]    // 匹配src屬性為.pdf結尾的元素
a[src*="ming"]    // 匹配src中包含ming的元素

h5定義了一些選擇api用來通過js來選擇元素

document.querySelector("title")

選擇title元素

document.querySelectorAll("title")

會返回一個類陣列的 節點列表

document.querySelector(":first-line")

選擇一個偽元素，在css中匹配了節點一部分，而不是實際元素。
其中querySelector只會返回匹配的第一個結果，querySelectorAll將會返回全部結果，返回一個類陣列。

document.querySelector(":link")

返回一個頁面上未訪問的連線

document.querySelectorAll(":visited")

選擇一個已經訪問過的，用來獲取使用者在該頁面的一部分的歷史記錄

document.all[]

已經廢棄，不在使用，所以不學習

文件結構和遍歷

一旦從文件中選取了一個元素，將會需要查詢文件與之在結構上相關的部分，（即，父元素，子元素，兄弟元素）。溫帶在概念上為節點物件樹。瀏覽器定義了一個api將會對元素物件樹進行遍歷

作為節點樹的文件

Document物件，以及Element物件和文件中表示文字的Text物件都為Node物件，Node物件定義了一下重要的屬性。

parentNode

獲取該節點的父節點

childNode

只讀型別陣列物件（NodeList物件），它是該節點的子節點的實時表示

firstChild， lastChild

該節點的子節點中的第一個和最後一個

nextSibling，previousSibling

該節點的兄弟節點中的前一個和下一個

nodeType

該節點的型別

一些類 繼承（基類，父類，超類），派生類，子類
這裡以c++為栗子 ：基類，父類，超類，指被繼承的類，派生類，子類指繼承於基類的類，在C++中冒號表示繼承，入classA：public：B 表示派生類A從基類B繼承而來。派生類包含基類的所有成員，還包括自身的特有成員，由於繼承關係的存在，派生類和派生類物件訪問基類中的成員就像訪問自己的成員一樣。可以直接使用，但是派生類，仍舊無法訪問基類中的私有成員。C++派生類可以同時從多個基類繼承，java不允許多重繼承，當繼承多個基類的時候，使用，運算子將基類進行分開。

Element

Element是一個通用的基類，所有的Document都繼承自Element
例如

<p>

屬於一個由Element基類繼承的Document的一個節點

text節點

文字內容，即匿名文字所成的節點。

Comment節點

屬於註釋的節點

<!-- 這是註釋內容 -->

Document 節點

一個已經載入好的網頁，並通過入口來操作網頁的內容

DocumentType節點

一個宣告節點

DocumentFragment 節點

表示一個沒有父級檔案的最小文件物件。它被當做一個輕量版的 Document 使用

nodeValue

text節點或者Comment節點文字內容

nodeName

元素的標籤名，以大寫輸出

一個栗子

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
hello word
</body>
</html>

控制檯輸入

document.childNodes[1].childNodes[2].childNode[0]

返回

#text

表示

<body>之前的導致換行符

該html

<!DOCTYPE html><html><head><title></title></head>
<body>hello word</body></html>

繼續重新載入，重新輸入

document.childNodes[1].childNodes[1]
#text

繼續去掉唯一的換行符

<!DOCTYPE html><html><head><title></title></head><body>hello word</body></html>

繼續在控制檯輸入

document.childNodes[1].childNodes[1]
<body style>​…​</body>​

返回body
說明是換行符的問題導致
https://stackoverflow.com/questions/45614337/what-causes-childnodes-to-return-text-instead-of-div
https://stackoverflow.com/questions/21357004/what-are-html-dom-text-elements

作為元素樹的文件

將文件看成Element物件樹，忽視部分文件，text和comment文件（回車，空格，以及註釋節點）

Element的children屬性

第一部分是Element（通用基類）的children屬性，類似於childNodes屬於一個NodeList物件，不同的是children列表只包含Element物件，text和Comment節點沒有children屬性，任何的Element的parentNode（父節點）都是另一個Element，或者是樹根的Document節點

Element的屬性

firstElementChild，lastElementChild
類似firstChild和lastChild，只代表子Element
nextElementSibling，previousElementSibling
類似的nextSibling和previousSibling 代表兄弟節點
childElementCount
子元素的數量，和children。length的值相等

部落格

www.iming.info


相關文章