成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

通過css類/選擇器選取元素 文檔結(jié)構(gòu)和遍歷 元素樹的文檔

Elle / 716人閱讀

摘要：派生類包含基類的所有成員，還包括自身的特有成員，由于繼承關(guān)系的存在，派生類和派生類對(duì)象訪問基類中的成員就像訪問自己的成員一樣?？梢灾苯邮褂?，但是派生類，仍舊無法訪問基類中的私有成員。

通過css類選取元素

html所有的元素?fù)碛衏lass屬性，該屬性會(huì)對(duì)元素進(jìn)行分組，標(biāo)識(shí)為某一組。
js中使用className屬性來保存HTML的class的屬性值

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

盡管如此，js還定義了一個(gè)方法，即一個(gè)getElementsByClassName()，是基于class屬性值中的標(biāo)識(shí)符來選取成組的文檔元素
還有一個(gè)類似的getElementsByTagName()的方法也是獲取一個(gè)組，返回的是一組的內(nèi)容即NodeList。返回的是類數(shù)組。
一個(gè)使用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的元素
一個(gè)兼容，瀏覽器根據(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 // 的子元素中的第一個(gè)
元素

// 選擇器組合選擇多個(gè)或者組合元素
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")

會(huì)返回一個(gè)類數(shù)組的 節(jié)點(diǎn)列表

document.querySelector(":first-line")

選擇一個(gè)偽元素，在css中匹配了節(jié)點(diǎn)一部分，而不是實(shí)際元素。
其中querySelector只會(huì)返回匹配的第一個(gè)結(jié)果，querySelectorAll將會(huì)返回全部結(jié)果，返回一個(gè)類數(shù)組。

document.querySelector(":link")

返回一個(gè)頁面上未訪問的連接

document.querySelectorAll(":visited")

選擇一個(gè)已經(jīng)訪問過的，用來獲取用戶在該頁面的一部分的歷史記錄

document.all[]

已經(jīng)廢棄，不在使用，所以不學(xué)習(xí)

文檔結(jié)構(gòu)和遍歷

一旦從文檔中選取了一個(gè)元素，將會(huì)需要查找文檔與之在結(jié)構(gòu)上相關(guān)的部分，（即，父元素，子元素，兄弟元素）。溫帶在概念上為節(jié)點(diǎn)對(duì)象樹。瀏覽器定義了一個(gè)api將會(huì)對(duì)元素對(duì)象樹進(jìn)行遍歷

作為節(jié)點(diǎn)樹的文檔

Document對(duì)象，以及Element對(duì)象和文檔中表示文本的Text對(duì)象都為Node對(duì)象，Node對(duì)象定義了一下重要的屬性。

parentNode

獲取該節(jié)點(diǎn)的父節(jié)點(diǎn)

childNode

只讀類型數(shù)組對(duì)象（NodeList對(duì)象），它是該節(jié)點(diǎn)的子節(jié)點(diǎn)的實(shí)時(shí)表示

firstChild， lastChild

該節(jié)點(diǎn)的子節(jié)點(diǎn)中的第一個(gè)和最后一個(gè)

nextSibling，previousSibling

該節(jié)點(diǎn)的兄弟節(jié)點(diǎn)中的前一個(gè)和下一個(gè)

nodeType

該節(jié)點(diǎn)的類型

一些類 繼承（基類，父類，超類），派生類，子類
這里以c++為栗子 ：基類，父類，超類，指被繼承的類，派生類，子類指繼承于基類的類，在C++中冒號(hào)表示繼承，入classA：public：B 表示派生類A從基類B繼承而來。派生類包含基類的所有成員，還包括自身的特有成員，由于繼承關(guān)系的存在，派生類和派生類對(duì)象訪問基類中的成員就像訪問自己的成員一樣?？梢灾苯邮褂?，但是派生類，仍舊無法訪問基類中的私有成員。C++派生類可以同時(shí)從多個(gè)基類繼承，java不允許多重繼承，當(dāng)繼承多個(gè)基類的時(shí)候，使用，運(yùn)算符將基類進(jìn)行分開。
Element

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

屬于一個(gè)由Element基類繼承的Document的一個(gè)節(jié)點(diǎn)

text節(jié)點(diǎn)

文字內(nèi)容，即匿名文字所成的節(jié)點(diǎn)。

Comment節(jié)點(diǎn)

屬于注釋的節(jié)點(diǎn)

Document 節(jié)點(diǎn)

一個(gè)已經(jīng)加載好的網(wǎng)頁，并通過入口來操作網(wǎng)頁的內(nèi)容

DocumentType節(jié)點(diǎn)

一個(gè)聲明節(jié)點(diǎn)

DocumentFragment 節(jié)點(diǎn)

表示一個(gè)沒有父級(jí)文件的最小文檔對(duì)象。它被當(dāng)做一個(gè)輕量版的 Document 使用

nodeValue

text節(jié)點(diǎn)或者Comment節(jié)點(diǎn)文本內(nèi)容

nodeName

元素的標(biāo)簽名，以大寫輸出

一個(gè)栗子 



    


hello word

控制臺(tái)輸入

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ù)在控制臺(tái)輸入

document.childNodes[1].childNodes[1]
?…??

返回body
說明是換行符的問題導(dǎo)致
https://stackoverflow.com/que...
https://stackoverflow.com/que...

作為元素樹的文檔

將文檔看成Element對(duì)象樹，忽視部分文檔，text和comment文檔（回車，空格，以及注釋節(jié)點(diǎn)）

Element的children屬性

第一部分是Element（通用基類）的children屬性，類似于childNodes屬于一個(gè)NodeList對(duì)象，不同的是children列表只包含Element對(duì)象，text和Comment節(jié)點(diǎn)沒有children屬性，任何的Element的parentNode（父節(jié)點(diǎn)）都是另一個(gè)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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/96622.html

相關(guān)文章

  • 前端入門3-CSS基礎(chǔ)

    摘要：表示的是滿足第一個(gè)選擇器的前提下，從它匹配到的元素后，去尋找位于同一層級(jí)，且在該元素后面的所有滿足第二個(gè)選擇器的元素。 本篇文章已授權(quán)微信公眾號(hào) dasu_Android（大蘇）獨(dú)家發(fā)布 聲明 本系列文章內(nèi)容全部梳理自以下四個(gè)來源： 《HTML5權(quán)威指南》 《JavaScript權(quán)威指南》 MDN web docs Github:smyhvae/web 作為一個(gè)前端小白，入門跟著這四個(gè)...

    JackJiang 評(píng)論0 收藏0

  • jQuery筆記總結(jié)篇

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

    NoraXie 評(píng)論0 收藏0

  • JavaScript工作原理（十）：渲染引擎和優(yōu)化性能的技巧

    摘要：渲染引擎的概述渲染引擎的主要職責(zé)是在瀏覽器屏幕上顯示請(qǐng)求的頁面。中，渲染樹中的每個(gè)節(jié)點(diǎn)都被稱為的渲染器或渲染對(duì)象。坐標(biāo)系相對(duì)于根渲染器。增量只有一些渲染器以不影響整個(gè)樹的方式進(jìn)行更改。渲染器使其矩形在屏幕上無效。 到目前為止，在我們之前的JavaScript工作原理系列文章中，我們一直關(guān)注JavaScript作為一種語言，其功能，它如何在瀏覽器中執(zhí)行，如何優(yōu)化等等。 但是，當(dāng)您構(gòu)建We...

    xingqiba 評(píng)論0 收藏0

  • 瀏覽器渲染頁面過程與頁面優(yōu)化

    摘要：由一道面試題引發(fā)的思考從用戶輸入瀏覽器輸入到頁面最后呈現(xiàn)有哪些過程一道很常規(guī)的題目，考的是基本網(wǎng)絡(luò)原理，和瀏覽器加載，過程。所以抽出時(shí)間研究下瀏覽器渲染頁面的過程。 由一道面試題引發(fā)的思考： 從用戶輸入瀏覽器輸入url到頁面最后呈現(xiàn) 有哪些過程？一道很常規(guī)的題目，考的是基本網(wǎng)絡(luò)原理，和瀏覽器加載css，js過程。 答案大致如下： 用戶輸入U(xiǎn)RL地址 瀏覽器解析URL解析出主機(jī)名 瀏覽...

    djfml 評(píng)論0 收藏0

  • JavaScript是如何工作的:渲染引擎和優(yōu)化其性能的技巧

    摘要：渲染樹的布局創(chuàng)建渲染器并將其添加到樹中時(shí)，它沒有位置和大小，計(jì)算這些值稱為布局。根渲染器的位置為，其尺寸與瀏覽器窗口的可見部分即的大小相同。渲染器使其在屏幕上的矩形無效，這會(huì)導(dǎo)致操作系統(tǒng)將其視為需要重新繪制并生成繪事件的區(qū)域。 這是專門探索 JavaScript 及其所構(gòu)建的組件的系列文章的第11篇。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ 如果你錯(cuò)過了前...

    big_cat 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<