DOM
Hämta element

Av ID

document.getElementById('uniqueID')

kommer att hämta

<div id="uniqueID"></div>

Så länge ett element med givet ID finns, kommer document.getElementById att returnera det elementet. Annars kommer det att returnera null .

Obs: ID : erna måste vara unika. Flera element kan inte ha samma ID.

Efter klassnamn

document.getElementsByClassName('class-name')

kommer att hämta

<a class="class-name">Any</a>
<b class="class-name">tag</b>
<div class="class-name an-extra-class">with that class.</div>

Om inga befintliga element innehåller den givna klassen returneras en tom samling.

Exempel:

<p class="my-class">I will be matched</p>
<p class="my-class another-class">So will I</p>
<p class="something-else">I won't</p>

var myClassElements = document.getElementByClassName('my-class');
console.log(myClassElements.length); // 2
var nonExistentClassElements = document.getElementByClassName('nope');
console.log(nonExistentClassElements.length); // 0

Med tagnamn

document.getElementsByTagName('b')

kommer att hämta

<b>All</b>
<b>of</b>
<b>the b elements.</b>

Om det inte finns några element med det angivna tagnamnet kommer en tom samling att returneras.

Av CSS Selector

Överväg att följa html-kod

<ul>
  <li id=“one” class=“main”>Item 1</li>
  <li id=“two” class=“main”>Item 2</li>
  <li id=“three” class=“main”>Item 3</li>
  <li id=“four”>Item 4</li>
</ul>

Följande dom träd kommer att byggas baserat på ovanstående HTML-kod

                      ul
    
                      |
    
     |          |         |         |
    
    li         li        li        li
     |          |         |         |
Item 1        Item 2    Item 3    Item 4

Vi kan välja element från DOM-träd med hjälp av CSS-väljare. Detta är möjligt med hjälp av två javascriptmetoder, nämligen querySelector() och querySelectorAll() .

metoden querySelector () returnerar det första elementet som matchar den givna css-väljaren från DOM.

document.querySelector('li.main')

returnerar det första li elementet som klass är main

document.querySelector('#two')

returnerar elementet med ID two

OBS! Om inget element hittas, returneras null . Om väljarsträngen innehåller ett CSS-pseudoelement kommer returen att vara null .

metoden querySelectorAll () returnerar alla element som matchar den givna css-väljaren från DOM.

document.querySelectorAll('li.main')

returnerar en nodlista som innehåller alla li elementen som klass är main .

OBS! Om inget element hittas returneras en tom nodlista. Om väljarsträngen innehåller ett CSS-pseudo-element kommer den returnerade elementListan att vara tom

Frågeställare

I moderna webbläsare [1] är det möjligt att använda CSS-liknande väljare för att fråga efter element i ett dokument - på samma sätt som sizzle.js (används av jQuery).

querySelector

Returnerar det första Element i dokumentet som matchar frågan. Om det inte finns någon matchning returnerar du null .

// gets the element whose id="some-id"
var el1 = document.querySelector('#some-id');
 
// gets the first element in the document containing "class-name" in attribute class
var el2 = document.querySelector('.class-name');
 
// gets the first anchor element in the document
var el2 = document.querySelector('a');
 
// gets the first anchor element inside a section element in the document
var el2 = document.querySelector('section a');

querySelectorAll

Returnerar en NodeList innehåller alla element i dokumentet som matchar frågan. Om ingen matchar, returnerar du en tom NodeList .

// gets all elements in the document containing "class-name" in attribute class
var el2 = document.querySelectorAll('.class-name');
 
// gets all anchor elements in the document
var el2 = document.querySelectorAll('a');

// gets all anchor elements inside any section element in the document
var el2 = document.querySelectorAll('section a');