Saturday, 27 June 2020

Introduction to the Document Object Model.

Introduction to the Document Object
Model.

HTML DOM Document in Hindi| HTML element को change कैसे कर सकते हैं

HTML DOM आपके पूरे Document को single document द्वारा represent क्या जाता है।


यदि आप किसी भी HTML element को access करना चाहते हो तो,

आपको सबसे पहले document object को access करना होगा।

जैसा की आपको पता है की DOM जब JavaScript में use किया जाता है तो HTML document को control किया जाता है।

शरू करने से पहले जान लेते हैं की इस Tutorial में हमं क्या- क्या करने वाले हैं।

§  Finding HTML Element with DOM Document

§  How to Change HTML element

§  How to add or delete element HTML DOM Document

§  Adding Events Handlers

§  Finding HTML Objects with HTML DOM Document

आप आर्टिकल को पूरा पढ़ें ताकी आपको JavaScript HTML DOM Document का complete knowledge हो सके।

यदि आपने हमारे HTML tutorial  और CSS Tutorial नहीं पढ़े हैं तो वह भी पढ़ सकते हैं। क्योकि उनमें मिलेगा आपको complete knowledge जो कहीं और नहीं मिल सकता हैं।

Finding HTML Element with DOM Document

अब हमं यह देखने वाले हैं की हमं HTML Element को कैसे find कर सकते हैं।

हमं DOM द्वारा या तो id name, Class name या Tag Name द्वारा element को find कर सकते हैं।

Method

document.getElementById(id):

इसके द्वारा आप HTML element को id द्वारा find कर सकते हो।

document.getElementByClassName():

इसके द्वारा आप HTML element को class Name द्वारा find कर सकते हो।

document.getElementByTagName():

इसके द्वारा आप HTML element को tag name द्वारा access कर सकता है।

How to Change HTML element

अब हमं वो वाले method करने वाले हैं जनका use करके आप HTML elements को change कर सकते हो।

element.innerHTML= new HTML content:

इस property द्वारा आप inner HTML के element property को change कर सकते हो।

element.attribute=new value:

इस property द्वारा आप HTML element की attribute value को change कर सकते हो।

element.style.property= new style:

इस property द्वारा आप HTML के style element को change कर सकते हो।

How to add or delete element HTML DOM Document

इस बार हमं देखने वाले हैं की वह कौन से  method हैं,

जसके जरिये आप HTML element को Add या Delete कर सकते हो।

document.removeChild(element):

इस method के जरिये आप HTML element को remove कर सकते हो।

document.createElement(element):

इसके द्वारा आप किसी नये HTML element को create कर सकते हो।

document.replaceChild(new, old):

इस method के जरिये आप HTML element को replace कर सकते हो।

document.appendChild(element):

इस method के जरिये HTML element को add कर सकते हो।

document.write(text):

इसके द्वारा आप HTML output stream को निकाल सकते हो।

Adding Events Handlers in JavaScript

यदि आप web page में कोइ button बनाकर कुछ perform करवाना चाहते हैं,

यानिकी यदि उस button को click करने के बाद कुछ भी perform करवाना चाहते हो तो वो भी कर सकते हो।

उदाहरण के लिए मानलीजिये यदि आप button के click पर किसी भी दो value को add करना चाहते हो तो वह भी कर सकते हो।

Method:

document.getElementById(id).onclick = function()

 

{

 

code

 

}

इस method के जरिये आप event handler को add कर सकते हो।

Finding HTML Objects with HTML DOM Document

अब हमं कुछ ऐसी property को देख लेते हैं जसका use HTML object को find करने के लिए किया जाता है।

Property

document.cookie:

इसके जरिये आप document में उपलब्ध coolies को access कर सकते हो।

document.body:

इसके जरिये आप <body> के element को return करवा सकते हो।

document.anchors:

इस property के जरिये आप सभी <a> element को return करवा सकते हो।

document.doctype:

इसके जरिये आप doctype document को return करवा सकते हो।

document.domain:

इस property के जरिये आप document server के domain name को find कर सकते हो।

document.image:

इसके द्वारा आप <img> element में मौजूद सभी image को return कर सकते हो।

document.forms:

इस property द्वारा आप सभी <form> element को return करवा सकते हो।

document.head:

इसके द्वारा आप सभी <head> element को return करवा सकते हो।

document.lastModified:

इस property के जरिये आपने document को किस समय date और time को modified किया है वह पता कर सकते हो।

document.links:

इसके जरिये आप <area> और <a> element में href को return करवा सकते हो।

document.URL:

इस property के जरिये आप document के URL को return कर सकते हो।

document.title:

इस property द्वारा आप <title> element को return कर सकते हो।

document.script:

इसके द्वारा आप <script> element को return कर सकते हो।

 


No comments:

Post a Comment

Please Do Not Enter Any Spam Link in the comment Box.