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

時間 2019-12-06

標籤經過 css 選擇器選取元素文檔結構遍歷欄目 CSS 简体版

原文原文鏈接

經過css類選取元素

html全部的元素擁有class屬性，該屬性會對元素進行分組，標識爲某一組。
js中使用className屬性來保存HTML的class的屬性值css

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

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

// 查找其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選擇器java

#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來選擇元素node

document.querySelector("title")

選擇title元素c++

document.querySelectorAll("title")

會返回一個類數組的節點列表api

document.querySelector(":first-line")

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

document.querySelector(":link")

返回一個頁面上未訪問的鏈接瀏覽器

document.querySelectorAll(":visited")

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

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/que...
https://stackoverflow.com/que...

做爲元素樹的文檔

將文檔當作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的值相等