摘要:派生類包含基類的所有成員,還包括自身的特有成員,由于繼承關(guān)系的存在,派生類和派生類對象訪問基類中的成員就像訪問自己的成員一樣。可以直接使用,但是派生類,仍舊無法訪問基類中的私有成員。
通過css類選取元素
html所有的元素?fù)碛衏lass屬性,該屬性會對元素進(jìn)行分組,標(biāo)識為某一組。
js中使用className屬性來保存HTML的class的屬性值
var NodeList = document.getElementById("first") close.log(NodeList.class)
盡管如此,js還定義了一個方法,即一個getElementsByClassName(),是基于class屬性值中的標(biāo)識符來選取成組的文檔元素
還有一個類似的getElementsByTagName()的方法也是獲取一個組,返回的是一組的內(nèi)容即NodeList。返回的是類數(shù)組。
一個使用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的元素
一個兼容,瀏覽器根據(jù)!doctype來進(jìn)行選擇怪異模式,和標(biāo)準(zhǔn)模式的,怪異模式是為了向后兼容而存在的,標(biāo)準(zhǔn)模式不是(兼容以及不太重要了,但是還要知道一點(diǎn),這是ie8的問題,但愿再過幾年直接win7也沒有了)通過css選擇器選擇元素
css樣式表可以進(jìn)行選擇,這里僅僅是一些常見的css選擇器
#nav // id = nav 的元素 div // 選擇div元素 .warning // 選擇class屬性為waring的元素 // 基于屬性值選取元素 p[lang="fr"] // 所有語言為fr的元素 *[name="x"] // 所有包含name="x"的屬性的元素 // 將選擇器進(jìn)行組合使用 span.fatal.error // 選擇class中包含fatal和error的span元素 span[lang="fr"].warning // 所有使用法語,并且class中包含warning的span元素 // 選擇器指定文檔結(jié)構(gòu) #log span // id 為log元素的后代元素中的所有的span元素 #log > span // id 為log元素的子元素中所有的span元素 body>h1:first-child // 的子元素中的第一個元素 // 選擇器組合選擇多個或者組合元素 div, #log // 所有的div元素,以及id為log的元素屬于和關(guān)系 // 正則選擇器 a[src^="https"] // 選擇src屬性為https開頭的 a[src$=".pdf"] // 匹配src屬性為.pdf結(jié)尾的元素 a[src*="ming"] // 匹配src中包含ming的元素
h5定義了一些選擇api用來通過js來選擇元素
document.querySelector("title")
選擇title元素
document.querySelectorAll("title")
會返回一個類數(shù)組的 節(jié)點(diǎn)列表
document.querySelector(":first-line")
選擇一個偽元素,在css中匹配了節(jié)點(diǎn)一部分,而不是實(shí)際元素。
其中querySelector只會返回匹配的第一個結(jié)果,querySelectorAll將會返回全部結(jié)果,返回一個類數(shù)組。
document.querySelector(":link")
返回一個頁面上未訪問的連接
document.querySelectorAll(":visited")
選擇一個已經(jīng)訪問過的,用來獲取用戶在該頁面的一部分的歷史記錄
document.all[]已經(jīng)廢棄,不在使用,所以不學(xué)習(xí)
文檔結(jié)構(gòu)和遍歷一旦從文檔中選取了一個元素,將會需要查找文檔與之在結(jié)構(gòu)上相關(guān)的部分,(即,父元素,子元素,兄弟元素)。溫帶在概念上為節(jié)點(diǎn)對象樹。瀏覽器定義了一個api將會對元素對象樹進(jìn)行遍歷
作為節(jié)點(diǎn)樹的文檔Document對象,以及Element對象和文檔中表示文本的Text對象都為Node對象,Node對象定義了一下重要的屬性。
parentNode獲取該節(jié)點(diǎn)的父節(jié)點(diǎn)
childNode只讀類型數(shù)組對象(NodeList對象),它是該節(jié)點(diǎn)的子節(jié)點(diǎn)的實(shí)時表示
firstChild, lastChild該節(jié)點(diǎn)的子節(jié)點(diǎn)中的第一個和最后一個
nextSibling,previousSibling該節(jié)點(diǎn)的兄弟節(jié)點(diǎn)中的前一個和下一個
nodeType該節(jié)點(diǎn)的類型
一些類 繼承(基類,父類,超類),派生類,子類Element
這里以c++為栗子 :基類,父類,超類,指被繼承的類,派生類,子類指繼承于基類的類,在C++中冒號表示繼承,入classA:public:B 表示派生類A從基類B繼承而來。派生類包含基類的所有成員,還包括自身的特有成員,由于繼承關(guān)系的存在,派生類和派生類對象訪問基類中的成員就像訪問自己的成員一樣。可以直接使用,但是派生類,仍舊無法訪問基類中的私有成員。C++派生類可以同時從多個基類繼承,java不允許多重繼承,當(dāng)繼承多個基類的時候,使用,運(yùn)算符將基類進(jìn)行分開。
Element是一個通用的基類,所有的Document都繼承自Element
例如
屬于一個由Element基類繼承的Document的一個節(jié)點(diǎn)
text節(jié)點(diǎn)文字內(nèi)容,即匿名文字所成的節(jié)點(diǎn)。
Comment節(jié)點(diǎn)屬于注釋的節(jié)點(diǎn)
Document 節(jié)點(diǎn)一個已經(jīng)加載好的網(wǎng)頁,并通過入口來操作網(wǎng)頁的內(nèi)容
DocumentType節(jié)點(diǎn)一個聲明節(jié)點(diǎn)
DocumentFragment 節(jié)點(diǎn)表示一個沒有父級文件的最小文檔對象。它被當(dāng)做一個輕量版的 Document 使用
nodeValuetext節(jié)點(diǎn)或者Comment節(jié)點(diǎn)文本內(nèi)容
nodeName元素的標(biāo)簽名,以大寫輸出
一個栗子hello word
控制臺輸入
document.childNodes[1].childNodes[2].childNode[0]
返回
#text
表示
之前的導(dǎo)致?lián)Q行符
該html
hello word
繼續(xù)重新加載,重新輸入
document.childNodes[1].childNodes[1] #text
繼續(xù)去掉唯一的換行符
hello word
繼續(xù)在控制臺輸入
document.childNodes[1].childNodes[1] ?…??
返回body
說明是換行符的問題導(dǎo)致
https://stackoverflow.com/que...
https://stackoverflow.com/que...
將文檔看成Element對象樹,忽視部分文檔,text和comment文檔(回車,空格,以及注釋節(jié)點(diǎn))
Element的children屬性第一部分是Element(通用基類)的children屬性,類似于childNodes屬于一個NodeList對象,不同的是children列表只包含Element對象,text和Comment節(jié)點(diǎn)沒有children屬性,任何的Element的parentNode(父節(jié)點(diǎn))都是另一個Element,或者是樹根的Document節(jié)點(diǎn)
Element的屬性firstElementChild,lastElementChild
類似firstChild和lastChild,只代表子Element
nextElementSibling,previousElementSibling
類似的nextSibling和previousSibling 代表兄弟節(jié)點(diǎn)
childElementCount
子元素的數(shù)量,和children。length的值相等
www.iming.info
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/96622.html
摘要:表示的是滿足第一個選擇器的前提下,從它匹配到的元素后,去尋找位于同一層級,且在該元素后面的所有滿足第二個選擇器的元素。 本篇文章已授權(quán)微信公眾號 dasu_Android(大蘇)獨(dú)家發(fā)布 聲明 本系列文章內(nèi)容全部梳理自以下四個來源: 《HTML5權(quán)威指南》 《JavaScript權(quán)威指南》 MDN web docs Github:smyhvae/web 作為一個前端小白,入門跟著這四個...
摘要:希望在做所有事情之前,操作文檔。不受層級限制子選擇器在給定的父元素下匹配所有子元素。相鄰選擇器匹配所有緊接在元素后的元素。判斷當(dāng)前對象中的某個元素是否包含指定類名,包含返回,不包含返回下標(biāo)過濾器精確選出指定下標(biāo)元素獲取第個元素。 原文鏈接 http://blog.poetries.top/2016... 首先,來了解一下jQuery學(xué)習(xí)的整體思路 showImg(https://seg...
摘要:渲染引擎的概述渲染引擎的主要職責(zé)是在瀏覽器屏幕上顯示請求的頁面。中,渲染樹中的每個節(jié)點(diǎn)都被稱為的渲染器或渲染對象。坐標(biāo)系相對于根渲染器。增量只有一些渲染器以不影響整個樹的方式進(jìn)行更改。渲染器使其矩形在屏幕上無效。 到目前為止,在我們之前的JavaScript工作原理系列文章中,我們一直關(guān)注JavaScript作為一種語言,其功能,它如何在瀏覽器中執(zhí)行,如何優(yōu)化等等。 但是,當(dāng)您構(gòu)建We...
摘要:由一道面試題引發(fā)的思考從用戶輸入瀏覽器輸入到頁面最后呈現(xiàn)有哪些過程一道很常規(guī)的題目,考的是基本網(wǎng)絡(luò)原理,和瀏覽器加載,過程。所以抽出時間研究下瀏覽器渲染頁面的過程。 由一道面試題引發(fā)的思考: 從用戶輸入瀏覽器輸入url到頁面最后呈現(xiàn) 有哪些過程?一道很常規(guī)的題目,考的是基本網(wǎng)絡(luò)原理,和瀏覽器加載css,js過程。 答案大致如下: 用戶輸入U(xiǎn)RL地址 瀏覽器解析URL解析出主機(jī)名 瀏覽...
摘要:渲染樹的布局創(chuàng)建渲染器并將其添加到樹中時,它沒有位置和大小,計(jì)算這些值稱為布局。根渲染器的位置為,其尺寸與瀏覽器窗口的可見部分即的大小相同。渲染器使其在屏幕上的矩形無效,這會導(dǎo)致操作系統(tǒng)將其視為需要重新繪制并生成繪事件的區(qū)域。 這是專門探索 JavaScript 及其所構(gòu)建的組件的系列文章的第11篇。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你! 如果你錯過了前...
閱讀 1295·2021-10-08 10:04
閱讀 1922·2021-09-04 16:40
閱讀 2536·2019-08-30 13:21
閱讀 2280·2019-08-29 15:10
閱讀 2848·2019-08-29 12:35
閱讀 1189·2019-08-26 17:41
閱讀 3062·2019-08-26 17:03
閱讀 1136·2019-08-26 12:01