this.id
(như bạn đã biết)
this.value
(trên hầu hết các loại đầu vào. chỉ các vấn đề tôi biết là IE khi <select>
không có value
thuộc tính được đặt trên các <option>
thành phần của nó hoặc đầu vào radio trong Safari.)
this.className
để có được hoặc thiết lập toàn bộ thuộc tính "lớp"
this.selectedIndex
dựa vào a <select>
để lấy chỉ mục đã chọn
this.options
chống lại một <select>
để có được một danh sách các <option>
yếu tố
this.text
chống lại <option>
để có được nội dung văn bản của nó
this.rows
chống lại một <table>
để có được một bộ sưu tập các <tr>
yếu tố
this.cells
chống lại a <tr>
để có được các tế bào của nó (td & th)
this.parentNode
để có được cha mẹ trực tiếp
this.checked
để nhận trạng thái đã kiểm tra của checkbox
Cảm ơn @Tim Down
this.selected
để nhận trạng thái đã chọn của option
Cảm ơn @Tim Down
this.disabled
để có được trạng thái bị vô hiệu hóa của input
Cảm ơn @Tim Down
this.readOnly
để có được trạng thái readOnly của một lời input
cảm ơn @Tim Down
this.href
chống lại một <a>
yếu tố để có được nóhref
this.hostname
chống lại một <a>
yếu tố để có được miền của nóhref
this.pathname
chống lại một <a>
yếu tố để có được con đường của nóhref
this.search
dựa vào một <a>
phần tử để có được chuỗi truy vấn của nóhref
this.src
chống lại một yếu tố hợp lệ để có một src
...Tôi nghĩ rằng bạn có được ý tưởng.
Sẽ có lúc hiệu suất là rất quan trọng. Giống như nếu bạn đang thực hiện một cái gì đó trong một vòng lặp nhiều lần, bạn có thể muốn bỏ jQuery.
Nói chung, bạn có thể thay thế:
$(el).attr('someName');
với:
Ở trên là từ kém. getAttribute
không phải là sự thay thế, nhưng nó lấy ra giá trị của một thuộc tính được gửi từ máy chủ và tương ứng của nó setAttribute
sẽ đặt nó. Cần thiết trong một số trường hợp.
Các câu dưới đây sắp xếp nó. Xem câu trả lời này để điều trị tốt hơn.
el.getAttribute('someName');
... để truy cập một thuộc tính trực tiếp. Lưu ý rằng các thuộc tính không giống như các thuộc tính (mặc dù đôi khi chúng phản chiếu lẫn nhau). Tất nhiên là có setAttribute
.
Giả sử bạn có một tình huống nhận được một trang nơi bạn cần mở ra tất cả các thẻ thuộc một loại nhất định. Nó ngắn và dễ dàng với jQuery:
$('span').unwrap(); // unwrap all span elements
Nhưng nếu có nhiều, bạn có thể muốn thực hiện một API DOM gốc:
var spans = document.getElementsByTagName('span');
while( spans[0] ) {
var parent = spans[0].parentNode;
while( spans[0].firstChild ) {
parent.insertBefore( spans[0].firstChild, spans[0]);
}
parent.removeChild( spans[0] );
}
Mã này khá ngắn, nó hoạt động tốt hơn phiên bản jQuery và có thể dễ dàng được tạo thành một chức năng có thể sử dụng lại trong thư viện cá nhân của bạn.
Có vẻ như tôi có một vòng lặp vô hạn với bên ngoài while
vì while(spans[0])
, nhưng vì chúng ta đang xử lý một "danh sách trực tiếp" nên nó được cập nhật khi chúng ta thực hiện parent.removeChild(span[0]);
. Đây là một tính năng khá tiện lợi mà chúng ta bỏ lỡ khi làm việc với một Array (hoặc đối tượng giống như Array) thay vào đó.
this.id
?