Detailed explanation of common attribute methods of document objects in DOM based on js-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of common attribute methods of document objects in DOM based on js

Dec 08, 2016 pm 02:35 PM

-----Introduced

Every HTML document loaded into the browser will become a Document object.

Document objects allow us to access all elements in an HTML page from scripts.

Properties

1 document.anchors Returns references to all Anchor objects in the document. There are also document.links/document.forms/document.images, etc.

2 document.URL Returns the url of the current document

3 document.title Returns the title of the current document

4 document.body Returns the body element node

method

1 document.close() Closes the output stream opened with the document.open() method and displays the selected data.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
function createDoc()
{
var w=window.open();
w.document.open();
w.document.write(&quot;&lt;h1&gt;Hello World!&lt;/h1&gt;&quot;);
w.document.close();
}
&lt;/script&gt;
&lt;/head&gt;
 
&lt;body&gt;
&lt;input type=&quot;button&quot; value=&quot;New document in a new window&quot; onclick=&quot;createDoc()&quot;&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

2 document.createElement() Create element node.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p&gt;hello world&lt;/p&gt;
   
&lt;script&gt;
  var a = document.createElement(&#39;hr&#39;);
  document.body.appendChild(a)
 
 
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

3 document.createAttribute() Create attribute node.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
 
&lt;p id=&quot;demo&quot;&gt;Click the button to make a BUTTON element.&lt;/p&gt;
 
&lt;button onclick=&quot;myFunction()&quot;&gt;Try it&lt;/button&gt;
 
&lt;script&gt;
 
function myFunction()
{
var btn=document.createElement(&quot;BUTTON&quot;);
document.body.appendChild(btn);
};
 
&lt;/script&gt;
 
&lt;/body&gt;
&lt;/html&gt;

Copy after login

4 document.createTextNode() Create a text node.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p&gt;hello world&lt;/p&gt;
 
&lt;script&gt;
  var a = document.createTextNode(&#39;hahahah&#39;);
  document.body.appendChild(a)
 
 
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

5 document.getElementsByClassName() Returns a collection of all elements with the specified class name in the document as a collection of NodeList objects. The so-called NodeList object collection is a data format similar to an array. It only provides the length attribute, and the push and pop methods in the array are not provided.

6 document.getElementById() returns a reference to the first object with the specified id.

7 document.getElementsByName() returns a collection of objects with the specified name.

8 document.getElementsByTagName() returns a collection of objects with the specified tag name.

9 document.write() writes HTML expressions or JavaScript code to the document. Note: Using the write method after the HTML document is loaded will cause the write content to overwrite the original HTML document.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p&gt;hello world&lt;/p&gt;
 
&lt;script&gt;
  document.write(&#39;hahahh&#39;)
 
 
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn