W3C DOM

 The full name of the DOM document object model is Document Object Model. The DOM standard established by the World Wide Web Consortium (W3C) is called W3C DOM. The purpose of the establishment is to make all browsers have the same document object model standard. DOM provides HTML and XML APIs, allowing Script to communicate with content or elements in web pages, such as changing web content or obtaining element values. DOM is usually used to communicate with JavaScript, but not exclusively used by JavaScript. W3C The established DOM is a set of independent rules. Through a one-to-one API interface, various scripts can communicate with them. The advantage is that it promotes web pages that comply with W3C DOM standards and can run smoothly in browsers that comply with W3C standards. If all web pages are designed Both teachers and browser manufacturers can follow the W3C DOM standard, which will greatly improve the value of web browsing.

In principle, we can regard an HTML document or XML document as a kind of DOM, and the tags in each document are regarded as DOM elements or nodes, and we can access or modify them through Script that can communicate with W3C DOM These elements and nodes, for example, JavaScript is a very useful Script.

Through JavaScript and DOM communication

can be in principle, JavaScript and the DOM Document manner through communication, for example, we can through document.write the string written to the page, or you can through document.getElementById Get a specific ID value in a webpage, where document means a document, Element means an element, and ById judges an element based on the Id in the document. JavaScript provides three methods for us to obtain an element in a DOM document, please Look at this table.

Script	definition
document.getElementById	Query the specific id value marked in the file, and return the specific value
document.getElementsByName	Query the specific name value marked in the file, and return the JavaScript Array array
document.getElementsByTagName	Query the specific name value marked in the file, and return the JavaScript Array array

For more ways to communicate with HTML objects through Document, please refer to: JavaScript Document .

Example of communicating with DOM API through JavaScript

<script language="javascript">
function GetValue(){
    alert(document.getElementById("Test").value);
}
</script>
<input type="text" id="Test"><input type="button" value="讀取結果" onclick="GetValue()">

The output of the above example is

 

We first obtain the field with Id as Test in the DOM file through document.getElementById("Test") of JavaScript, and add .value to obtain its value. The JavaScript onclick event is also used to determine the operation behavior. When the filling is completed And select the button to read the result, the entire program to get the DOM document element value will start to operate, alert will display the obtained element value in the dialog window, this is a simple way to use the DOM document object model, all mainstream currently All browsers support W3C DOM.