Introduction
हेलो दोस्तों आज हम इस post में document method getElementById() के बारेमे जानेगे!. getElementById() method
का इस्तेमाल कैसे कर सकते है HTML elements को manipulate करने के लिए वह हम example के साथ समझेंगे!.
Document.getElementById() method
Document.getElementbyId() method एक element का object return करता है!. getElementById() method में defined ID और elements में define ID दोनों same होनी चाहिए और उसके आलावा document के element में एक unique ID एक बार ही define कर सकते है। और element के Id से हम document.getElementById() method के जरिये उस specified element को access कर सकते है!.
syntax:
getElementByid(id)
parameter:
ID: ID element में define होती है!. ID एक case-sensitive string होती है और पुरे document में sirf एक बार ही define किया जाता है!.
Return value:
Element object define ID से matching होने वाले DOM element object का वर्णन करता है अगर document में किसी प्रकार का matching element नहीं मिलता है तो वह null return में देता है!.
Example:
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>getElementById Example</title>
</head>
<body>
<div class="main">
<p id="text">Get Element Method Example</p>
<button onclick="changeText('First text change with new text');">First text change</button>
<button onclick="changeText('Second text change with new text');">Second text change</button>
</div>
</body>
</html>
Javascript code:
<script>
function changeText(text){
document.getElementById('text').textContent = text;
}
</script>
Javascript में HTML element को access करने के लिए method के name में “Id” capitalization सही होना चाहिए getElementById() के बजाय getElementByID() नहीं लिख सकते वह काम नहीं करेगा!.
HTML javascript code
<!DOCTYPE html>
<html lang="en">
<head>
<title>getElementById Example</title>
</head>
<body>
<div class="main">
<ul id="main_id">
<li id="text1">Text1</li>
<li id="text2">Text2</li>
<li id="text3">Text3</li>
<li id="text4">Text4</li>
</ul>
</div>
<script>
const mainID = document.getElementById('main_id');
console.log(mainID);
const childID = mainID.getElementByid('text1');
console.log(childID);
</script>
</body>
</html>
अगर getElementById() method में दी गे ID किसी element में define नहीं है तो यह function null return करता है!.
क्योकि ID parameter case-sensitive है इस लिए document.getElementById(‘Main_ID’) में element <ul id=”main_id”> id के बजाय दूसरी id pass करने पर null यह function null लौटाएगा क्योकि ‘Main_ID’ और ‘main_id’ इस method के लिए अलग-अलग है!.
