Bagaimana untuk membaca elemen halaman web dengan javascript

Kaedah yang biasa digunakan termasuk: 1. Dapatkan elemen melalui ID 2. Dapatkan elemen melalui nama kelas 4. Dapatkan elemen melalui pemilih CSS;

Dalam JavaScript, terdapat banyak cara untuk membaca atau mendapatkan elemen halaman. Berikut ialah beberapa kaedah yang biasa digunakan:

1 Dapatkan elemen mengikut ID

Menggunakan kaedah document.getElementById(), anda boleh mendapatkan elemen mengikut ID mereka. Contohnya:

javascript

var element = document.getElementById("myElementId");

2 Dapatkan elemen mengikut nama kelas

Gunakan kaedah document.getElementsByClassName(), anda boleh mendapatkan elemen mengikut nama kelas mereka. Kaedah ini mengembalikan HTMLCollection yang mengandungi semua elemen padanan. Contohnya:

javascript

var elements = document.getElementsByClassName("myClassName");  
var firstElement = elements[0]; // 获取第一个匹配的元素

3 Dapatkan elemen mengikut nama tag

Gunakan kaedah document.getElementsByTagName() mereka. Kaedah ini juga mengembalikan HTMLCollection yang mengandungi semua elemen padanan. Contohnya:

javascript

var elements = document.getElementsByTagName("p"); // 获取所有的<p>元素  
var firstParagraph = elements[0]; // 获取第一个<p>元素

4 Dapatkan elemen melalui pemilih CSS

Gunakan document.querySelector() atau document.query. . querySelector() mengembalikan elemen pertama yang sepadan dengan pemilih, manakala querySelectorAll() mengembalikan NodeList semua elemen yang sepadan dengan pemilih. Contohnya:

javascript

var element = document.querySelector(".myClassName"); // 获取第一个具有指定类名的元素  
var elements = document.querySelectorAll("div > p"); // 获取所有作为<div>元素直接子元素的<p>元素

55 Dapatkan elemen melalui elemen kanak-kanak atau elemen ibu bapa

Anda juga boleh menggunakan anak, anak pertama dan atribut lain kepada anak, anak pertama dan lain. dapatkan atau lintasi Elemen DOM dalam pokok. Sebagai contoh:

javascript

var parentElement = element.parentNode; // 获取元素的父元素  
var firstChild = element.firstChild; // 获取元素的第一个子节点（可能是元素或文本节点）  
var firstChildElement = element.firstElementChild; // 获取元素的第一个子元素（忽略文本节点）

Sila ambil perhatian bahawa apabila anda menggunakan getElementsByClassName(), getElementsByTagName() atau querySelectorAll(.), bukan satu collection atau satu senarai elemen() dikembalikan. Jika anda perlu mengendalikan salah satu elemen ini, anda perlu mengaksesnya mengikut indeks (seperti elemen[0]).

Selain itu, apabila anda menggunakan sifat seperti firstChild dan lastChild, apa yang dikembalikan mungkin nod teks atau jenis nod lain, tidak semestinya nod elemen. Jika anda hanya ingin mendapatkan nod elemen, anda boleh menggunakan sifat seperti firstElementChild dan lastElementChild.

Atas ialah kandungan terperinci Bagaimana untuk membaca elemen halaman web dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!