Home > Developer > Web Develop
Each HTML document that is loaded into the browser becomes the document object.
The Document object allows us to access all elements of an HTML page from within a script.
Tip: The Document object is part of the Window object and can be accessed through the Window.document property.
Document Object Collection| Collection | Description |
|---|---|
| All[] | Provides access to all HTML elements in a document. |
| Anchors[] | Returns a reference to all Anchor objects in the document. |
| Applets | Returns a reference to all Applet objects in the document. |
| Forms[] | Returns a reference to all Form objects in the document. |
| Images[] | Returns a reference to all the Image objects in the document. |
| Links[] | Returns a reference to all area and Link objects in the document. |
| Properties | Description |
|---|---|
| Body | Provides direct access to the <body> element. For a document that defines a frameset, this property refers to the outermost <frameset>. |
| Cookies | Sets or returns all cookies related to the current document. |
| Domain | Returns the domain name of the current document. |
| LastModified | Returns the date and time when the document was last modified. |
| Referrer | Returns the URL of the document loaded into the current document. |
| Title | Returns the title of the current document. |
| Url | Returns the URL of the current document. |
| Method | Description |
|---|---|
| Close () | Closes the output stream opened with the Document.open () method and displays the selected data. |
| getElementById () | Returns a reference to the first object that owns the specified ID. |
| Getelementsbyname () | Returns a collection of objects with the specified name. |
| getElementsByTagName () | Returns a collection of objects with the specified label name. |
| Open () | Open a stream to collect the output from any document.write () or Document.writeln () method. |
| Write () | Write an HTML expression or JavaScript code to the document. |
| Writeln () | is equivalent to the Write () method, unlike writing a newline character after each expression. |
One: Full name of the DOM model--->document Object
----> Document Object Model
Two Web page HTML document, document is the root node. The other sub-objects are child nodes
Three node type (1) Element node example:<input>
(2) Text node example: Shang text node
(3) Attribute node example: <input type= "Shang"/> Shang is an attribute node
Four ways to get ELEMENT nodes
"1" Get the node directly:
(1) Gets the specified id attribute of the specified value of the node---Unique
var Name=document.getelementbyid ("uname");
(2) Gets the node for the specified Name property value---> returns a set of
var ad=document.getelementsbyname ("Unamename");
(3) Gets the node for the specified element name---> returns a set of
var aaa=document.getelementsbytagname ("input");
"2" Indirect fetch node
(1) Gets the child node through the parent node.
Get parent Node
var Father=document.getelementbyid ("Showdiv");
Gets the child nodes of the parent node node collection
var sonarray=father.childnodes;
alert (Array[2].nodevalue);
(2) Get parent node through Byte point
Gets the parent node through the child node
var Son=document.getelementbyid ("a");
var Fathera=son.parentnode;
alert (fathera.id);
(3) Through the sibling node, get the node
Brother Node
var Borther2=document.getelementbyid ("Realname");
var borther1=borther2.previoussibling;//Previous sibling node
var borther3=borther2.nextsibling;//next sibling node
while (borther1.nodetype!=1) {
borther1=borther1.previoussibling;
}
alert (Borther1.value);
Note: The three properties of a node---->nodename
----->nodevalue
----->nodetype
Four: Handling attribute nodes
(1) Element node. Property-----> Gets the property value, or you can re-assign a value to the property
(2) getattribute (key)---> Get the value of the key property
SetAttribute (key,value)---> Set properties for the node, and the value of the property
Five: Working with text nodes
(1) Get the text within a node, generally using innerHTML
(2) innerHTML does not restrict the operation of a node, but can use HTML fragments to populate the page directly, or get the HTML fragment directly. Greatly improve the flexibility of development
Example: function innerHTML () {
Alert (document.getElementById ("Showdiv"). InnerHTML);
}
Six changing the hierarchy of documents
(1) Creating ELEMENT nodes Document.createlement
var input=document.createelement ("input");
Input.type= "Text";
Input.id= "123";
Input.value= "unparalleled";
(2) The parent node is added to the parent node. Parentnode.appendchild
var Father=document.getelementbyid ("Showdiv");
Father.appendchild (input);
(3) Insertion node Parentnode.insertbefore (newnode,beforenode)
var Ab=document.getelementbyid ("a");
Father.insertbefore (INPUT,AB);
(4) Overlay node Parentnode.replacechild (newnode,oldnode)
The old node must exist or an exception occurs
Father.replacechild (INPUT,AB);
(5) Remove a node Parentnode.removechild (childnode)
Father.removechild (AB)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
