Javascript: setAttribute() v.s. element.attribute = giá trị để thiết lập "tên" thuộc tính

Vì vậy, tôi đang học để thao tác DOM và tôi nhận thấy một điều thú vị:Javascript: setAttribute() v.s. element.attribute = giá trị để thiết lập "tên" thuộc tính

Hãy nói rằng tôi muốn thiết lập các name thuộc tính của một phần tử bằng cách sử dụng". " dot ký hiệu:

element.name = "someName"; 
console.log(document.getElementsByName("someName")[0]); // returns "undefined"??

Tuy nhiên nếu tôi sử dụng phương pháp document.setAttribute(), nó hoạt động tốt:

element.setAttribute("name", "someName"); 
console.log(document.getElementsByName("someName")[0]); // returns the element like it should.

Không chắc chắn tại sao phương pháp ký hiệu dấu chấm không hoạt động trong trường hợp đầu tiên.

Tại sao điều này lại xảy ra?

Nguồn

2011-12-08 dkugappi

Thường cố gắng tránh sử dụng 'getElementsByName' – zzzzBov

Tại sao một người nên tránh sử dụng getElementsByName? –

Thuộc tính CÓ thể truy cập bằng ký hiệu chấm nếu đó là cách bạn muốn truy cập chúng. Nếu bạn muốn truy cập các thuộc tính bằng cách sử dụng ký hiệu dấu chấm, bạn cần tham khảo obj.attributes.attributeName để truy lục thuộc tính và obj.attributes.attributeName.value để thao tác giá trị của nó. Nó dài quanh co khi so sánh với setAttribute hoặc getAttribute. và không được đề xuất như một giải pháp, nhưng bất kể điều đó, câu trả lời đầy đủ cho câu hỏi của bạn "Tại sao ký hiệu chấm không hoạt động trong trường hợp đầu tiên" - phải bao gồm "nó. Bạn chỉ đang tìm kiếm địa điểm sai cho các thuộc tính và giá trị của chúng. " – Radiotrib

Đoán của tôi (vì bạn không chỉ định loại phần tử) là phần tử thường không có thuộc tính name, do đó, việc đặt thuộc tính DOM như vậy sẽ không hoạt động.

Ví dụ: đặt thuộc tính name trên phần tử input sẽ hoạt động. Đặt nó trên div sẽ không.

Nó sẽ hoạt động, tuy nhiên, với setAttribute().

jsFiddle.

Nguồn

2011-12-08 05:20:24 alex

Thưa khi tôi đặt một số thuộc tính phần tử html là "không xác định", nó không hoạt động và nó tiếp tục lấy các giá trị trước đó của nó. Bạn có thể cho tôi biết tại sao lại như vậy? –

khi bạn sử dụng, element.name, bạn đang truy cập thuộc tính/tạo thuộc tính có tên "tên" và đặt giá trị của nó.

nhưng,

trong khi sử dụng, element.setAttribute ('Tên', 'somename'), bạn đang thực sự thiết lập 'tên' thuộc tính.

IE8 và dưới đây xử lý thuộc tính và thuộc tính giống nhau, lỗi đã được sửa trong IE9 trở lên.
Safari, FireFox, Chrome xử lý thuộc tính và thuộc tính khác nhau.

Tuy nhiên, bạn luôn có thể tạo thuộc tính mới do bạn chọn nếu bạn muốn.

Nguồn

2013-03-22 12:20:27 Nilesh

câu trả lời một phần ... có giới hạn và không giải thích lý do đằng sau vấn đề – Radiotrib

Để mở rộng các câu trả lời được cung cấp bởi một số người khác ...

Thuộc tính 'tên' chỉ được coi DOM hợp lệ cho một vài đối tượng cụ thể. Theo https://developer.mozilla.org/en-US/docs/DOM/element.name các đối tượng là:

<a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, 
<map>, <meta>, <object>, <param>, <select>, and <textarea>

Đối với những đối tượng mà bạn có thể thiết lập, nhận và thay đổi các thuộc tính tên sử dụng object.name NHƯNG CHO BẤT CỨ TỔN DOM đối tượng khác thuộc tính 'name' là một thuộc tính tùy chỉnh và phải được tạo ra sử dụng SetAttribute() hoặc bằng cách thêm nó vào khai báo HTML. Khi nó được tạo ra, bạn có thể gắn nó bằng cách sử dụng setAttribute() và getAttribute() hoặc bạn có thể tham khảo giá trị của nó trực tiếp bằng cách sử dụng object.attributes.name.value hãy xem http://jsfiddle.net/radiotrib/yat72/1/ để biết ví dụ. BTW - hộp cảnh báo khi tải là cố ý - hãy kiểm tra mã để xem lý do tại sao ...

Nguồn

2013-03-24 16:50:14 Radiotrib

<head> 
<script> 
function test($count) { 
document.getElementById("test1").setAttribute("name","file-upload_" + $count); 
} 
</script> 
</head> 
<body> 

<p>some content</p> 
<input id="test1" type="file" name="file-upload" id="file-upload" /> 
<p>some other content</p> 
<script>test(1);</script> 
</body>

Nguồn

2013-09-30 01:54:10 OBV

(Cố gắng giải thích một phần bài viết trên một cách tốt hơn, riêng biệt, vì nó đã được xếp hạng thành công, và niềm tin vào bài đăng đó sẽ ít hơn. Hãy giúp cải thiện thêm điều này.)

*** Các property

Khi bạn sử dụng, element.name, bạn đang truy cập một property có tên là "tên" đang tồn tại hoặc thiết lập giá trị của nó.

Example 1: 
var div1 = document.getElementById("div1"); 
div1.textContent = "2";

*** Các attribute

nhưng, trong khi sử dụng, element.setAttribute('name','someName'), bạn đang thực sự thiết lập các attribute tên 'tên'. Thuộc tính này có thể là một tài sản hiện có quá

Example 2: 
var h1 = document.getElementById("H1"); 
h1.setAttribute("class", "democlass"); 

Example 3: 
var d = document.getElementById("d1"); 
d.setAttribute("name1", "value1");

Nguồn

2015-06-05 11:58:42

khi bạn sử dụng, element.name, bạn đang truy cập thuộc tính/tạo ra một tài sản có tên là "tên" và thiết lập giá trị của nó.

Nguồn

2018-01-28 19:04:55

Javascript: setAttribute() v.s. element.attribute = giá trị để thiết lập "tên" thuộc tính

Trả lời

Các vấn đề liên quan