ฉันต้องการที่จะใส่คุณลักษณะทั้งหมดในองค์ประกอบ Html ลงในอาร์เรย์: เช่นฉันมี jQuery Object ซึ่ง HTML มีลักษณะเช่นนี้:
<span name="test" message="test2"></span>ตอนนี้วิธีหนึ่งคือการใช้ตัวแยกวิเคราะห์ xml ที่อธิบายไว้ที่นี่แต่แล้วฉันต้องรู้วิธีรับรหัส html ของวัตถุของฉัน
วิธีอื่นคือการทำ jquery แต่อย่างไร จำนวนของคุณสมบัติและชื่อทั่วไป
ขอบคุณ
Btw: ฉันไม่สามารถเข้าถึงองค์ประกอบด้วย document.getelement โดยสิ่งที่คล้ายกัน
คำตอบ:
หากคุณต้องการแอ็ตทริบิวต์ DOM น่าจะง่ายกว่าที่จะใช้attributesรายการโหนดกับองค์ประกอบเอง:
var el = document.getElementById("someId");
for (var i = 0, atts = el.attributes, n = atts.length, arr = []; i < n; i++){
arr.push(atts[i].nodeName);
}โปรดทราบว่าสิ่งนี้จะเติมอาร์เรย์ด้วยชื่อแอตทริบิวต์เท่านั้น หากคุณต้องการค่าคุณสมบัติคุณสามารถใช้nodeValueคุณสมบัติ:
var nodes=[], values=[];
for (var att, i = 0, atts = el.attributes, n = atts.length; i < n; i++){
att = atts[i];
nodes.push(att.nodeName);
values.push(att.nodeValue);
}getElementById-var el = document.getElementById($(myObj).attr("id"));
getวิธีการ ... เช่น:var obj = $('#example').get(0);
คุณสามารถใช้ปลั๊กอินอย่างง่ายนี้เป็น $ ('# some_id'). getAttributes ();
(function($) {
$.fn.getAttributes = function() {
var attributes = {};
if( this.length ) {
$.each( this[0].attributes, function( index, attr ) {
attributes[ attr.name ] = attr.value;
} );
}
return attributes;
};
})(jQuery);ง่าย:
var element = $("span[name='test']");
$(element[0].attributes).each(function() {
console.log(this.nodeName+':'+this.nodeValue);});Attr.nodeValueเลิกใช้งานแล้วvalueGoogle Chrome กล่าว this.name + ':' + this.valueดังนั้นนี้อาจจะ The Attr Interface
เนื่องจากใน IE7 elem.attributes แสดงรายการคุณลักษณะที่เป็นไปได้ทั้งหมดไม่เพียง แต่คุณสมบัติปัจจุบันเราจึงต้องทดสอบค่าคุณลักษณะ ปลั๊กอินนี้ทำงานในเบราว์เซอร์หลักทั้งหมด:
(function($) {
$.fn.getAttributes = function () {
var elem = this,
attr = {};
if(elem && elem.length) $.each(elem.get(0).attributes, function(v,n) {
n = n.nodeName||n.name;
v = elem.attr(n); // relay on $.fn.attr, it makes some filtering and checks
if(v != undefined && v !== false) attr[n] = v
})
return attr
}
})(jQuery);การใช้งาน:
var attribs = $('#some_id').getAttributes();Setter และ Getter!
(function($) {
// Attrs
$.fn.attrs = function(attrs) {
var t = $(this);
if (attrs) {
// Set attributes
t.each(function(i, e) {
var j = $(e);
for (var attr in attrs) {
j.attr(attr, attrs[attr]);
}
});
return t;
} else {
// Get attributes
var a = {},
r = t.get(0);
if (r) {
r = r.attributes;
for (var i in r) {
var p = r[i];
if (typeof p.nodeValue !== 'undefined') a[p.nodeName] = p.nodeValue;
}
}
return a;
}
};
})(jQuery);ใช้:
// Setter
$('#element').attrs({
'name' : 'newName',
'id' : 'newId',
'readonly': true
});
// Getter
var attrs = $('#element').attrs();jQuery.attrพอดีในทำเลที่ดีเลิศได้ดีกับ
jQuery.attrอยู่ในตัวตั้งค่า แต่มันอาจจะเป็นประโยชน์ที่จะใช้ในตัวตั้งค่าเช่นกัน
.sliceในการแปลงattributesคุณสมบัติเป็น Arrayattributesทรัพย์สินของโหนด DOM เป็นNamedNodeMapซึ่งเป็นอาร์เรย์เหมือนวัตถุ
Array-like object เป็นวัตถุที่มีlengthคุณสมบัติและมีชื่อคุณสมบัติที่ระบุ แต่อย่างอื่นมีวิธีการของตัวเองและไม่ได้รับมาจากArray.prototype
sliceวิธีการที่สามารถใช้ในการแปลงวัตถุอาร์เรย์เหมือนอาร์เรย์ใหม่
var elem = document.querySelector('[name=test]'),
attrs = Array.prototype.slice.call(elem.attributes);
console.log(attrs);<span name="test" message="test2">See console.</span>attrsคุณสามารถเข้าถึงชื่อของแอททริบิวได้ด้วยnameคุณสมบัติในไอเท็ม
วิธีการนี้ใช้งานได้ดีหากคุณต้องการรับคุณลักษณะทั้งหมดที่มีชื่อและค่าในวัตถุที่ส่งคืนในอาร์เรย์
ตัวอย่างผลลัพธ์:
[
{
name: 'message',
value: 'test2'
}
...
]function getElementAttrs(el) {
return [].slice.call(el.attributes).map((attr) => {
return {
name: attr.name,
value: attr.value
}
});
}
var allAttrs = getElementAttrs(document.querySelector('span'));
console.log(allAttrs);<span name="test" message="test2"></span>หากคุณต้องการเฉพาะชื่อแอตทริบิวต์สำหรับองค์ประกอบนั้นคุณสามารถแมปผลลัพธ์ได้ดังนี้
var onlyAttrNames = allAttrs.map(attr => attr.name);
console.log(onlyAttrNames); // ["name", "message"]คำตอบของRoland Boumanเป็นวิธีที่ดีที่สุดและเรียบง่ายของวานิลลา ฉันสังเกตเห็นความพยายามที่ปลั๊ก jQ แต่พวกเขาดูเหมือนจะไม่ "เต็ม" พอสำหรับฉันดังนั้นฉันจึงสร้างของตัวเอง ความปราชัยเพียงอย่างเดียวนั้นไม่สามารถเข้าถึงผู้ดูแลที่เพิ่มเข้ามาแบบไดนามิกโดยไม่ต้องโทรติดต่อโดยตรงelm.attr('dynamicAttr')เพิ่มแบบไดนามิกโดยไม่ต้องโทรโดยตรง อย่างไรก็ตามสิ่งนี้จะคืนค่าแอตทริบิวต์ธรรมชาติทั้งหมดของวัตถุองค์ประกอบ jQuery
ปลั๊กอินใช้การเรียกแบบ jQuery แบบง่าย ๆ :
$(elm).getAttrs();
// OR
$.getAttrs(elm);คุณยังสามารถเพิ่มพารามิเตอร์สตริงที่สองสำหรับรับ attr เฉพาะหนึ่ง สิ่งนี้ไม่จำเป็นสำหรับการเลือกองค์ประกอบเดียวเนื่องจาก jQuery มีอยู่แล้ว$(elm).attr('name')แต่ปลั๊กอินเวอร์ชันของฉันอนุญาตให้ส่งคืนได้หลายครั้ง ตัวอย่างเช่นการโทรเช่น
$.getAttrs('*', 'class');จะมีผลในอาร์เรย์การกลับมาของวัตถุ[] {}แต่ละวัตถุจะมีลักษณะดังนี้:
{ class: 'classes names', elm: $(elm), index: i } // index is $(elm).index();;(function($) {
$.getAttrs || ($.extend({
getAttrs: function() {
var a = arguments,
d, b;
if (a.length)
for (x in a) switch (typeof a[x]) {
case "object":
a[x] instanceof jQuery && (b = a[x]);
break;
case "string":
b ? d || (d = a[x]) : b = $(a[x])
}
if (b instanceof jQuery) {
var e = [];
if (1 == b.length) {
for (var f = 0, g = b[0].attributes, h = g.length; f < h; f++) a = g[f], e[a.name] = a.value;
b.data("attrList", e);
d && "all" != d && (e = b.attr(d))
} else d && "all" != d ? b.each(function(a) {
a = {
elm: $(this),
index: $(this).index()
};
a[d] = $(this).attr(d);
e.push(a)
}) : b.each(function(a) {
$elmRet = [];
for (var b = 0, d = this.attributes, f = d.length; b < f; b++) a = d[b], $elmRet[a.name] = a.value;
e.push({
elm: $(this),
index: $(this).index(),
attrs: $elmRet
});
$(this).data("attrList", e)
});
return e
}
return "Error: Cannot find Selector"
}
}), $.fn.extend({
getAttrs: function() {
var a = [$(this)];
if (arguments.length)
for (x in arguments) a.push(arguments[x]);
return $.getAttrs.apply($, a)
}
}))
})(jQuery);;;(function(c){c.getAttrs||(c.extend({getAttrs:function(){var a=arguments,d,b;if(a.length)for(x in a)switch(typeof a[x]){case "object":a[x]instanceof jQuery&&(b=a[x]);break;case "string":b?d||(d=a[x]):b=c(a[x])}if(b instanceof jQuery){if(1==b.length){for(var e=[],f=0,g=b[0].attributes,h=g.length;f<h;f++)a=g[f],e[a.name]=a.value;b.data("attrList",e);d&&"all"!=d&&(e=b.attr(d));for(x in e)e.length++}else e=[],d&&"all"!=d?b.each(function(a){a={elm:c(this),index:c(this).index()};a[d]=c(this).attr(d);e.push(a)}):b.each(function(a){$elmRet=[];for(var b=0,d=this.attributes,f=d.length;b<f;b++)a=d[b],$elmRet[a.name]=a.value;e.push({elm:c(this),index:c(this).index(),attrs:$elmRet});c(this).data("attrList",e);for(x in $elmRet)$elmRet.length++});return e}return"Error: Cannot find Selector"}}),c.fn.extend({getAttrs:function(){var a=[c(this)];if(arguments.length)for(x in arguments)a.push(arguments[x]);return c.getAttrs.apply(c,a)}}))})(jQuery);วิธีรัดกุมมากขึ้นในการทำ:
var element = document.querySelector(/* … */);
[].slice.call(element.attributes).map(function (attr) { return attr.nodeName; });[...document.querySelector(/* … */).attributes].map(attr => attr.nodeName);document.querySelector()ส่งคืนองค์ประกอบแรกภายในเอกสารที่ตรงกับตัวเลือกที่ระบุElement.attributesส่งคืนวัตถุNamedNodeMapที่มีคุณสมบัติที่กำหนดขององค์ประกอบ HTML ที่สอดคล้องกัน[].map() สร้างอาร์เรย์ใหม่ด้วยผลลัพธ์ของการเรียกฟังก์ชันที่มีให้ในทุกองค์ประกอบในอาร์เรย์ที่เรียกสิ่งนี้ช่วยได้ไหม?
คุณสมบัตินี้ส่งคืนคุณสมบัติทั้งหมดขององค์ประกอบในอาร์เรย์สำหรับคุณ นี่คือตัวอย่าง
window.addEventListener('load', function() {
var result = document.getElementById('result');
var spanAttributes = document.getElementsByTagName('span')[0].attributes;
for (var i = 0; i != spanAttributes.length; i++) {
result.innerHTML += spanAttributes[i].value + ',';
}
});<span name="test" message="test2"></span>
<div id="result"></div>เพื่อให้ได้คุณสมบัติขององค์ประกอบมากมายและจัดระเบียบฉันขอแนะนำให้สร้างอาร์เรย์ขององค์ประกอบทั้งหมดที่คุณต้องการวนซ้ำแล้วสร้างอาร์เรย์ย่อยสำหรับคุณลักษณะทั้งหมดของแต่ละองค์ประกอบที่วนซ้ำ
นี่คือตัวอย่างของสคริปต์ที่จะวนซ้ำผ่านองค์ประกอบที่รวบรวมไว้และพิมพ์คุณสมบัติสองอย่าง สคริปต์นี้อนุมานว่าจะมีสองแอตทริบิวต์เสมอ แต่คุณสามารถแก้ไขได้อย่างง่ายดายด้วยการจับคู่เพิ่มเติม
window.addEventListener('load',function(){
/*
collect all the elements you want the attributes
for into the variable "elementsToTrack"
*/
var elementsToTrack = $('body span, body div');
//variable to store all attributes for each element
var attributes = [];
//gather all attributes of selected elements
for(var i = 0; i != elementsToTrack.length; i++){
var currentAttr = elementsToTrack[i].attributes;
attributes.push(currentAttr);
}
//print out all the attrbute names and values
var result = document.getElementById('result');
for(var i = 0; i != attributes.length; i++){
result.innerHTML += attributes[i][0].name + ', ' + attributes[i][0].value + ' | ' + attributes[i][1].name + ', ' + attributes[i][1].value +'<br>';
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<div name="test" message="test2"></div>
<div name="test" message="test2"></div>
<div name="test" message="test2"></div>
<div name="test" message="test2"></div>
<div id="result"></div>ทุกคำตอบที่นี่ไม่มีวิธีแก้ปัญหาที่ง่ายที่สุดโดยใช้getAttributeNamesวิธีองค์ประกอบ !
มันดึงชื่อขององค์ประกอบปัจจุบันขององค์ประกอบทั้งหมดเป็นอาร์เรย์ปกติที่คุณสามารถลดเป็นวัตถุที่ดีของคีย์ / ค่า
const getAllAttributes = el => el
.getAttributeNames()
.reduce((obj, name) => ({
...obj,
[name]: el.getAttribute(name)
}), {})
console.log(getAllAttributes(document.querySelector('div')))<div title="hello" className="foo" data-foo="bar"></div>ลองนึกภาพคุณมีองค์ประกอบ HTML ดังนี้
<a class="toc-item"
href="/books/n/ukhta2333/s5/"
id="book-link-29"
>
Chapter 5. Conclusions and recommendations
</a>วิธีหนึ่งที่คุณจะได้รับคุณลักษณะทั้งหมดของมันคือการแปลงให้เป็นอาเรย์:
const el = document.getElementById("book-link-29")
const attrArray = Array.from(el.attributes)
// Now you can iterate all the attributes and do whatever you need.
const attributes = attrArray.reduce((attrs, attr) => {
attrs !== '' && (attrs += ' ')
attrs += `${attr.nodeName}="${attr.nodeValue}"`
return attrs
}, '')
console.log(attributes)และด้านล่างเป็นสตริงที่สิ่งที่คุณจะได้รับ (จากตัวอย่าง) ซึ่งมีแอตทริบิวต์ทั้งหมด:
class="toc-item" href="/books/n/ukhta2333/s5/" id="book-link-29"ลองอะไรเช่นนี้
<div id=foo [href]="url" class (click)="alert('hello')" data-hello=world></div>จากนั้นรับคุณสมบัติทั้งหมด
const foo = document.getElementById('foo');
// or if you have a jQuery object
// const foo = $('#foo')[0];
function getAttributes(el) {
const attrObj = {};
if(!el.hasAttributes()) return attrObj;
for (const attr of el.attributes)
attrObj[attr.name] = attr.value;
return attrObj
}
// {"id":"foo","[href]":"url","class":"","(click)":"alert('hello')","data-hello":"world"}
console.log(getAttributes(foo));สำหรับอาร์เรย์ของคุณลักษณะที่ใช้
// ["id","[href]","class","(click)","data-hello"]
Object.keys(getAttributes(foo))Element.prototype.getA = function (a) {
if (a) {
return this.getAttribute(a);
} else {
var o = {};
for(let a of this.attributes){
o[a.name]=a.value;
}
return o;
}
}ต้อง<div id="mydiv" a='1' b='2'>...</div>
สามารถใช้
mydiv.getA() // {id:"mydiv",a:'1',b:'2'}ง่ายมาก. คุณเพียงแค่ต้องห่วงองค์ประกอบองค์ประกอบและผลักดัน nodeValues ของพวกเขาในอาร์เรย์:
let att = document.getElementById('id');
let arr = Array();
for (let i = 0; i < att.attributes.length; i++) {
arr.push(att.attributes[i].nodeValue);
}หากต้องการชื่อของแอ็ตทริบิวต์คุณสามารถแทนที่ 'nodeValue' สำหรับ 'nodeName'
let att = document.getElementById('id');
let arr = Array();
for (let i = 0; i < att.attributes.length; i++) {
arr.push(att.attributes[i].nodeName);
}คุณสมบัติการแปลงวัตถุ
* ต้องการ: lodash
function getAttributes(element, parseJson=false){
let results = {}
for (let i = 0, n = element.attributes.length; i < n; i++){
let key = element.attributes[i].nodeName.replace('-', '.')
let value = element.attributes[i].nodeValue
if(parseJson){
try{
if(_.isString(value))
value = JSON.parse(value)
} catch(e) {}
}
_.set(results, key, value)
}
return results
}นี่จะแปลงแอตทริบิวต์ html ทั้งหมดเป็นวัตถุที่ซ้อนกัน
ตัวอย่าง HTML: <div custom-nested-path1="value1" custom-nested-path2="value2"></div>
ผลลัพธ์: {custom:{nested:{path1:"value1",path2:"value2"}}}
หาก parseJson ถูกตั้งค่าเป็นค่า json จริงจะถูกแปลงเป็นวัตถุ
ในจาวาสคริปต์:
var attributes;
var spans = document.getElementsByTagName("span");
for(var s in spans){
if (spans[s].getAttribute('name') === 'test') {
attributes = spans[s].attributes;
break;
}
}ในการเข้าถึงชื่อและค่าของคุณสมบัติ:
attributes[0].nodeName
attributes[0].nodeValue