第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

從頭開始編寫 getElementByName

從頭開始編寫 getElementByName

森林海 2022-01-07 10:25:24
我正在嘗試從頭開始編寫 getElementByClassName,但我不確定何時返回遞歸。這就是我想出的:  const getElementsByClassName = (nameOfClass, parent) => {  const result = []  for(let el of parent) {       // console.log(el.children)     if(el.firstElementChild != null) {       // do it again on node deeper        getElementsByClassName(nameOfClass, el.children)     }     if(el.className === nameOfClass) {        result.push(el)     }   }   // when do I want to return result?   console.log(result)   return result};問題是我每個子節(jié)點(diǎn)都有一個數(shù)組,而不是同一個數(shù)組結(jié)果中的所有內(nèi)容。我該如何解決這個問題?
查看完整描述

3 回答

?
海綿寶寶撒

TA貢獻(xiàn)1809條經(jīng)驗 獲得超8個贊

所以你試圖通過遞歸函數(shù)遍歷 DOM 樹!?


當(dāng)然,每個孩子都有自己的一組孩子。不然就不是樹了。


當(dāng)您想要返回所有匹配元素的數(shù)組時,您必須將結(jié)果與遞歸調(diào)用連接起來。


這可以工作:


const getElementsByClassName = (nameOfClass, parent) => {


  const result = []

  if (parent.className === nameOfClass) {

    result.push(parent);

  }

  for(let el of parent.children) {

    result = result.concat(getElementByClassName(nameOfClass, el));

   }


   return result

};


此實現(xiàn)應(yīng)僅用于教育目的,因為它具有很大的存儲復(fù)雜性。


查看完整回答
反對 回復(fù) 2022-01-07
?
肥皂起泡泡

TA貢獻(xiàn)1829條經(jīng)驗 獲得超6個贊

您可以像這樣使用 querySelectorAll :


const getElementsByClassName = (nameOfClass, ancestor) => (

 ancestor.querySelectorAll(`.${nameOfClass}`)

);

或者,如果您肯定想要父母的直系后代。es6方式:


const getElementsByClassName = (nameOfClass, parent) => (

 [...parent.querySelectorAll(`.${nameOfClass}`)].filter(item => item.parentElement === parent))

);

javascript方式


const getElementsByClassName = (nameOfClass, parent) => (

 Array.prototype.slice.call(parent.querySelectorAll(`.${nameOfClass}`)).filter(item => item.parentElement === parent))

);

很遺憾,我們不能將直接后代與 querySelectorAll 一起使用。否則這將是完美的:


const getElementsByClassName = (nameOfClass, parent) => (

 parent.querySelectorAll(`> .${nameOfClass}`)

);


查看完整回答
反對 回復(fù) 2022-01-07
?
眼眸繁星

TA貢獻(xiàn)1873條經(jīng)驗 獲得超9個贊

這樣的事情應(yīng)該這樣做:


const getElementsByClassName  = (name, el) => 

  [

    ... (el .classList .contains (name) ? [el] : []),

    ... ([... el .childNodes] .flatMap (c => getElementsByClassName (name, c)))

  ]

從邏輯上講,這只是說將測試該節(jié)點(diǎn)(使用它的classList)的結(jié)果與flatMap對其子節(jié)點(diǎn)的ped 遞歸調(diào)用相結(jié)合。


現(xiàn)場示例:

const getElementsByClassName  = (name, el) => 

  [

    ... ([...(el .classList || [])] .includes (name) ? [el] : []),

    ... ([... el .childNodes] .flatMap (c => getElementsByClassName (name, c)))

  ]


console .log (

  getElementsByClassName ('foo', document).map(el => el.textContent)

)

.foo {background: yellow; font-weight: bold}

<div class = 'foo'>Foo</div>

<div class = 'bar'>Bar</div>

<div class = 'baz'>

  Baz

  <div class = 'baz qux'>

    Qux 

    <div class = 'foo baz qux'>Foo Baz Qux</div>

  </div>

  <div class = 'baz foo'>Baz Foo</div>

</div>

這在 DOM 遍歷中可能過于簡單,因為并非所有子節(jié)點(diǎn)都是元素,但這可能只是第二次檢查。這應(yīng)該表明這個想法。


查看完整回答
反對 回復(fù) 2022-01-07
  • 3 回答
  • 0 關(guān)注
  • 192 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號