பாடம் தலைப்பின் தொடக்கத்தை உள்ளடக்கும்: ஆவண பொருள் மாதிரி (ஜாவாஸ்கிரிப்ட் DOM) டைனமிக் HTML இன் அடிப்படையாகும், பொருள் அணுகல் முறைகள் ஆய்வு செய்யப்படும் மற்றும் ஜாவாஸ்கிரிப்ட் நிகழ்வுகளை செயலாக்கும் முறைகள் பரிசீலிக்கப்படும்.

• பொதுவாக, ஒரு பொருள் என்பது ஒரு கூட்டு தரவு வகையாகும், இது பல மதிப்புகளை ஒரு பொதுவான அலகுக்குள் இணைக்கிறது மற்றும் தேவைக்கேற்ப மதிப்புகளை அவற்றின் பெயர்களால் சேமிக்கவும் மீட்டெடுக்கவும் அனுமதிக்கிறது.

முன்னதாக, ஜாவாஸ்கிரிப்டில் உள்ள கருத்தை நாங்கள் ஏற்கனவே அறிந்து கொள்ள ஆரம்பித்தோம்.

• ஜாவாஸ்கிரிப்டில் DOM போன்ற ஒன்று உள்ளது - ஆவணப் பொருள் மாதிரி— ஒரு வலைப்பக்கத்தின் பொருள் மாதிரி (html பக்கம்).
• ஆவணக் குறிச்சொற்கள் அல்லது, அவர்கள் சொல்வது போல், ஆவண முனைகள் அதன் பொருள்கள்.

வரைபடத்தைப் பார்ப்போம் ஜாவாஸ்கிரிப்டில் பொருள் படிநிலை, மற்றும் இந்த தலைப்பில் விவாதிக்கப்பட்ட ஆவணப் பொருள் படிநிலையில் எங்குள்ளது.

ஸ்கிரிப்ட் உறுப்பு பின்வரும் பண்புகளைக் கொண்டுள்ளது:

ஒத்திவைக்கவும் (பக்கம் முழுமையாக ஏற்றப்படும் வரை காத்திருக்கிறது).

உதாரணமாக:

/* js கோப்புகளை இணையாக ஏற்றவும், ஏற்றப்பட்டவுடன் உடனடியாக இயக்கவும் அனுமதிக்கிறது, மீதமுள்ள பக்கம் செயலாக்கப்படும் வரை காத்திருக்காமல் */ /* பக்கத்தின் மேலும் செயலாக்கத்தை நிறுத்தாமல் இணையாக js கோப்புகளை ஏற்றுவதற்கு உலாவியை அனுமதிக்கிறது. ஆவணப் பொருள் மாதிரியின் முழுமையான பாகுபடுத்தப்பட்ட பிறகு அவற்றின் செயல்படுத்தல் நிகழ்கிறது */

ஜாவாஸ்கிரிப்டில் உள்ள ஆவணப் பொருளின் பண்புகள் மற்றும் பண்புக்கூறுகள்

ஆவணப் பொருள் ஒரு இணையப் பக்கத்தைக் குறிக்கிறது.

முக்கியமானது: ஜாவாஸ்கிரிப்டில் ஒரு பொருளின் பண்புகள் மற்றும் முறைகளை அணுக, மற்ற பொருள்களுடன் பணிபுரியும் போது, ​​புள்ளி குறியீடு பயன்படுத்தப்படுகிறது:

அந்த. முதலில் பொருள் எழுதப்பட்டது, பின்னர் அதன் சொத்து, பண்பு அல்லது முறை ஒரு புள்ளி மற்றும் இடைவெளிகள் இல்லாமல் குறிக்கப்படுகிறது.

object.property object.attribute object.method()

ஒரு உதாரணத்தைப் பார்ப்போம்:

எடுத்துக்காட்டு: html ஆவணத்தில் ஒரு குறிச்சொல் இருக்கட்டும்

என் உறுப்பு

மற்றும் அவருக்கான குறிப்பிட்ட css பாணி(இரண்டு பாணிகள் கூட, இரண்டாவது பணிக்கு பயனுள்ளதாக இருக்கும்):

.சிறிய (நிறம்: சிவப்பு; எழுத்துரு அளவு: சிறியது;) .பெரிய (நிறம்: நீலம்; எழுத்துரு அளவு: பெரிய;)

.small( color:red; font-size:small; ) .big( color:blue; font-size:big; )

அவசியம்:

ஒரு புதிய பொருள் சொத்தை அமைக்கவும், அதற்கு ஒரு மதிப்பை ஒதுக்கவும் மற்றும் இந்த மதிப்பைக் காட்டவும்;

ஒரு பொருள் பண்புக்கூறின் மதிப்பைக் காண்பி;

பொருள் பண்புக்கூறின் மதிப்பை மாற்றவும்.

பணியை வரிசையாக முடிப்போம்:
✍ தீர்வு:

இதிலிருந்து ஜாவாஸ்கிரிப்ட் மொழி, பின்னர் பொருள் கண்டுபிடிக்கப்பட்டது மற்றும் எந்த மதிப்பு எந்த சொத்து ஒதுக்கப்படும். ஆனால் முதலில், பொருளுக்கான அணுகலைப் பெறுவோம் (பொருளுக்கான அணுகல் இந்த பாடத்தில் பின்னர் விரிவாக விவாதிக்கப்படும்):

// பொருளை அதன் ஐடி var உறுப்பு = document.getElementById("MyElem") மூலம் அணுகலாம்; உறுப்பு.myProperty = 5; // சொத்து எச்சரிக்கையை (element.myProperty) ஒதுக்கவும்; // உரையாடல் பெட்டியில் காட்சி

அடுத்த பணி ஒரு பொருள் பண்புடன் தொடர்புடையது. ஒரு பொருள் பண்புக்கூறு என்பது குறிச்சொல்லின் பண்புக்கூறுகள் ஆகும். அந்த. எங்கள் விஷயத்தில் அவற்றில் இரண்டு உள்ளன: சிறிய மதிப்பு மற்றும் ஐடி பண்புடன் கூடிய வகுப்பு பண்புக்கூறு. நாங்கள் வகுப்பு பண்புடன் வேலை செய்வோம்.

இப்போது நமது பொருளின் பண்புக்கூறு மதிப்பைக் காட்ட ஜாவாஸ்கிரிப்ட் குறியீட்டைச் சேர்ப்போம். குறியீடு இருக்க வேண்டும் பிறகுமுக்கிய குறிச்சொற்கள்:

// பொருளை அதன் ஐடி var உறுப்பு = document.getElementById("MyElem") மூலம் அணுகலாம்; எச்சரிக்கை(element.getAttribute("class")); // உரையாடல் பெட்டியில் காட்சி

மற்றும் கடைசி பணி: பண்பு மதிப்பை மாற்றுதல். இதற்கு எங்களிடம் ஒரு பாணி உள்ளது. "பெரிய". வகுப்பு பண்புக்கூறின் மதிப்பை இந்த பாணியுடன் மாற்றுவோம்:

// பொருளை அதன் ஐடி var உறுப்பு = document.getElementById("MyElem") மூலம் அணுகலாம்; உறுப்பு.setAttribute("வகுப்பு","பெரிய");

இதன் விளைவாக, எங்கள் உறுப்பு பெரியதாகவும் நீல நிறமாகவும் மாறும் (வகுப்பு பெரியது).

பண்புக்கூறுகளுடன் வேலை செய்வதற்கான எடுத்துக்காட்டில் பயன்படுத்தப்படும் முறைகளை இப்போது கூர்ந்து கவனிப்போம்.

ஜாவாஸ்கிரிப்டில் உள்ள பண்புகளுடன் பணிபுரியும் முறைகள்

பண்புகளை சேர்க்கலாம், நீக்கலாம் மற்றும் மாற்றலாம். இதற்கு சிறப்பு முறைகள் உள்ளன:

• ஒரு பண்புக்கூறைச் சேர்த்தல் (அதற்கு ஒரு புதிய மதிப்பை அமைத்தல்):

getAtribute(attr)

• இந்தப் பண்பு உள்ளதா எனச் சரிபார்க்கிறது:

நீக்க பண்பு (attr)

பண்புகளுடன் வேலை செய்வதற்கான வெவ்வேறு வழிகள்

எடுத்துக்காட்டு: உரைத் தொகுதியின் மதிப்பு பண்புக்கூறின் மதிப்பை அச்சிடுக.

✍ தீர்வு:

• ஒரு உரைத் தொகுதி இருக்கட்டும்:

var elem = document.getElementById("MyElem"); var x = "மதிப்பு";

• பண்புக்கூறு மதிப்பைப் பெறுவதற்கான பல வழிகளைப் பார்ப்போம் (வெளியீட்டிற்கு எச்சரிக்கை() முறையைப் பயன்படுத்தவும்):

elem.getAttribute("மதிப்பு")

elem.getAttribute("மதிப்பு")

2. புள்ளி குறிப்பு:

elem.attributes.value

elem.attributes.value

3. அடைப்புக்குறி குறிப்பு:

var உறுப்பு = document.getElementById("t1"); எச்சரிக்கை(...) உறுப்பு.setAttribute(...);


நீங்கள் பல வழிகளில் பண்புக்கூறு மதிப்புகளை அமைக்கலாம்:

var x = "விசை"; // கீ - பண்புக்கூறு பெயர், val - பண்புக்கான மதிப்பு // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[ " key"] = "val" // 4. elem.setAttribute(x, "val")

உடல் உறுப்பு பண்புகள்

ஆவணப் பொருளின் மூலம், நீங்கள் ஆவணத்தின் உடலை - உடல் குறிச்சொல் - சில பயனுள்ள பண்புகளுடன் அணுகலாம்.

எடுத்துக்காட்டாக, உடல் குறிச்சொல் இரண்டு பண்புகளைக் கொண்டுள்ளது: கிளையன்ட் சாளரத்தின் அகலம் மற்றும் உயரம்:

document.body.clientHeight — கிளையன்ட் சாளரத்தின் உயரம்
document.body.clientWidth — கிளையன்ட் சாளரத்தின் அகலம்


ஆனால் மிக முக்கியமான விஷயம், நாம் ஏற்கனவே கற்றுக்கொண்டது போல, ஆவணம் பொருள் மூலம், சிறப்பு முறைகள் மூலம், அனைத்து பக்க உறுப்புகளுக்கும் அணுகல் வழங்கப்படுகிறது, அதாவது குறிச்சொற்கள்.

முக்கியமானது: இந்த வழியில் பக்க குறிச்சொற்களை அணுகும்போது, ​​உடலை மூடுவதற்கு முன், ஸ்கிரிப்ட் உறுப்பு மரத்தின் முடிவில் இருக்க வேண்டும் ! ஸ்கிரிப்ட் செயல்படுத்தப்படும் நேரத்தில், எல்லா கூறுகளும் ஏற்கனவே திரையில் உலாவியால் "வரையப்பட்டிருக்க வேண்டும்"

வேலை js8_1 . உலாவி சாளரத்தின் அளவைப் பற்றிய செய்தியைக் காட்டு: எடுத்துக்காட்டாக, "உலாவி சாளர பரிமாணங்கள் 600 x 400"

ஜாவாஸ்கிரிப்டில் ஆவணக் கூறுகளை அணுகுதல்

பொருட்களை அணுக அல்லது தேட பல விருப்பங்கள் உள்ளன:

ஐடி மூலம் தேடுங்கள் (அல்லது getElementById முறை), குறிப்பிட்ட உறுப்பை வழங்கும்

குறிச்சொல் பெயர் (அல்லது getElementsByTagName முறை) மூலம் தேடுதல், உறுப்புகளின் வரிசையை வழங்குகிறது

பெயர் பண்புக்கூறு (அல்லது getElementsByName முறை) மூலம் தேடவும், உறுப்புகளின் வரிசையை வழங்குகிறது

பெற்றோர் கூறுகள் வழியாக (எல்லா குழந்தைகளையும் பெறுதல்)

ஒவ்வொரு விருப்பத்தையும் இன்னும் விரிவாகக் கருதுவோம்.

ஒரு உறுப்பை அதன் ஐடி பண்புக்கூறு வழியாக அணுகுதல்

தொடரியல்: document.getElementById(id)

getElementById() முறையானது உறுப்பையே வழங்குகிறது, பின்னர் இது தரவை அணுக பயன்படும்

எடுத்துக்காட்டு: பக்கமானது ஐடி="கேக்" பண்புடன் உரைப் புலத்தைக் கொண்டுள்ளது:

...

அவசியமானது

✍ தீர்வு:

எச்சரிக்கை(document.getElementById("கேக்").மதிப்பு); // "கேக்குகளின் எண்ணிக்கை" திரும்பும்

ஒரு மாறி மூலம் பொருளை அணுகுவதன் மூலம் நீங்கள் அதையே செய்யலாம்:

var a=document.getElementById("கேக்"); எச்சரிக்கை(a.value); // மதிப்பு பண்புக்கூறின் மதிப்பைக் காட்டு, அதாவது. உரை "கேக்குகளின் எண்ணிக்கை"

முக்கியமானது: குறிச்சொல்லுக்குப் பிறகு ஸ்கிரிப்ட் அமைந்திருக்க வேண்டும்!

பெயர் குறிச்சொல் மற்றும் வரிசை அட்டவணை மூலம் உறுப்புகளின் வரிசையை அணுகுதல்

தொடரியல்:
document.getElementsByTagName(பெயர்);

எடுத்துக்காட்டு: பக்கத்தில் ஒரு உரை புலம் உள்ளது (உள்ளீட்டு குறிச்சொல்), மதிப்பு பண்புடன்:

...

தேவை: அதன் மதிப்பு பண்புக்கூறின் மதிப்பைக் காட்டவும்

getElementsByTagName முறையானது அனைத்து உள்ளீட்டு உறுப்புகளுக்கும் (அதாவது, உள்ளீட்டு கூறுகளின் வரிசை) மாறி மூலம் அணுகலை வழங்குகிறது, இந்த உறுப்பு பக்கத்தில் மட்டுமே இருந்தாலும் கூட. ஒரு குறிப்பிட்ட உறுப்பை அணுக, எடுத்துக்காட்டாக முதல் ஒன்று, அதன் குறியீட்டைக் குறிப்பிடுகிறோம் (வரிசையானது குறியீட்டு பூஜ்ஜியத்தில் தொடங்குகிறது).

✍ தீர்வு:

குறியீட்டின் மூலம் ஒரு குறிப்பிட்ட உறுப்பை அணுகுவோம்:

var a =document.getElementsByTagName("உள்ளீடு"); எச்சரிக்கை(a.value); // "கேக்குகளின் எண்ணிக்கை" திரும்பும்

பெயர் பண்புக்கூறின் மதிப்பின் மூலம் உறுப்புகளின் வரிசையை அணுகுதல்

தொடரியல்:
document.getElementsByName(பெயர்);

getElementsByName("...") முறையானது, ஒரு முறை அளவுருவாகக் குறிப்பிடப்பட்ட மதிப்பிற்குச் சமமாக இருக்கும் பொருள்களின் வரிசையை வழங்குகிறது. பக்கத்தில் ஒரே ஒரு உறுப்பு மட்டுமே இருந்தால், முறை இன்னும் ஒரு வரிசையை வழங்குகிறது (ஒரே ஒரு உறுப்புடன்).

எடுத்துக்காட்டு: ஆவணத்தில் ஒரு உறுப்பு உள்ளது என்று வைத்துக்கொள்வோம்:

var உறுப்பு = document.getElementsByName("MyElem"); எச்சரிக்கை(Element.value);

IN இந்த எடுத்துக்காட்டில்ஒரே ஒரு உறுப்பு உள்ளது, ஆனால் வரிசையின் பூஜ்ஜிய உறுப்புக்கு அணுகல் செய்யப்படுகிறது.

முக்கியமான:விவரக்குறிப்பில் பெயர் பண்புக்கூறு வெளிப்படையாக வழங்கப்பட்டுள்ள கூறுகளுடன் மட்டுமே இந்த முறை செயல்படுகிறது: இவை வடிவம் , உள்ளீடு , a , தேர்ந்தெடுக்கப்பட்ட , textarea மற்றும் பல, மிகவும் அரிதான, குறிச்சொற்கள்.

document.getElementsByName முறையானது div , p , போன்ற பிற உறுப்புகளுடன் வேலை செய்யாது.

பெற்றோர் உறுப்புகளின் வழித்தோன்றல்களை அணுகுதல்

சைல்ட்நோட்ஸ் சொத்து மூலம் குழந்தைகள் ஜாவாஸ்கிரிப்டில் அணுகப்படுகிறார்கள். சொத்து பெற்றோர் பொருளுக்கு சொந்தமானது.

document.getElementById(roditel).childNodes;

document.getElementById(roditel).childNodes;

div டேக் எனப்படும் கொள்கலனில் படக் குறிச்சொற்கள் வைக்கப்படும் உதாரணத்தைப் பார்ப்போம். எனவே, div டேக் என்பது படத் தரவின் பெற்றோர், மற்றும் img குறிச்சொற்கள், அதன்படி, div குறிச்சொல்லின் குழந்தைகள்:

இப்போது அவுட்புட் செய்வோம் மாதிரி சாளரம்சந்ததிகள் கொண்ட வரிசை உறுப்புகளின் மதிப்புகள், அதாவது. img குறிச்சொற்கள்:

var myDiv=document.getElementById("div_for_img"); // பெற்றோர் கொள்கலனை அணுகவும் var childMas=myDiv.childNodes; // சந்ததிகளின் வரிசை (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

ஒரு சந்ததி வரிசையின் கூறுகள் மூலம் மீண்டும் ஒரு சுழற்சியைப் பயன்படுத்துவது வசதியானது என்பதை நினைவில் கொள்க. அந்த. எங்கள் எடுத்துக்காட்டில் நாம் ஒரு சுழற்சியைப் பெறுகிறோம்:

...க்கு (var a in childMas) ( எச்சரிக்கை(childMas[a].src ) ; )

(var a in childMas) (எச்சரிக்கை(childMas[a].src); )

உறுப்புகளை அணுகுவதற்கான பிற வழிகள்

ஒரு உதாரணத்தைப் பயன்படுத்தி மற்ற முறைகளைப் பார்ப்போம்:

1 3 4

1 3 4

அணுகல்:

... // தேவையற்ற மற்றும் நிராகரிக்கப்பட்ட உறுப்பு அணுகல்கள்: எச்சரிக்கை(document.forms [ 0 ] .name ) ; // f எச்சரிக்கை(document.forms [ 0 ] . உறுப்புகள் [ 0 ] .வகை ); // உரை எச்சரிக்கை(document.forms [0] .கூறுகள் [2] .விருப்பங்கள் [1] .id) ; // o2 எச்சரிக்கை (document.f .b .type ) ; // பொத்தான் எச்சரிக்கை (document.f .s .name ) ; // ss எச்சரிக்கை (document.f .s . விருப்பங்கள் [ 1 ] .id ) ; // o2 // உறுப்புகளை அணுகுவதற்கான விருப்பமான முறைகள் எச்சரிக்கை(document.getElementById ("t" ) .type ) ; // உரை எச்சரிக்கை(document.getElementById ("s" ) .name ) ; // ss எச்சரிக்கை(document.getElementById ("s") .விருப்பங்கள் [1 ] .id ) ; // 02 எச்சரிக்கை(document.getElementById ("o3" ) .text ) ; //4...

... // தேவையற்ற மற்றும் நிராகரிக்கப்பட்ட உறுப்பு அணுகல் முறைகள்: எச்சரிக்கை(document.forms.name); // f எச்சரிக்கை(document.forms.elements.type); // உரை எச்சரிக்கை (document.forms.elements.options.id); // o2 எச்சரிக்கை (document.f.b.type); // பொத்தான் எச்சரிக்கை (document.f.s.name); // எஸ்எஸ் எச்சரிக்கை (document.f.s.options.id); // o2 // உறுப்புகளை அணுகுவதற்கான விருப்பமான முறைகள் எச்சரிக்கை(document.getElementById("t").type); // உரை எச்சரிக்கை(document.getElementById("s").name); // ss எச்சரிக்கை(document.getElementById("s").options.id); // 02 எச்சரிக்கை(document.getElementById("o3").text); //4...

எடுத்துக்காட்டு: ஒரு HTML ஆவணத்தில், ஒரு பொத்தான் மற்றும் உரை புலத்தை உருவாக்கவும். ஸ்கிரிப்டைப் பயன்படுத்தி, பொத்தான் பின்னணியை வண்ணம் தீட்டவும் (பொத்தானின் பாணி.பின்னணி வண்ணம்) மற்றும் கல்வெட்டைக் காண்பிக்கவும் "வணக்கம்!"உரை புலத்தில் (மதிப்பு பண்பு).

HTML குறியீடு:

document.getElementById("t1").value = "வணக்கம்!"; document.getElementById("b1").style.backgroundColor = "red";!}

விருப்பம் 2:

document.getElementById ("t1" ) .setAttribute ( "மதிப்பு" , "வணக்கம்!" ); document.getElementById("b1" ) .style .backgroundColor = "red" ;

document.getElementById("t1").setAttribute("மதிப்பு","வணக்கம்!"); document.getElementById("b1").style.backgroundColor = "சிவப்பு";

பணி Js8_2. படத்தில் காட்டப்பட்டுள்ளபடி உரை புல குறிச்சொற்களை உருவாக்கவும். தொடர்புடைய (படத்தில் காட்டப்பட்டுள்ளது) ஐடி பண்புக்கூறு மதிப்புகளை அவர்களுக்கு வழங்கவும். ஒரு ஸ்கிரிப்டைப் பயன்படுத்தி, அனைத்து எண் புலங்களுக்கும் "0" மதிப்பைச் சேர்க்கவும் (எண் மதிப்புகளை எடுத்துக் கொள்ளுங்கள்)

படிவத் தரவு சரியாக உள்ளிடப்பட்டுள்ளதா எனச் சரிபார்க்கிறது

களம் காலியாக உள்ளதா?

பயனர் உள்ளீட்டை நம்ப முடியாது. தரவை உள்ளிடும்போது பயனர்கள் தரவைச் சரிபார்ப்பார்கள் என்று கருதுவது நியாயமற்றது. எனவே இதற்கு ஜாவாஸ்கிரிப்ட் பயன்படுத்த வேண்டும்.

உரைப் புலம் காலியாக உள்ளதா என்பதைச் சரிபார்க்க (உதாரணமாக, பயனர் சில படிவத்தின் தரவை நிரப்பிய பிறகு), நீங்கள் மதிப்பு சொத்தைப் பார்க்க வேண்டும். சொத்து மதிப்பு என்றால் வெற்று வரி(""), அதாவது எப்படியாவது இதைப் பற்றி பயனருக்குத் தெரிவிக்க வேண்டியது அவசியம்.

if(document.getElementById("name").value=="") (சில செயல்கள், எடுத்துக்காட்டாக, ஒரு புலத்தை நிரப்பச் சொல்லும் செய்தியைக் காண்பித்தல்);

கூடுதலாக, நீங்கள் ஸ்கிரிப்ட் இல்லாமல் செய்யலாம். உள்ளீட்டு குறிச்சொல்லில் உரை புலம்ஒரு மாதிரி பண்பு உள்ளது. அதன் மதிப்பு குறிப்பிடப்பட்டுள்ளது வழக்கமான வெளிப்பாடுகொடுக்கப்பட்ட படிவ உரை புலத்தில் தரவை சரிபார்க்க. பண்பு இருந்தால் முறை, இந்த உரை புலம் சரியாக நிரப்பப்படும் வரை படிவம் சமர்ப்பிக்கப்படாது.
எடுத்துக்காட்டாக, ஒரு புலம் காலியாக உள்ளதா என்பதைச் சரிபார்க்க:

அதற்கு பதிலாக உரை எண் மதிப்பு: செயல்பாடு என்பதுNaN

ஒரு புலத்திற்கு எண் மதிப்பை உள்ளிட வேண்டும், ஆனால் அதற்கு பதிலாக பயனர் உரையை உள்ளிடினால், isNaN செயல்பாடு பயன்படுத்தப்பட வேண்டும். "எண் இல்லையா?"), இது உள்ளீட்டுத் தரவின் வகையைச் சரிபார்த்து, எண் தரவுகளுக்குப் பதிலாக உரைத் தரவு உள்ளிடப்பட்டால் உண்மை என்பதைத் தரும்.

அந்த. உண்மை திரும்பினால், சரியான வடிவமைப்பை உள்ளிட பயனருக்கு அறிவிக்கப்பட வேண்டும், அதாவது. எண்.

if(isNaN(document.getElementById("minutes").value))( நீங்கள் எண் தரவுகளை உள்ளிட வேண்டிய எச்சரிக்கை);

நிரப்புவதற்கான கூறுகளுடன் ஒரு பக்கம் கொடுக்கப்பட்டுள்ளது:


துண்டு html குறியீடு:

1 2 3 4 5 6 7 8 9 10 11 12

பெயர்: டோனட்ஸ் எண்ணிக்கை: நிமிடங்கள்: சுருக்கம்: வரி: விளைவாக: ...

பெயர்:
டோனட்ஸ் எண்ணிக்கை:
நிமிடங்கள்:
சுருக்கம்:
வரி:
விளைவாக:
...

அவசியம்:
இரண்டு உரை புலங்கள் சரியாக நிரப்பப்பட்டுள்ளதா என்பதைச் சரிபார்க்கும் கீழே உள்ள குறியீடு துணுக்கில் உள்ள வெற்றிடங்களை நிரப்பவும்: பெயர்(id="name") மற்றும் நிமிடங்கள்(id="நிமிடங்கள்"). புலம் காலியாக உள்ளதா ("") மற்றும் எண் புலம் சரியாக நிரப்பப்பட்டுள்ளதா (isNaN) என்பதை உறுதிப்படுத்த காசோலைகளைப் பயன்படுத்தவும்.

* பயன்படுத்தி உரை புலங்களின் வடிவ பண்புடன் பணியைச் செய்யவும்.

ஸ்கிரிப்ட் துண்டு:

சிக்கலான நிலைமைகளை உருவாக்க குறியீடு முன்பு கற்ற நிலைமைகளைப் பயன்படுத்துகிறது.

உங்களுக்கான புதிய கருத்து, ஒரு செயல்பாட்டை பொத்தான் நிகழ்வு கையாளுபவராக அழைக்கிறது:
onclick="placeOrder();"
பொத்தானைக் கிளிக் செய்யும் போது, ​​placeOrder() செயல்பாடு அழைக்கப்படும்

நீங்கள் ஒரு விருப்பத்தை உருவாக்கலாம் பிணைப்பு பிணைப்பு, இது ஒரு குறிப்பிட்ட கவனிக்கக்கூடிய பூலியனின் மதிப்பைச் சரிபார்க்கும் அல்லது பண்புகளைச் சேர்க்காமல் இருக்கும். இந்த உதாரணத்தைப் பார்க்கவும்:

Ko.bindingHandlers.attrIf = (புதுப்பிப்பு: செயல்பாடு (உறுப்பு, மதிப்பு அணுகல், அனைத்துBindingsAccessor) (var h = ko.utils.unwrapObservable(valueAccessor()); var show = ko.utils.unwrapObservable(h._if); என்றால் (காண்க) ( ko.bindingHandlers.attr.update(eement, valueAccessor, allBindingsAccessor); ) வேறு ( ( var k in h) ( என்றால் (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(உறுப்பு).removeAttr(k); இணைப்பு

நான் @gbs க்கு பதில் சொல்ல விரும்புகிறேன், ஆனால் என்னால் முடியாது. என் தீர்வு அதே இரண்டு வேண்டும் HTML உறுப்பு: பண்புடன் கூடிய ஒன்று, பண்புக்கூறு இல்லாதது மற்றும் உறுப்புக்கு ஏற்ப அவற்றில் ஒன்றைச் சேர்க்க நாக் அவுட் நிபந்தனை. இந்த பொதுவான எதிர்பார்ப்பையும் நான் அறிவேன், ஆனால் எந்த தீர்வு மிகவும் திறமையானது?

இந்த பயிற்சி jQuery இல் உள்ள உறுப்பு பண்புகளை படித்து மாற்றுவது பற்றியது.

பண்புக்கூறுகள் என்பது குறிச்சொல்லில் உள்ள உறுப்புகளுக்கு ஒதுக்கப்படும் பெயர்/மதிப்பு ஜோடி. பண்புகளின் எடுத்துக்காட்டுகள் ( href, தலைப்பு, src, வர்க்கம்):

சுருக்கமான உரை இதோ

• attr() படிக்க, சேர்க்க மற்றும் பண்புகளை மாற்ற
• பண்புகளை நீக்க removeAttr().

இந்தப் பாடம் attr() மற்றும் removeAttr() முறைகளுடன் வேலை செய்வதை உள்ளடக்கியது.

CSS வகுப்புகளுடன் பணிபுரிய சிறப்பு jQuery முறைகள் உள்ளன, அவை மற்றொரு பாடத்தில் விவரிக்கப்பட்டுள்ளன. jQuery இல் ஒரு திட்டப்பணியில் பணிபுரியும் போது, ​​நீங்கள் CSS வகுப்புகளை நிறைய கையாள வேண்டும், மேலும் வகுப்பு பண்புக்கூறில் பல வகுப்பு பெயர்கள் இருக்கலாம், இது மற்ற பண்புகளை விட அதனுடன் பணிபுரிவது மிகவும் சிக்கலானது.

நீங்கள் உள்ளீட்டு புலங்களின் மதிப்புகளுடன் பணிபுரியப் போகிறீர்கள் என்றால், val() முறையைப் பயன்படுத்துவது நல்லது, இது மதிப்பு பண்புக்கூறுடன் பணிபுரியும் எளிமையான வழியை வழங்குவதோடு மட்டுமல்லாமல், மதிப்புகளைப் படிக்கவும் அமைக்கவும் முடியும். தேர்ந்தெடுக்கப்பட்ட பட்டியலில் தேர்ந்தெடுக்கப்பட்ட உறுப்புகளில்.

பண்பு மதிப்பைப் படித்தல்

ஒரு தனிமத்தின் பண்புக்கூறின் மதிப்பைப் படிப்பது எளிது. உறுப்பைக் கொண்டிருக்கும் jQuery ஆப்ஜெக்ட்டில் attr() முறையை மட்டுமே நீங்கள் அழைக்க வேண்டும், அதை படிக்க வேண்டிய பண்புக்கூறின் பெயரை அனுப்ப வேண்டும். இந்த முறை பண்புக்கூறு மதிப்பை வழங்குகிறது:

// #myLink உறுப்பு எச்சரிக்கையின் ($("a#myLink").attr("href")) பண்புக்கூறின் "href" மதிப்பை அச்சிடவும்;

உங்கள் jQuery ஆப்ஜெக்ட்டில் பல கூறுகள் இருந்தால், attr() முறையானது தொகுப்பில் உள்ள முதல் உறுப்புக்கான பண்புக்கூறு மதிப்புகளைப் படிக்கும்.

பண்புக்கூறு மதிப்புகளை அமைத்தல்

பண்புக்கூறு மதிப்புகளைச் சேர்க்க அல்லது மாற்ற attr() முறையைப் பயன்படுத்தலாம்:

• பண்பு என்றால் இல்லைஉறுப்பு, அது இருக்கும் சேர்க்கப்பட்டதுமேலும் அது குறிப்பிட்ட மதிப்பு ஒதுக்கப்படும்.
• பண்பு என்றால் ஏற்கனவே இருக்கிறது, அதன் மதிப்பு இருக்கும் புதுப்பிக்கப்பட்டதுகொடுக்கப்பட்ட மதிப்பு.

பண்புகளைச் சேர்க்க அல்லது மாற்ற attr() முறையைப் பயன்படுத்த மூன்று வழிகள் உள்ளன:

எந்தவொரு உறுப்புக்கும் (அல்லது உறுப்புகளின் தொகுப்பு) பண்புக்கூறுகளைச் சேர்க்கலாம்/மாற்றலாம்.

பண்புக்கூறு பெயர்கள் மற்றும் மதிப்புகளின் வரைபடத்தைக் குறிப்பிடுவதன் மூலம் ஒரு உறுப்புக்கு (அல்லது உறுப்புகள்) ஒரே நேரத்தில் பல பண்புக்கூறுகளைச் சேர்க்கலாம்/மாற்றலாம்.

கால்பேக் செயல்பாட்டைப் பயன்படுத்தி பல உறுப்புகளுக்கு ஒரு பண்புக்கூறை மாறும் வகையில் சேர்க்கலாம்/மாற்றலாம்.

ஒரு பண்புக்கூறை அமைக்கவும்

ஒரு உறுப்பின் பண்புக்கூறை அமைக்க அல்லது மாற்ற, பண்புக்கூறின் பெயர் மற்றும் மதிப்பைக் குறிப்பிடும் attr() முறையை நீங்கள் அழைக்க வேண்டும். உதாரணத்திற்கு:

// #myLink உறுப்பின் "href" பண்புக்கூறின் மதிப்பை "http://www.example.com/" மதிப்புக்கு மாற்றவும் // ("href" பண்புக்கூறு இல்லை என்றால், அது தானாகவே உருவாக்கப்படும்) $("a#myLink") attr("href", "http://www.example.com/");

பல உறுப்புகளுக்கு ஒரே பண்புக்கூறை அமைக்கவும் முடியும்:

வரைபடத்தைப் பயன்படுத்தி பல பண்புக்கூறுகளை அமைத்தல்

வரைபடத்தைப் பயன்படுத்தி ஒன்று அல்லது அதற்கு மேற்பட்ட உறுப்புகளில் ஒரே நேரத்தில் பல பண்புக்கூறுகளை அமைக்கலாம். இது போல் தோற்றமளிக்கும் பெயர்/மதிப்பு ஜோடிகளின் பட்டியல்:

(பெயர்1: மதிப்பு1, பெயர்2: மதிப்பு2, ...)

பின்வரும் எடுத்துக்காட்டு ஒரே நேரத்தில் img உறுப்பில் இரண்டு பண்புக்கூறுகளை அமைக்கிறது:

// img உறுப்புக்கான "src" மற்றும் "alt" பண்புகளை அமைக்கவும் #myPhoto $("img#myPhoto").attr(( "src": "mypic.jpg", "alt": "My Photo" )) ;

நீங்கள் பல உறுப்புகளுக்கான பண்புக்கூறுகளையும் அமைக்கலாம்:

// அனைத்து img உறுப்புகளுக்கும் "src" மற்றும் "alt" பண்புகளை அமைக்கவும் $("img").attr(( "src": "mypic.jpg", "alt": "My Photo" ));

கால்பேக் செயல்பாட்டைப் பயன்படுத்தி பண்புகளை அமைத்தல்

attr() முறைக்கு பண்புக்கூறு மதிப்புகளை அனுப்புவதற்குப் பதிலாக, நீங்கள் கால்பேக் செயல்பாட்டின் பெயரை அனுப்பலாம். இந்த வழியில், உறுப்பு நிலை, ஏற்கனவே உள்ள பண்புக்கூறு மதிப்பு அல்லது பிற பண்புகளின் அடிப்படையில் பல உறுப்புகளுக்கான பண்புக்கூறு மதிப்புகளை மாறும் வகையில் அமைக்கலாம்.

திரும்பும் செயல்பாடு இரண்டு வாதங்களை எடுக்க வேண்டும்:

• தொகுப்பில் தற்போது தேர்ந்தெடுக்கப்பட்ட உறுப்பு நிலையின் குறியீடு (பூஜ்ஜியத்தில் தொடங்குகிறது)
• தற்போது தேர்ந்தெடுக்கப்பட்ட உறுப்புக்கான பழைய பண்புக்கூறு மதிப்பு

செயல்பாட்டால் வழங்கப்படும் மதிப்பு பண்புக்கூறு மதிப்பை மாற்ற பயன்படுத்தப்படுகிறது.

உறுப்பின் தற்போதைய நிலை மற்றும் பண்புக்கூறின் பழைய மதிப்புக்கு கூடுதலாக, உங்கள் செயல்பாடு விசையைப் பயன்படுத்தி உறுப்பை அணுக முடியும் வார்த்தைகள் இந்த. இந்த வழியில், நீங்கள் கால்பேக் செயல்பாட்டிலிருந்து எந்த உறுப்பு சொத்து அல்லது முறையையும் அணுகலாம்.

படத்தின் நிலை மற்றும் அதன் src பண்புக்கூறுகளின் அடிப்படையில் பக்கத்தில் உள்ள ஒவ்வொரு படத்திற்கும் alt பண்புக்கூறைச் சேர்க்க, ஒரு கால்பேக் செயல்பாட்டை எடுத்துக்காட்டு பயன்படுத்துகிறது:

$(init); செயல்பாடு init() ( // அனைத்து "img" உறுப்புகளுக்கும் "alt" பண்புக்கூறை அமைக்கவும் $("img").attr("alt", setAltText); செயல்பாடு setAltText(index, attributeValue) (திரும்பவும் ("படம் " + (குறியீடு +1) + ": " + this.src);

குறியீட்டை இயக்கிய பிறகு, முதல் படம் "படம் 1: myphoto.jpg" மதிப்புடன் ஒரு alt பண்புக்கூறைக் கொண்டிருக்கும், மேலும் இரண்டாவது படம் "Figure 2: yourphoto.jpg" மதிப்புடன் alt பண்புக்கூறைக் கொண்டிருக்கும்.

ஒரு பண்பு நீக்கம்

ஒரு உறுப்பிலிருந்து ஒரு பண்புக்கூறை அகற்ற, நீங்கள் removeAttr() முறையை அழைக்க வேண்டும், அதை அகற்ற வேண்டிய பண்புக்கூறின் பெயரைக் கொடுக்க வேண்டும். உதாரணத்திற்கு:

// #myLink உறுப்பு $("a#myLink") இலிருந்து "தலைப்பு" பண்புக்கூறை அகற்றவும்.removeAttr("title");

பல கூறுகளைக் கொண்ட jQuery ஆப்ஜெக்ட்டில் நீங்கள் removeAttr() முறையை அழைக்கலாம். RemoveAttr() முறையானது அனைத்து உறுப்புகளிலிருந்தும் குறிப்பிட்ட பண்புக்கூறை அகற்றும்:

// எல்லா இணைப்புகளிலிருந்தும் "தலைப்பு" பண்புக்கூறை அகற்று $("a").removeAttr("title");

சுருக்கம்

இந்த பாடம் jQuery இல் உறுப்பு பண்புகளுடன் பணிபுரிவதில் உள்ள சிக்கல்களை உள்ளடக்கியது:

• பண்புக்கூறு மதிப்புகளைப் படித்தல்
• ஒரு பண்புக்கூறை அமைத்தல்
• ஒரே நேரத்தில் பல்வேறு பண்புகளை அமைத்தல்
• ஒரு கால்பேக் செயல்பாட்டைப் பயன்படுத்தி, தனிமங்களின் தொகுப்பில் பண்புக்கூறு மதிப்புகளை மாறும் வகையில் அமைக்கவும்
• ஒரு உறுப்பு இருந்து பண்புகளை நீக்குதல்

குறிப்பிட்ட உறுப்பு மீது பண்புக்கூறின் மதிப்பை அமைக்கிறது. பண்புக்கூறு ஏற்கனவே இருந்தால், மதிப்பு புதுப்பிக்கப்படும்; இல்லையெனில் குறிப்பிட்ட பெயர் மற்றும் மதிப்புடன் ஒரு புதிய பண்பு சேர்க்கப்படும்.

தொடரியல் உறுப்பு.setAtribute( பெயர், மதிப்பு); அளவுருக்கள் ஒரு DOMString பெயரைக் குறிப்பிடுகிறது, அதன் மதிப்பை அமைக்க வேண்டிய பண்புக்கூறின் பெயரைக் குறிப்பிடுகிறது. ஒரு HTML ஆவணத்தில் setAttribute() ஆனது HTML உறுப்பில் அழைக்கப்படும் போது பண்புக்கூறு பெயர் தானாகவே அனைத்து சிறிய எழுத்துகளாக மாற்றப்படும். மதிப்பு பண்புக்கூறுக்கு ஒதுக்க வேண்டிய மதிப்பைக் கொண்ட DOMString. குறிப்பிடப்பட்ட எந்த சரம் அல்லாத மதிப்பும் தானாக சரமாக மாற்றப்படும்.

பூலியன் பண்புக்கூறுகள் அவற்றின் உண்மையான மதிப்பைப் பொருட்படுத்தாமல் "உறுப்பில் இருந்தால் அவை உண்மையாகக் கருதப்படும்; ஒரு விதியாக, நீங்கள் வெற்று சரத்தை ("") மதிப்பில் குறிப்பிட வேண்டும் (சிலர் பண்புக்கூறின் பெயரைப் பயன்படுத்துகின்றனர்; இது வேலை செய்கிறது ஆனால் தரமற்றது). ஒரு நடைமுறை விளக்கத்திற்கு கீழே பார்க்கவும்.

குறிப்பிடப்பட்ட மதிப்பு ஒரு சரமாக மாற்றப்படுவதால், பூஜ்யத்தைக் குறிப்பிடுவது நீங்கள் எதிர்பார்ப்பதைச் செய்ய வேண்டிய அவசியமில்லை. பண்புக்கூறை அகற்றுவதற்குப் பதிலாக அல்லது அதன் மதிப்பை பூஜ்யமாக அமைப்பதற்குப் பதிலாக, அது பண்புக்கூறின் மதிப்பை "பூஜ்ய" சரத்திற்கு அமைக்கிறது. நீங்கள் ஒரு பண்புக்கூறை அகற்ற விரும்பினால், removeAttribute() ஐ அழைக்கவும்.

திரும்ப மதிப்பு விதிவிலக்குகள் செல்லாது. உதாரணமாக

பின்வரும் எடுத்துக்காட்டில், ஒரு பண்புக்கூறுகளை அமைக்க setAttribute() பயன்படுத்தப்படுகிறது.

HTML Hello World JavaScript var b = document.querySelector("பொத்தான்"); b.setAttribute("பெயர்", "helloButton"); b.setAttribute("முடக்கப்பட்டது", "");

இது இரண்டு விஷயங்களைக் காட்டுகிறது:

• மேலே உள்ள setAttribute()க்கான முதல் அழைப்பு, பண்புக்கூறின் மதிப்பை "helloButton" ஆக மாற்றுவதைக் காட்டுகிறது. இதை உங்கள் உலாவியின் பக்க ஆய்வாளரைப் பயன்படுத்தி (Chrome, Edge, Firefox, Safari) பார்க்கலாம்.
• முடக்கப்பட்டது போன்ற பூலியன் பண்புக்கூறின் மதிப்பை அமைக்க, நீங்கள் எந்த மதிப்பையும் குறிப்பிடலாம். வெற்று சரம் அல்லது பண்புக்கூறின் பெயர் பரிந்துரைக்கப்படும் மதிப்புகள். முக்கிய விஷயம் என்னவென்றால், பண்பு இருந்தால், அதன் உண்மையான மதிப்பைப் பொருட்படுத்தாமல், அதன் மதிப்பு உண்மையாகக் கருதப்படுகிறது. பண்புக்கூறு இல்லாததால் அதன் மதிப்பு தவறானது. முடக்கப்பட்ட பண்புக்கூறின் மதிப்பை வெற்று சரத்திற்கு ("") அமைப்பதன் மூலம், முடக்கப்பட்டவை true என அமைக்கிறோம், இதன் விளைவாக பொத்தான் முடக்கப்படும்.

உறுப்பு பண்புகளை கையாளும் DOM முறைகள்:

நேம்ஸ்பேஸ்-அறிவு அல்ல, பொதுவாகப் பயன்படுத்தப்படும் முறைகள் Namespace-aware variants (DOM Level 2) Attr முனைகளை நேரடியாகக் கையாள்வதற்கான DOM நிலை 1 முறைகள் (அரிதாகப் பயன்படுத்தப்படுகின்றன) DOM நிலை 2 நேரடியாக Attr முனைகளைக் கையாள்வதற்கான பெயர்வெளி-அறிவு முறைகள் (அரிதாகப் பயன்படுத்தப்படுகின்றன)

setAtribute(DOM 1)	setAtributeNS	setAtributeNode	setAtributeNodeNS
getAtribute(DOM 1)	getAtributeNS	getAtributeNode	getAtributeNodeNS
பண்புக்கூறு(DOM2)	பண்புக்கூறுகள் உள்ளது	-	-
நீக்கும் பண்பு (DOM 1)	நீக்க பண்புக்கூறுஎன்எஸ்	நீக்க பண்புக் கணு	-

விவரக்குறிப்பு

• DOM நிலை 2 கோர்: setAttribute (DOM நிலை 1 மையத்தில் அறிமுகப்படுத்தப்பட்டது)

உலாவி இணக்கத்தன்மை

இந்தப் பக்கத்தில் உள்ள பொருந்தக்கூடிய அட்டவணை கட்டமைக்கப்பட்ட தரவிலிருந்து உருவாக்கப்பட்டது. நீங்கள் தரவில் பங்களிக்க விரும்பினால், தயவுசெய்து https://github.com/mdn/browser-compat-data ஐப் பார்க்கவும் மற்றும் எங்களுக்கு இழுக்கும் கோரிக்கையை அனுப்பவும்.

GitHub இல் பொருந்தக்கூடிய தரவைப் புதுப்பிக்கவும்

டெஸ்க்டாப் மொபைல்குரோம் எட்ஜ் பயர்பாக்ஸ் இன்டர்நெட் எக்ஸ்புளோரர்ஓபரா சஃபாரி ஆண்ட்ராய்டு வெப்வியூ ஆண்ட்ராய்டு பயர்பாக்ஸிற்கான குரோம் ஐஓஎஸ் சாம்சங் இணையத்தில் ஆண்ட்ராய்டு சஃபாரிக்கான ஆண்ட்ராய்டு ஓபராதொகுப்பு பண்பு

Chrome முழு ஆதரவு ஆம்	எட்ஜ் முழு ஆதரவு 12	Firefox முழு ஆதரவு ஆம்	IE முழு ஆதரவு 5 குறிப்புகள் முழு ஆதரவு 5 குறிப்புகள் குறிப்புகள் இன்டர்நெட் எக்ஸ்புளோரர் 7 மற்றும் அதற்கு முந்தையவற்றில், setAttribute ஸ்டைல்களை அமைக்காது மற்றும் நிகழ்வுகளை அமைக்க முயலும்போது அவற்றை நீக்கிவிடும்.	ஓபரா முழு ஆதரவு ஆம்	சஃபாரி முழு ஆதரவு 6	WebView Android முழு ஆதரவு ஆம்	Chrome Android முழு ஆதரவு ஆம்	Firefox Android முழு ஆதரவு ஆம்	Opera Android முழு ஆதரவு ஆம்	Safari iOS முழு ஆதரவு ஆம்	Samsung இணைய ஆண்ட்ராய்டு முழு ஆதரவு ஆம்

லெஜண்ட் முழு ஆதரவு முழு ஆதரவு செயல்படுத்தல் குறிப்புகளைப் பார்க்கவும். செயல்படுத்தல் குறிப்புகளைப் பார்க்கவும். கெக்கோ குறிப்புகள்

சில பண்புகளை மாற்ற setAttribute() ஐப் பயன்படுத்துவது, குறிப்பாக XUL இல் உள்ள மதிப்பு, பண்புக்கூறு இயல்புநிலை மதிப்பைக் குறிப்பிடுவதால், சீரற்ற முறையில் செயல்படுகிறது. தற்போதைய மதிப்புகளை அணுக அல்லது மாற்ற, நீங்கள் பண்புகளைப் பயன்படுத்த வேண்டும். எடுத்துக்காட்டாக, Element.setAttribute() க்குப் பதிலாக Element.value ஐப் பயன்படுத்தவும்.

இந்த கட்டுரையில் நாம் DOM பண்புகள் மற்றும் பண்புகளை அறிந்து கொள்வோம், அவை எவ்வாறு வேறுபடுகின்றன மற்றும் அவற்றுடன் எவ்வாறு சரியாக வேலை செய்வது என்பதைக் கருத்தில் கொள்வோம். பண்புக்கூறுகளில் செயல்பாடுகளைச் செய்வதற்கு ஜாவாஸ்கிரிப்ட் என்ன முறைகளைக் கொண்டுள்ளது என்பதைப் பார்ப்போம்.

பண்புக்கூறுக்கும் DOM பண்புக்கும் என்ன வித்தியாசம்?

பண்புக்கூறுகள் HTML நிறுவனங்களாகும், இதன் மூலம் HTML குறியீட்டில் உள்ள உறுப்புகளில் சில தரவைச் சேர்க்கலாம்.

உலாவி ஒரு பக்கத்தைக் கோரும் போது, ​​அதன் HTML மூலக் குறியீட்டைப் பெறுகிறது. அதன் பிறகு, அது இந்த குறியீட்டை பாகுபடுத்தி அதன் அடிப்படையில் ஒரு DOM ஐ உருவாக்குகிறது. இந்தச் செயல்பாட்டின் போது, ​​உறுப்புகளின் HTML பண்புக்கூறுகள் தொடர்புடைய DOM பண்புகளாக மொழிபெயர்க்கப்படுகின்றன.

எடுத்துக்காட்டாக, உலாவி, HTML குறியீட்டின் பின்வரும் வரியைப் படிக்கும்போது, ​​இந்த உறுப்புக்கான பின்வரும் DOM பண்புகளை உருவாக்கும்: id , className , src மற்றும் alt .

இந்த பண்புகள் ஒரு பொருளின் பண்புகளாக ஜாவாஸ்கிரிப்ட் குறியீட்டில் அணுகப்படுகின்றன. இங்குள்ள பொருள் ஒரு DOM முனை (உறுப்பு) ஆகும்.

மேலே கொடுக்கப்பட்ட உறுப்புக்கான DOM பண்புகளின் மதிப்புகளைப் பெற்று, அவற்றின் மதிப்புகளை கன்சோலில் வெளியிடுவதற்கான எடுத்துக்காட்டு:

// உறுப்பு var brandImg = document.querySelector ("#brand") பெறவும்; // உறுப்பின் DOM பண்புகளின் மதிப்புகளை console.log (brandImg.id) இல் காட்டவும்; // "பிராண்ட்" console.log(brandImg.className); // "பிராண்ட்" console.log(brandImg.src); // "/logo.png" console.log(brandImg.alt); // "தள சின்னம்"

சில DOM சொத்துப் பெயர்கள் பண்புப் பெயர்களுடன் பொருந்தவில்லை. இவற்றில் ஒன்று வர்க்கப் பண்பு. இந்தப் பண்பு DOM சொத்து வர்க்கப்பெயருடன் ஒத்துப்போகிறது. வர்க்கம் என்பதாலேயே இந்த வேறுபாடு ஏற்படுகிறது முக்கிய வார்த்தைஜாவாஸ்கிரிப்டில், இது ஒதுக்கப்பட்டுள்ளது மற்றும் பயன்படுத்த முடியாது. இதன் காரணமாக, தரநிலையின் டெவலப்பர்கள் இணக்கத்திற்காக வேறு சில பெயரைப் பயன்படுத்த முடிவு செய்தனர், இது className எனத் தேர்ந்தெடுக்கப்பட்டது.

மற்றொரு நுணுக்கம் HTML பண்புக்கூறுகளின் மொழிபெயர்ப்பு குறிப்பிடப்பட்ட உண்மையுடன் தொடர்புடையது மூல குறியீடுஆவணம், DOM பண்புகள் எப்போதும் ஒன்றுக்கு ஒன்று செயல்படுத்தப்படுவதில்லை.

ஒரு உறுப்பு தரமற்ற HTML பண்புக்கூறு இருந்தால், DOM இல் அதனுடன் தொடர்புடைய சொத்து உருவாக்கப்படாது.

// உறுப்பைப் பெறவும் mydiv = document.querySelector("#mydiv"); // உறுப்பின் ஆல்ட் சொத்தின் மதிப்பைப் பெற்று அதை console.log(mydiv.alt) க்கு வெளியிடவும்; // undefined // உறுப்புகளின் alt பண்புக்கூறின் மதிப்பைப் பெற்று அதை console.log(mydiv.getAttribute("alt")) க்கு வெளியிடவும்; // "..."

மற்றொரு வித்தியாசம் என்னவென்றால், சில HTML பண்புக்கூறுகளின் மதிப்புகள் மற்றும் அவற்றுடன் தொடர்புடைய DOM பண்புகள் வேறுபட்டிருக்கலாம். அந்த. ஒரு பண்புக்கூறு ஒரு மதிப்பைக் கொண்டிருக்கலாம், அதன் அடிப்படையில் உருவாக்கப்பட்ட DOM சொத்து மற்றொரு மதிப்பைக் கொண்டிருக்கலாம்.

அத்தகைய ஒரு பண்பு சரிபார்க்கப்பட்டது.

இந்த வழக்கில் சரிபார்க்கப்பட்ட HTML பண்புக்கூறின் மதிப்பு வெற்று சரம். ஆனால், DOM இல் கொடுக்கப்பட்ட பண்புக்கூறுடன் தொடர்புடைய சொத்து இருக்கும் உண்மை. ஏனெனில் தரநிலையின் விதிகளின்படி, உண்மையாக அமைக்க, HTML குறியீட்டில் இந்த பண்புக்கூறைக் குறிப்பிடுவது போதுமானது, மேலும் அது என்ன மதிப்பைக் கொண்டிருக்கும் என்பது முக்கியமல்ல.

மேலும், வகை தேர்வுப்பெட்டியுடன் உள்ளீட்டு உறுப்புக்கான HTML குறியீட்டில் சரிபார்க்கப்பட்ட பண்புக்கூறை நாங்கள் குறிப்பிடாவிட்டாலும், சரிபார்க்கப்பட்ட சொத்து DOM இல் இன்னும் உருவாக்கப்படும், ஆனால் அது தவறானதாக இருக்கும்.

கூடுதலாக, ஜாவாஸ்கிரிப்ட் உங்களை பண்புகளுடன் வேலை செய்ய அனுமதிக்கிறது. DOM API இல் இதற்கான சிறப்பு முறைகள் உள்ளன. ஆனால் நீங்கள் உண்மையிலேயே இந்த வழியில் தரவுகளுடன் வேலை செய்ய வேண்டியிருக்கும் போது மட்டுமே அவற்றைப் பயன்படுத்துவது நல்லது.

அதே நேரத்தில், ஒரு தனிமத்தின் DOM பண்பை மாற்றும்போது, ​​அதனுடன் தொடர்புடைய பண்பும் மாறுகிறது என்பதை நீங்கள் அறிந்து கொள்ள வேண்டும். ஆனால் உலாவிகளில் இந்த செயல்முறை எப்போதும் ஒன்றுக்கு ஒன்று செய்யப்படுவதில்லை.

DOM பண்புகள் மற்றும் பண்புக்கூறுகளுக்கு இடையிலான முக்கிய வேறுபாடுகள்:

• பண்புக்கூறு மதிப்பு எப்போதும் ஒரு சரம், மற்றும் DOM சொத்து மதிப்பு என்பது ஒரு குறிப்பிட்ட தரவு வகை (ஒரு சரம் அவசியமில்லை);
• பண்புக்கூறு பெயர் கேஸ்-சென்சிட்டிவ், மற்றும் DOM பண்புகள் கேஸ்-சென்சிட்டிவ். அந்த. HTML குறியீட்டில், எடுத்துக்காட்டாக, HTML ஐடி பண்புக்கூறை ஐடி, ஐடி போன்றவற்றை எழுதலாம். பண்புக்கூறு பெயருக்கும் இது பொருந்தும், அதனுடன் வேலை செய்வதற்கான சிறப்பு ஜாவாஸ்கிரிப்ட் முறைகளில் நாங்கள் குறிப்பிடுகிறோம். ஆனால் நாம் தொடர்புடைய DOM சொத்தை ஐடி மூலம் மட்டுமே அணுக முடியும், வேறு வழியில்லை.

ஒரு தனிமத்தின் DOM பண்புகளுடன் பணிபுரிதல்

மேலே குறிப்பிட்டுள்ளபடி, ஜாவாஸ்கிரிப்டில் உள்ள உறுப்புகளின் பண்புகளுடன் பணிபுரிவது, பொருள்களின் பண்புகளைப் போலவே மேற்கொள்ளப்படுகிறது.

ஆனால் ஒரு தனிமத்தின் சொத்தை அணுகுவதற்கு, அது முதலில் பெறப்பட வேண்டும். நீங்கள் ஜாவாஸ்கிரிப்டில் ஒரு DOM உறுப்பைப் பெறலாம், எடுத்துக்காட்டாக, உலகளாவிய querySelector முறை மற்றும் சேகரிப்பைப் பயன்படுத்தி DOM கூறுகள், எடுத்துக்காட்டாக, querySelectorAll வழியாக.

முதல் உதாரணமாக, பின்வரும் HTML உறுப்பைக் கவனியுங்கள்:

தகவல் செய்தி உரை... var எச்சரிக்கை = document.querySelector("#alert"); // உறுப்பு கிடைக்கும்

அதன் அடிப்படையில், DOM பண்புகளை எவ்வாறு பெறுவது, அவற்றை மாற்றுவது மற்றும் புதியவற்றைச் சேர்ப்பது எப்படி என்பதை நாங்கள் பகுப்பாய்வு செய்வோம்.

DOM சொத்து மதிப்புகளைப் படித்தல்:

// DOM சொத்து ஐடியின் மதிப்பைப் பெறுங்கள் var alertId = alert.id; // "எச்சரிக்கை" // DOM பண்பின் மதிப்பைப் பெறுக வர்க்கத்தின் பெயர் var alertClass = alert.className; // "எச்சரிக்கை-தகவல்" // DOM சொத்து தலைப்பின் மதிப்பைப் பெறுக var alertId = alert.title; // "உதவி உரை..."

DOM சொத்து மதிப்புகளை மாற்றுதல்:

// ஒரு DOM சொத்தின் மதிப்பை மாற்ற, அதற்கு ஒரு புதிய மதிப்பை நீங்கள் ஒதுக்க வேண்டும் alert.title = "புதிய உதவிக்குறிப்பு உரை"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

DOM பண்புகளைச் சேர்த்தல்:

Alert.lang = "ru"; // லாங் சொத்தை "ru" எச்சரிக்கையாக அமைக்கவும்.dir = "ltr"; // dir சொத்தை "ltr" ஆக அமைக்கவும்

p உறுப்புகள் பக்கத்தில் உள்ள அனைத்து வகுப்பு மதிப்புகளையும் கன்சோலுக்கு வெளியிடுவதற்கான எடுத்துக்காட்டு:

Var பத்திகள் = document.querySelectorAll("p"); (var i = 0, நீளம் = paragraphs.length ; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

"ru" மதிப்புடன் உள்ளடக்க வகுப்பில் உள்ள அனைத்து உறுப்புகளுக்கும் லாங் சொத்தை அமைப்பதற்கான எடுத்துக்காட்டு:

Var உள்ளடக்கங்கள் = document.querySelectorAll(".content"); (var i = 0, length = contents.length; i< length; i++) { contents[i].lang = "ru"; }

உறுப்பு பண்புக்கூறுகள் மற்றும் அவர்களுடன் பணிபுரியும் முறைகள்

பண்புக்கூறுகள் ஆரம்பத்தில் HTML குறியீட்டில் அமைக்கப்பட்டுள்ளன. அவை இணைக்கப்பட்டிருந்தாலும், ஏதோவொரு வகையில், பண்புகளுடன், அவை ஒன்றல்ல. பெரும்பாலான சந்தர்ப்பங்களில், நீங்கள் பண்புகளுடன் வேலை செய்ய வேண்டும், மேலும் உங்களுக்கு உண்மையிலேயே தேவைப்படும்போது மட்டுமே பண்புகளை அணுக வேண்டும்.

பண்புக்கூறு மதிப்புகள், மேலே குறிப்பிட்டுள்ளபடி, DOM பண்புகளைப் போலன்றி, எப்போதும் ஒரு சரம்.

பண்புக்கூறு தொடர்பான செயல்பாடுகளைச் செய்வதற்கு JavaScript நான்கு முறைகளைக் கொண்டுள்ளது:

• .hasAttribute("attribute_name") - உறுப்பு குறிப்பிட்ட பண்புக்கூறு உள்ளதா என்பதைச் சரிபார்க்கிறது. உறுப்பு சரிபார்க்கப்பட்ட பண்புக்கூறு இருந்தால், பிறகு இந்த முறைஉண்மை, இல்லையெனில் தவறானது.
• .getAttribute("attribute_name") – பண்புக்கூறு மதிப்பைப் பெறுகிறது. உறுப்புக்கு குறிப்பிட்ட பண்புக்கூறு இல்லை என்றால், இந்த முறை வெற்று சரம் ("") அல்லது பூஜ்யத்தை வழங்கும்.
• .setAttribute("attribute_name", "attribute_value") - குறிப்பிடப்பட்ட பண்புக்கூறை உறுப்புக்கு குறிப்பிட்ட மதிப்புடன் அமைக்கிறது. உறுப்பு குறிப்பிட்ட பண்புக்கூறைக் கொண்டிருந்தால், இந்த முறை அதன் மதிப்பை மாற்றும்.
• .removeAttribute("attribute_name") - உறுப்பிலிருந்து குறிப்பிட்ட பண்புக்கூறை நீக்குகிறது.

உதாரணங்களைப் பார்ப்போம்.

மதிப்பு பண்புடன் மிகவும் சுவாரஸ்யமான உதாரணம்.

மதிப்பு பண்புடன் உதாரணம் var name = document.querySelector("input"); // உறுப்பு கிடைக்கும்

மதிப்பு பண்புக்கூறு மற்றும் DOM சொத்து மதிப்பின் மதிப்பைப் பெறுவோம்:

// உறுப்பு பெயரின் மதிப்பு பண்புக்கூறின் மதிப்பைப் பெறுங்கள்.getAttribute("மதிப்பு"); // "பாப்" // DOM சொத்து மதிப்பின் மதிப்பைப் பெறுங்கள் name.value; // "பாப்" // மதிப்பு பண்புக்கூறின் மதிப்பைப் புதுப்பித்து, அதை ஒரு புதிய மதிப்பு பெயராக அமைக்கவும்.setAttribute("மதிப்பு", "டாம்"); // "டாம்" // DOM சொத்து மதிப்பின் மதிப்பைப் பெறுங்கள் name.value; // "டாம்"

மதிப்பு பண்புக்கூறு மாறும்போது, ​​உலாவி தானாகவே மதிப்பு DOM பண்புகளை மாற்றுகிறது என்பதை இந்த எடுத்துக்காட்டு காட்டுகிறது.

இப்போது இதற்கு நேர்மாறாகச் செய்வோம், அதாவது, DOM சொத்தின் மதிப்பை மாற்றி, பண்புக்கூறு மதிப்பு மாறுகிறதா என்பதைச் சரிபார்க்கவும்:

// DOM சொத்து மதிப்பு பெயருக்கு ஒரு புதிய மதிப்பை அமைக்கவும்.value = "John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

DOM சொத்தை மாற்றுவது எப்போதும் பண்புக்கூறில் தொடர்புடைய மாற்றத்திற்கு வழிவகுக்காது என்பதை இந்த எடுத்துக்காட்டு காட்டுகிறது. அந்த. இந்த வழக்கில், மதிப்பு DOM சொத்தை மாற்றுவது அதன் தொடர்புடைய பண்புகளை மாற்றாது.

பயனர் இந்த புலத்தில் உரையை உள்ளிடும்போது அதே விஷயம் நடக்கும். DOM சொத்து மதிப்பு உண்மையான மதிப்பைக் கொண்டிருக்கும், மேலும் தொடர்புடைய பண்புக்கூறில் அசல் மதிப்பு அல்லது நாம் அமைத்த ஒன்றைக் கொண்டிருக்கும், எடுத்துக்காட்டாக, setAttribute முறையைப் பயன்படுத்தி.

DOM பண்புகளுடன் எப்போதும் வேலை செய்வது மிகவும் சரியானது என்பதை இந்த எடுத்துக்காட்டு காட்டுகிறது, மேலும் அது மிகவும் அவசியமான போது மட்டுமே நீங்கள் பண்புக்கூறை அணுக வேண்டும்.

HTML இல் நாங்கள் அமைத்த ஆரம்ப மதிப்பை நீங்கள் பெற வேண்டிய சந்தர்ப்பத்தில் கூட, நீங்கள் சொத்தைப் பயன்படுத்தலாம். மதிப்பு பண்புக்கூறின் ஆரம்ப மதிப்பைக் கொண்ட சொத்து இயல்புநிலை மதிப்பு என அழைக்கப்படுகிறது.

Name.defaultValue; //டாம்

மற்றொரு சுவாரஸ்யமான உதாரணம், ஆனால் இப்போது href பண்புடன்.

href பண்புடன் உதாரணம்

HTML இல் அமைக்கப்பட்ட இணைப்பின் மதிப்பை நாம் பெற வேண்டிய ஒரு எடுத்துக்காட்டு.

var page2 = document.querySelector("#link"); page2.getAttribute("href"); // page2.html page2.href; // முழு URL, எடுத்துக்காட்டாக: http://localhost/page2.html

இந்த எடுத்துக்காட்டில், href பண்புக்கூறு மற்றும் href DOM பண்பு ஆகியவை வெவ்வேறு மதிப்புகளைக் கொண்டுள்ளன. குறியீட்டில் நாம் அமைத்தது href பண்புக்கூறு ஆகும், மேலும் DOM பண்பு முழு URL ஆகும். உலாவி href மதிப்பை முழு URL க்கு தீர்க்க வேண்டும் என்ற தரநிலையால் இந்த வேறுபாடு கட்டளையிடப்படுகிறது.

எனவே, பண்புக்கூறில் உள்ளதைப் பெற வேண்டும் என்றால், இந்த விஷயத்தில் getAttribute முறை இல்லாமல் செய்ய முடியாது.

இறுதியாக, தேர்ந்தெடுக்கப்பட்ட பண்புக்கூறுகளைப் பார்ப்போம்.

தேர்ந்தெடுக்கப்பட்ட பண்புக்கூறுடன் எடுத்துக்காட்டு

தேர்ந்தெடுக்கப்பட்ட தேர்ந்தெடுக்கப்பட்ட விருப்பத்தின் மதிப்பை நீங்கள் எவ்வாறு பெறலாம் என்பதைக் காட்டும் எடுத்துக்காட்டு:

மதிப்பீடு இல்லை 1 2 3 4 5 // தேர்ந்தெடுக்கப்பட்ட உறுப்பு var குறி = document.querySelector("#mark"); // 1 வழி mark.querySelector("option:checked").value; // முறை 2 mark.value;

தேர்ந்தெடுக்கப்பட்ட உறுப்பில் தேர்ந்தெடுக்கப்பட்ட விருப்ப மதிப்புகளை எவ்வாறு பெறலாம் என்பதைக் காட்டும் எடுத்துக்காட்டு:

மதிப்பீடு இல்லை 1 2 3 4 5 // தேர்ந்தெடுக்கப்பட்ட உறுப்பு var குறி = document.querySelector("#mark"); // முறை 1 (ஒரு வரிசையை உருவாக்கி, தேர்ந்தெடுக்கப்பட்ட விருப்பங்களின் மதிப்புகளுடன் அதை நிரப்புவதன் மூலம்) var arr = ; (var i = 0, length = mark.options.length; i< length; i++) { if (mark.options[i].selected) { arr.push(mark.options[i].value); } } // 2 способ (более современный, с использованием DOM-свойства selectedOptions) var arr = Array.from(mark.selectedOptions, option =>option.value)

பண்புகளுடன் வேலை செய்வதற்கான மற்றொரு வழி (பண்புகளின் சொத்து)

ஜாவாஸ்கிரிப்டில், ஒவ்வொரு உறுப்புக்கும் ஒரு பண்புக்கூறு பண்புகள் உள்ளன, அதன் அனைத்து பண்புக்கூறுகளையும் பெயரிடப்பட்ட நோட்மேப் பொருளாக மீட்டெடுக்கப் பயன்படுத்தலாம்.

இந்த முறைஉங்களுக்குத் தேவைப்படும்போது பயன்படுத்தப்படலாம், எடுத்துக்காட்டாக, ஒரு தனிமத்தின் அனைத்து பண்புகளையும் மீண்டும் செய்ய.

இந்தத் தொகுப்பில் உள்ள ஒரு பண்புக்கூறு அதன் அட்டவணை அல்லது உருப்படி முறையைப் பயன்படுத்தி அணுகப்படுகிறது. இந்தத் தொகுப்பில் உள்ள பண்புக்கூறுகள் 0 இலிருந்து கணக்கிடப்படுகின்றன.

எடுத்துக்காட்டாக, ஒரு குறிப்பிட்ட உறுப்பின் அனைத்து பண்புக்கூறுகளையும் கன்சோலில் காண்பிப்போம்:

நான் ஜாவாஸ்கிரிப்டை விரும்புகிறேன்

// உறுப்பை அதன் அடையாளங்காட்டி செய்தி var செய்தி மூலம் பெறவும் = document.querySelector("#message"); // அதன் பண்புகளை பெறவும் var attrs = message.attributes; // (var i = 0, length = attrs.length; i க்கான லூப்பை (attrs.length – பண்புகளின் எண்ணிக்கை) பயன்படுத்தி அனைத்து பண்புகளையும் பார்க்கவும்< length; i++) { // attrs[i] или attrs.item(i) – обращение к атрибуту в коллекции по его порядковому номеру // attrs[i].name – имя атрибута // attrs[i].value – значение атрибута (с помощью него можно также изменить значение атрибута) console.log(attrs[i].name + " = " + attrs[i].value); // или с помощью метода item console.log(attrs.item(i).name + " = " + attrs.item(i).value); // пример как можно изменить значение через свойство value // if (attrs[i].name === "class") { // attr[i].value = "தகவல்"; // } } // в результате выполнения: // id = message // class = text // style = text-align: center;

கூடுதலாக, பின்வரும் முறைகளைப் பயன்படுத்தி இந்தத் தொகுப்பிலும் நீங்கள் வேலை செய்யலாம்:

• .getNamedItem("attribute_name") – குறிப்பிட்ட பண்புக்கூறின் மதிப்பைப் பெறுகிறது (குறிப்பிட்ட பண்புக்கூறு உறுப்பு இல் இல்லை என்றால், முடிவு பூஜ்யமாக இருக்கும்).
• .setNamedItem("attribute_node") – ஒரு உறுப்புக்கு புதிய பண்புக்கூறைச் சேர்க்கிறது அல்லது ஏற்கனவே உள்ள ஒன்றின் மதிப்பைப் புதுப்பிக்கிறது. ஒரு பண்புக்கூறை உருவாக்க, நீங்கள் document.createAttribute() முறையைப் பயன்படுத்த வேண்டும், இது பண்புக்கூறு பெயரை அளவுருவாக அனுப்ப வேண்டும். உருவாக்கப்பட்ட பண்புக்கூறு மதிப்பு சொத்தைப் பயன்படுத்தி ஒரு மதிப்பை ஒதுக்க வேண்டும்.
• .removeNamedItem("attribute_name") – ஒரு உறுப்பிலிருந்து குறிப்பிடப்பட்ட பண்புக்கூறை நீக்குகிறது (இதன் விளைவாக அகற்றப்பட்ட பண்புக்கூறை வழங்கும்).

getNamedItem, setNamedItem மற்றும் removeNamedItem முறைகள் மூலம் பண்புக்கூறுகளுடன் பணிபுரிவதற்கான எடுத்துக்காட்டு:

நான் ஜாவாஸ்கிரிப்டை விரும்புகிறேன்

// உறுப்பை அதன் அடையாளங்காட்டி செய்தி var செய்தி மூலம் பெறவும் = document.querySelector("#message"); // அதன் பண்புகளை பெறவும் var attrs = message.attributes; // பணி எண். 1. id பண்புக்கூறு console.log(attrs.getNamedItem("id")) இன் மதிப்பைப் பெறவும்; // பணி எண். 2. பண்புக்கூறை அமைக்கவும் (அது இருந்தால், அதன் மதிப்பை மாற்றவும், இல்லையெனில் புதிய ஒன்றைச் சேர்க்கவும்) // நடை பண்புக்கூறை உருவாக்கி அதை attrStyle மாறி var attrStyle = document.createAttribute("style") இல் சேமிக்கவும்; // மதிப்பு சொத்து attrStyle.value பயன்படுத்தி பண்புக்கு ஒரு மதிப்பை ஒதுக்கவும் = "text-align: left;"; // устанавливаем атрибут элементу attrs.setNamedItem(attrStyle); // Задача №3. удалить атрибут class у элемента attrs.removeNamedItem("class"); !}

பணிகள்

• ஐடி பண்புக்கூறு கொண்ட அனைத்து ஆவண உறுப்புகளையும் கன்சோலில் அச்சிடவும்.
• இந்தப் பண்புக்கூறு இல்லையெனில், பக்கத்தில் உள்ள அனைத்துப் படங்களுக்கும் தலைப்புப் பண்புக்கூறைச் சேர்க்கவும். பண்புக்கூறு மதிப்பை alt பண்புக்கூறு மதிப்புக்கு சமமாக அமைக்கவும்.