Panduan untuk Ciri Pemilih DOM baharu PHP

Dalam landskap PHP yang berkembang pesat, setiap versi baharu memperkenalkan ciri yang menyelaras dan memodenkan aliran kerja pembangunan. PHP 8.4 tidak terkecuali, dengan penambahan peningkatan yang telah lama ditunggu-tunggu pada sambungan DOM. satu ciri baharu telah diperkenalkan yang meningkatkan dengan ketara cara pembangun berinteraksi dengan elemen DOM.

Dalam artikel ini, kami akan melihat secara mendalam kefungsian pemilih DOM baharu dalam PHP 8.4, sintaksnya, kes penggunaannya dan cara ia memudahkan kerja dengan elemen DOM.

Apa yang Baharu dalam PHP 8.4? Pemilih DOM

PHP 8.4 memperkenalkan kemas kini utama pada sambungan DOM, menambahkan API pemilih DOM yang membolehkan pembangun memilih dan memanipulasi elemen dengan lebih intuitif dan fleksibel.

Sebelum ini, pembangun bergantung pada kaedah seperti gnetElementsByTagName(), getElementById(), dan querySelector(), yang berfungsi tetapi verbose dan kurang intuitif. Kaedah ini memerlukan lelaran manual dan logik pemilihan, menjadikan kod lebih sukar untuk dikekalkan.

Dengan PHP 8.4, pembangun boleh menggunakan sintaks pemilih CSS asli, serupa dengan JavaScript, untuk pemilihan elemen yang lebih fleksibel dan boleh dibaca. Perubahan ini memudahkan kod, terutamanya apabila berurusan dengan dokumen HTML dan XML yang kompleks atau bersarang dalam.

Apakah Pemilih DOM?

Ciri pemilih DOM yang diperkenalkan dalam PHP 8.4 membawa pemilihan elemen berasaskan CSS moden kepada sambungan PHP DOMDocument. Ia meniru kefungsian kaedah querySelector() dan querySelectorAll() JavaScript yang digunakan secara meluas, membolehkan pembangun memilih elemen dalam pepohon DOM menggunakan pemilih CSS.

Kaedah ini membolehkan pembangun memilih elemen menggunakan pemilih CSS yang kompleks, menjadikan manipulasi DOM lebih mudah dan lebih intuitif.

Bagaimanakah Pemilih DOM Berfungsi?

Dengan PHP 8.4, sambungan DOM memperkenalkan dua kaedah yang berkuasa line querySelector() dan querySelectorAll() untuk menjadikannya lebih mudah dan lebih intuitif untuk memilih elemen DOM menggunakan CSS Selectors, sama seperti dalam JavaScript.
(https://scrapfly.io/blog/css-selector-cheatsheet/)

1. querySelector()

Kaedah querySelector() membolehkan anda memilih elemen tunggal daripada DOM yang sepadan dengan pemilih CSS yang ditentukan.

Sintaks :

DOMElement querySelector(string $selector)

Contoh :

$doc = new DOMDocument();
$doc->loadHTML('<div>



<p>This method returns the <strong>first element</strong> matching the provided CSS selector. If no element is found, it returns null.</p>

<h4>
  
  
  2. querySelectorAll()
</h4>

<p>The querySelectorAll() method allows you to select <strong>all elements</strong> matching the provided CSS selector. It returns a DOMNodeList object, which is a collection of DOM elements.</p>

<p><strong>Syntax</strong> :<br>
</p>

<pre class="brush:php;toolbar:false">DOMNodeList querySelectorAll(string $selector)

Contoh :

$doc = new DOMDocument();
$doc->loadHTML('<div>



<p>This method returns a DOMNodeList containing all elements matching the given CSS selector. If no elements are found, it returns an empty DOMNodeList.</p>

<h2>
  
  
  Key Benefits of the DOM Selector
</h2>

<p>CSS selector in PHP 8.4 brings several key advantages to developers, the new methods streamline DOM element selection, making your code cleaner, more flexible, and easier to maintain.</p>

<h3>
  
  
  1. Cleaner and More Intuitive Syntax
</h3>

<p>With the new DOM selector methods, you can now use the familiar CSS selector syntax, which is much more concise and readable. No longer do you need to write out complex loops to traverse the DOM just provide a selector, and PHP will handle the rest.</p>

<h3>
  
  
  2. Greater Flexibility
</h3>

<p>The ability to use CSS selectors means you can select elements based on attributes, pseudo-classes, and other criteria, making it easier to target specific elements in the DOM.</p>

<p>For example, you can use:</p>

<ul>
<li>.class</li>
<li>#id</li>
<li>div > p:first-child

[data-attribute="value"]

This opens up a much more powerful and flexible way of working with HTML and XML documents.

3. Improved Consistency with JavaScript

For developers familiar with JavaScript, the new DOM selector methods will feel intuitive. If you’ve used querySelector() or querySelectorAll() in JavaScript, you’ll already be comfortable with their usage in PHP.

Comparison with Older PHP DOM Methods

To better understand the significance of these new methods, let's compare them to traditional methods available in older versions of PHP.

Feature	Old Method	New DOM Selector
Select by ID	getElementById('id')	querySelector('#id')
Select by Tag Name	getElementsByTagName('tag')	querySelectorAll('tag')
Select by Class Name	Loop through getElementsByTagName()	querySelectorAll('.class')
Complex Selection	Not possible	querySelectorAll('.class > tag')
Return Type (Single Match)	DOMElement	`DOMElement
Return Type (Multiple)	{% raw %}DOMNodeList (live)	DOMNodeList (static)

Practical Examples

Let’s explore some practical examples of using the DOM selector methods in PHP 8.4. These examples will show how you can use CSS selectors to efficiently target elements by ID, class, and even nested structures within your HTML or XML documents.

By ID

The querySelector('#id') method selects a unique element by its id, which should be unique within the document. This simplifies targeting specific elements and improves code readability.

$doc = new DOMDocument();
$doc->loadHTML('<div>



<p>This code selects the element with the>

<h3>
  
  
  By Class
</h3>

<p>The querySelectorAll('.class') method selects all elements with a given class, making it easy to manipulate groups of elements, like buttons or list items, in one go.<br>
</p>

<pre class="brush:php;toolbar:false">$doc = new DOMDocument();
$doc->loadHTML('<div>



<p>This code selects all elements with the class item and outputs their text content. It’s ideal for working with multiple elements that share the same class name.</p>

<h3>
  
  
  Nested Elements
</h3>

<p>The querySelectorAll('.parent > .child') method targets direct children of a specific parent, making it easier to work with nested structures like lists or tables.<br>


<pre class="brush:php;toolbar:false">$doc = new DOMDocument();
$doc->loadHTML('<ul>



<p>This code selects the <li> elements that are direct children of the .list class and outputs their text content. The > combinator ensures only immediate child elements are selected, making it useful for working with nested structures.

<h2>
  
  
  Example Web Scraper using Dom Selector
</h2>

<p>Here's an example PHP web scraper using the new DOM selector functionality introduced in PHP 8.4. This script extracts product data from the given product page:<br>
</p>

<pre class="brush:php;toolbar:false"><?php

// Load the HTML of the product page
$url = 'https://web-scraping.dev/product/1';
$html = file_get_contents($url);

// Create a new DOMDocument instance and load the HTML
$doc = new DOMDocument();
libxml_use_internal_errors(true); // Suppress warnings for malformed HTML
$doc->loadHTML($html);
libxml_clear_errors();

// Extract product data using querySelector and querySelectorAll
$product = [];

// Extract product title
$titleElement = $doc->querySelector('h1');
$product['title'] = $titleElement ? $titleElement->textContent : null;

// Extract product description
$descriptionElement = $doc->querySelector('.description');
$product['description'] = $descriptionElement ? $descriptionElement->textContent : null;

// Extract product price
$priceElement = $doc->querySelector('.price');
$product['price'] = $priceElement ? $priceElement->textContent : null;

// Extract product variants
$variantElements = $doc->querySelectorAll('.variants option');
$product['variants'] = [];
if ($variantElements) {
    foreach ($variantElements as $variant) {
        $product['variants'][] = $variant->textContent;
    }
}

// Extract product image URLs
$imageElements = $doc->querySelectorAll('.product-images img');
$product['images'] = [];
if ($imageElements) {
    foreach ($imageElements as $img) {
        $product['images'][] = $img->getAttribute('src');
    }
}

// Output the extracted product data
echo json_encode($product, JSON_PRETTY_PRINT);

Kuasakan dengan Web Scraping API

ScrapFly menyediakan API pengikisan, tangkapan skrin dan pengekstrakan web untuk pengumpulan data secara berskala.

• Pintasan perlindungan anti-bot - mengikis halaman web tanpa menyekat!
• Proksi kediaman berputar - halang alamat IP dan blok geografi.
• Paparan JavaScript - mengikis halaman web dinamik melalui penyemak imbas awan.
• Automasi penyemak imbas penuh - mengawal penyemak imbas untuk menatal, memasukkan dan mengklik pada objek.
• Penukaran format - kikis sebagai HTML, JSON, Teks atau Markdown.
• SDK Python dan Typescript, serta penyepaduan alat Scrapy dan tanpa kod.

Cuba secara PERCUMA!

Lagi tentang Scrapfly

Had Pemilih PHP 8.4 DOM

Walaupun API pemilih DOM ialah alat yang berkuasa, terdapat beberapa had yang perlu diingat:

1. Tidak Tersedia dalam Versi Lama

Kaedah pemilih DOM baharu hanya tersedia dalam PHP 8.4 dan kemudian. Pembangun yang menggunakan versi terdahulu perlu bergantung pada kaedah DOM lama seperti getElementById() dan getElementsByTagName().

2. Senarai Nod Statik

Kaedah querySelectorAll() mengembalikan statik DOMNodeList, bermakna ia tidak menggambarkan perubahan yang dibuat pada DOM selepas pemilihan awal. Ini berbeza daripada NodeList langsung JavaScript.

3. Sokongan Kelas Pseudo Terhad

Walaupun pemilih CSS asas disokong, kelas pseudo lanjutan (mis., :nth-child(), :nth-of-type()) mungkin mempunyai sokongan terhad atau tiada dalam PHP.

4. Prestasi pada Dokumen Besar

Menggunakan pemilih CSS yang kompleks pada dokumen yang sangat besar boleh membawa kepada isu prestasi, terutamanya jika pepohon DOM bersarang dalam.

Soalan Lazim

Untuk melengkapkan panduan ini, berikut ialah jawapan kepada beberapa soalan lazim tentang PHP 8.4 pemilih DOM baharu.

Apakah ciri baharu utama dalam PHP 8.4?

PHP 8.4 memperkenalkan kaedah pemilih DOM (querySelector() dan querySelectorAll()), membolehkan pembangun memilih elemen DOM menggunakan pemilih CSS, menjadikan manipulasi DOM lebih intuitif dan cekap.

Apakah perubahan yang dibuat dalam PHP 8.4 kepada manipulasi DOM yang tidak tersedia dalam versi terdahulu?

Dalam PHP 8.4, pembangun kini boleh menggunakan pemilih CSS secara langsung untuk memilih elemen DOM, terima kasih kepada pengenalan querySelector() dan querySelectorAll(). Ini tidak boleh dilakukan dalam versi PHP yang lebih awal, di mana kaedah seperti getElementsByTagName() memerlukan lebih banyak lelaran manual dan kurang fleksibel.

Adakah PHP 8.4 menyokong semua pemilih CSS dalam "querySelector()" dan "querySelectorAll()"?

PHP 8.4 menyokong set luas pemilih CSS, tetapi terdapat beberapa pengehadan. Sebagai contoh, kelas pseudo seperti :nth-child() dan :not() mungkin tidak disokong sepenuhnya atau mungkin mempunyai kefungsian terhad.

Ringkasan

Pengenalan PHP 8.4 bagi API pemilih DOM memudahkan kerja dengan dokumen DOM dengan menyediakan kaedah pemilihan berasaskan CSS yang intuitif. Kaedah querySelector() dan querySelectorAll() baharu membenarkan pembangun menyasarkan elemen DOM dengan mudah menggunakan pemilih CSS, menjadikan kod lebih ringkas dan boleh diselenggara.

Walaupun terdapat beberapa batasan, faedah kaedah baharu ini jauh mengatasi kelemahannya. Jika anda menggunakan PHP 8.4 atau lebih baru, anda patut menggunakan ciri ini untuk menyelaraskan tugas manipulasi DOM anda.

Atas ialah kandungan terperinci Panduan untuk Ciri Pemilih DOM baharu PHP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!