Simple summary of HTML DOM

1. What is DOM?

(1) DOM is a standard, or an interface.

(2) Defines the objects and attributes of all html,xml elements, and the methods by which they are accessed, so that the standard (interface) provides accurate access to the Html,xml document, altering the content, structure, and style of the updated document.

(3) The full name of the DOM is the Document Object model.

(4) The DOM can be accessed through JavaScript (and other programming languages), and the following is accessed via JS.

2. What is HTML DOM?

Knowing what a DOM is, you know what HTML dom,html DOM is the standard programming interface for HTML, defines the objects and properties of all HTML elements, and how to access them.

3. What is the structure of HTML in the standard HTML DOM?

The HTML DOM sees the entire document as a document node, each HTML element is an element node, the text within the HTML element is a text node, each HTML attribute is an attribute node, and the note is a comment node, so nodes can contain nodes, and nodes can be seen as objects (with java,c++ Object-oriented programming objects), so the HTML DOM provides a way to access these objects.

4. How do I get the nodes (objects) in HTML via the HTML DOM?

The document object for the HTML DOM (each HTML document loaded into the browser becomes the document object, and the Document object allows us to access all the elements in the HTML page from the script) provides three ways to:

(1) obtained by ID, using the document.getElementById () method, returns a node (object) in the document

(2) obtained by tag name, using the document.getElementsByTagName () method, returns an array of nodes (objects) of all the same tag names in the document, which can be obtained through an index, such as Arr[0], is the first node (object)

(3) obtained by class name, using the Document.getelementsbyclassname () method, returns an array of nodes (objects) of all the same class names in the document, which can be obtained through an index, such as Arr[0], is the first node (object)

5. How do I modify the properties of a node (object) through the HTML DOM?

As with ordinary objects, the nodes (objects) are obtained through the above three methods, and the "." To get the properties of a node (object), the property value of the original node (object) can be changed by assigning a value of "=", such as:

function Swit ()
{var Txt=document.getelementbyid ("Intro");//"." Get the node with ID intro
Txt.innerhtml= "Hello!! ";//" = "Change the innerHTML property of this node
}</script>

<p id= "Intro" onclick () = "Swit ()" >hello!! </p>
</body>
The above sake changed the innerHTML property of the <p> tag, and P has many properties (please go online to find, I often go to the W3school site to check, feel very full), if you want to change the style of P please get the property: Txt.style.color= " Red ", if the property is such a z-index, change it: txt.style.zindex=10, basically change the"-"after the first letter of the word to uppercase on the line, if it is the onclick such an event property such as the value is a function name, such changes: Txt.onclick=function () {method body or function call}.
This method applies to essentially all of the label node's property changes.
5.HTML DOM Objects
The HTML Dom has four kinds of object document,element,attribute,event.
(1) Document Object
Each HTML document that is loaded into the browser becomes the Document object, which allows us to access all the elements in the HTML page from the script. Note: The Document object is part of the Window object and can be accessed through the Window.document property. 】
(2) Element object
In the HTML DOM, the element object represents an HTML element, and the element object can have a child node of type element node, text node, annotation node, which is the object acquired by document three methods, whether it is a < ;p >,<a>,<div> tags get objects that are element objects, so objects such as the element object and <p>,<a>,<div> are like inheritance. The properties and methods of element, <p>,<a>,<div>, and other tags get the object that can be called, such as the innerHTML property is the element property, and P,a,div has it.
(3) Attribute object
In the HTML DOM, the Attr object represents an HTML property, and you can invoke the properties and methods of the attribute object by getting the object's properties, as shown in
function Fun ()
{
              var txt=document.getelementsbytagname ("button"). Attributes[0]. name ;
           }
            .....
           <button onclick= "Fun ()" > Click </button>
           
           The Name property of the attribute object is called, and the first attribute is returned, so txt is the "onclick";


    (4) Event object
       
           The specific interaction moment that occurs in the Browser, document window, and the interaction between JavaScript and HTML is triggered by events, such as clicking Events and passing events.

             


The author has said: The above is just my point of view and I think the view, the above is basically read w3school after the relevant tutorials understand, details and more detailed site sharing: http://www.w3school.com.cn/htmldom/index.asp
          Finally share a picture


Simple summary of HTML DOM