ct_htmltree.gif

查找 HTML 元素

1. 原生js

通過 id 查找 HTML 元素

document.getElementById(id)

通過標(biāo)簽名找到 HTML 元素

document.getElementsByTagName(tagName)

通過類名找到 HTML 元素

document.getElementsByClassName(className)

通過 HTML5 querySelector API查找元素

element = document.querySelector(selectors)

• element是一個(gè)Element對象
• selectors是一個(gè)包含一個(gè)或多個(gè)由逗號分隔的CSS選擇器的字符串

elementList = document.querySelectorAll(selectors)

• elementList 是一個(gè)靜態(tài)的 NodeList 類型的對象
• selectors 是一個(gè)由逗號連接的包含一個(gè)或多個(gè)CSS選擇器的字符串

2. jQuery

核心API

• jQuery()返回匹配的元素集合，無論是通過在DOM的基礎(chǔ)上傳遞的參數(shù)還是創(chuàng)建一個(gè)HTML字符串醇锚。
  jQuery( selector [, context ] )

  jQuery( selector [, context ] )
  jQuery( element )
  jQuery( elementArray )
  jQuery( object )
  jQuery( jQuery object )
  jQuery()
  

  jQuery( html [, ownerDocument ] )

  jQuery( html [, ownerDocument ] )
  jQuery( html, attributes )
  

  jQuery( callback )

  jQuery( callback )
  

向上遍歷 DOM 樹

• .parent([selector])
  如果提供的jQuery代表了一組DOM元素焊唬，.parent()方法允許我們能夠在DOM樹中搜索到這些元素的父級元素看靠，從有序的向上匹配元素，并根據(jù)匹配的元素創(chuàng)建一個(gè)新的 jQuery 對象
  親自試一試
• .parents([selector])
  如果提供的jQuery代表了一組DOM元素鸥滨，.parents()方法允許我們能夠在DOM樹中搜索到這些元素的祖先元素谤祖，從有序的向上匹配元素，并根據(jù)匹配的元素創(chuàng)建一個(gè)新的 jQuery 對象;返回的元素秩序是從離他們最近的父級元素開始的（注：從里到外的順序）凸主。當(dāng)多個(gè)DOM元素在原有集合中容客，返回的集合將是原來元素以相反的順序排序约郁， 并且重復(fù)刪除但两。
  親自試一試
• .parentsUntil( [selector ] [, filter ] )
  如果提供一個(gè)jQuery對象代表DOM元素集合， .parentsUntil() 方法會(huì)找遍所有這些元素的前輩元素绽快，直到遇到了跟參數(shù)匹配的元素才會(huì)停止紧阔。返回的jQuery對象中包含了所有找到的前輩元素，除了與 .parentsUntil() 選擇器匹配的那個(gè)元素活孩。如果提供的選擇器沒有匹配到任何元素乖仇，或者沒有提供選擇器，那么所有的祖先元素都會(huì)被選中起趾。其效果與沒有提供參數(shù)的.parents()方法是一樣的
  親自試一試

向下遍歷 DOM 樹

• .children( [selector ] )
  鑒于一個(gè)jQuery對象警儒，表示一個(gè)DOM元素的集合，.children()方法允許我們通過在DOM樹中對這些元素的直接子元素進(jìn)行搜索边琉，并且構(gòu)造一個(gè)新的匹配元素的jQuery對象蝙茶。.find() 和.children()方法是相似的，但后者只是針對向下一個(gè)級別的DOM樹钳恕。還要注意的是和大多數(shù)的jQuery方法一樣蹄衷，.children()不返回文本節(jié)點(diǎn);讓所有子元素包括使用文字和注釋節(jié)點(diǎn)，建議使用.contents()睦番。
  親自試一試
• .find( selector )
  如果一個(gè)jQuery對象表示一個(gè)DOM元素的集合， .find()方法允許我們能夠通過查找DOM樹中的這些元素的后代元素巩检，匹配的元素將構(gòu)造一個(gè)新的jQuery對象示启。.find()和.children()方法是相似的，但后者只是再DOM樹中向下遍歷一個(gè)層級（注：就是只查找子元素迟螺，而不是后代元素）舍咖。
  .find()方法還可以接受一個(gè)選擇器表達(dá)式，該選擇器表達(dá)式可以是任何可傳給$()函數(shù)的選擇器表達(dá)式排霉。如果緊隨兄弟匹配選擇器郑诺，它將被保留在新構(gòu)建的jQuery對象中杉武；否則，它被排除在外飞涂。
  親自試一試

在 DOM 樹中水平遍歷

• .siblings( [selector ] )
  如果提供的jQuery代表了一組DOM元素祈搜，.siblings()方法通過這些元素組合傳遞到方法構(gòu)造一個(gè)新的jQuery對象。
  該方法選擇性地接受同一類型選擇器表達(dá)式梁呈，我們可以傳遞給$()函數(shù)蘸秘。如果提供了選擇器表達(dá)式，那么會(huì)先測試該元素是否滿足匹配的選擇器表達(dá)式寻咒。
  親自試一試
• .next( [selector ] )
  如果一個(gè)jQuery代表了一組DOM元素颈嚼， .next()方法允許我們找遍元素集合中緊跟著這些元素的直接兄弟元素，并根據(jù)匹配的元素創(chuàng)建一個(gè)新的 jQuery 對象叫挟。
  該方法還可以接受一個(gè)可選的選擇器表達(dá)式，該選擇器表達(dá)式可以是任何可傳給 $() 函數(shù)的選擇器表達(dá)式旬薯。如果每個(gè)元素的直接兄弟元素滿足所提供的選擇器适秩，那么它會(huì)保存在新生成的 jQuery 對象中，否則秽荞，不會(huì)包含該元素扬跋。
  親自試一試
• .nextAll( [selector ] )
  如果一個(gè)jQuery對象代表了一組DOM元素，.nextAll()方法允許我們在DOM樹上遍歷所有元素的后繼元素钦听，并且構(gòu)建一個(gè)新的匹配元素的jQuery對象朴上。
  該方法還可以接受一個(gè)可選的選擇器表達(dá)式，該選擇器表達(dá)式可以是任何可傳給 $() 函數(shù)的選擇器表達(dá)式叼架。如果供應(yīng)選擇器參數(shù)衣撬，那么會(huì)先測試該元素是否滿足匹配的選擇器表達(dá)式。
  親自試一試
• .nextUntil( [selector ] [, filter ] )
  如果提供一個(gè)選擇器表達(dá)式代表DOM元素集合具练，.nextUntil() 方法會(huì)查找這些元素所在的DOM樹中跟在它們后面的元素扛点，直到遇到了一個(gè)跟提供的參數(shù)匹配的元素的時(shí)候才會(huì)停下來。新返回的 jQuery 對象里包含了后面所有找到的兄弟元素昔善，但不包括那個(gè)選擇器匹配到的元素畔乙。
  如果沒有選擇器匹配到，或者沒有提供參數(shù)返咱，那么跟在后面的所有同輩元素都會(huì)被選中。這就跟用沒有提供參數(shù)的 .nextAll()效果一樣咖摹。
  親自試一試
• prev(), prevAll() & prevUntil()方法的工作方式與上面的方法類似萤晴，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿著同胞元素向后遍歷，而不是向前）店读。

3. Vue

• ref被用來給元素或子組件注冊引用信息屯断。引用信息將會(huì)注冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用殖演，引用指向的就是 DOM 元素趴久；如果用在子組件上，引用就指向組件實(shí)例：

  <!-- vm.$refs.p will be the DOM node -->
  <p ref="p">hello</p>
  
  <!-- vm.$refs.child will be the child comp instance -->
  <child-comp ref="child"></child-comp>
  

  當(dāng) v-for 用于元素或組件的時(shí)候已添，引用信息將是包含 DOM 節(jié)點(diǎn)或組件實(shí)例的數(shù)組滥酥。
  關(guān)于 ref 注冊時(shí)間的重要說明：因?yàn)?ref 本身是作為渲染結(jié)果被創(chuàng)建的畦幢，在初始渲染的時(shí)候你不能訪問它們 -
  它們還不存在！$refs 也不是響應(yīng)式的瘦真，因此你不應(yīng)該試圖用它在模板中做數(shù)據(jù)綁定黍瞧。

4. React

• Refs
  React支持一個(gè)可以附加到任何組件的特殊屬性ref。ref屬性可以是一個(gè)字符串或一個(gè)回調(diào)函數(shù)您机。當(dāng)ref屬性是一個(gè)回調(diào)函數(shù)時(shí)，函數(shù)接收底層DOM元素或類實(shí)例（取決于元素的類型）作為參數(shù)咸产。這使你可以直接訪問DOM元素或組件實(shí)例仲闽。

  不要過度使用 Refs。如果你發(fā)現(xiàn)自己經(jīng)常在應(yīng)用程序中使用refs來“搞事情”屑彻，請考慮使用狀態(tài)提升顶吮。

• findDOMNode()

  ReactDOM.findDOMNode(component)
  

  如果這個(gè)組件已經(jīng)被掛載到DOM中，函數(shù)會(huì)返回對應(yīng)的瀏覽器中生成的DOM元素 膳沽。你需要從DOM中讀取值時(shí)让禀，比如表單的值，或者計(jì)算DOM元素的尺寸痛阻，這個(gè)函數(shù)會(huì)非常有用腮敌。大多數(shù)情況下，你可以添加一個(gè)指向DOM節(jié)點(diǎn)的引用弊添，從而完全避免使用findDOMNode 這個(gè)函數(shù). 當(dāng) render 返回 null 或者 false 時(shí), findDOMNode 也返回 null.