Detailed Explanation of Common Attributes and Methods of Document Object in DOM (JavaScript Basics)

-----Introduction

Every HTML document loaded in the browser becomes a Document object.

The Document object allows us to access all elements in the HTML page from the script.

Properties

1　 document.anchors　　Return a reference to all Anchor objects in the document. Also, document.links/document.forms/document.images, etc

2　 document.URL　　Return the URL of the current document

3　 document.title　　Return the title of the current document

4　 document.body　　Return the body element node

Methods

1　 document.close()　　Close the output stream opened by document.open() and display the selected data.

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

2　 document.createElement()　　Create an element node.

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<head>
</head>
<body>
  <p>hello world</p>
<script>
  var a = document.createElement('hr');
  document.body.appendChild(a)
</script>
</body>
</html>

3　 document.createAttribute()　　Create an attribute node.

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

4　 document.createTextNode() creates a text node.

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<head>
</head>
<body>
  <p>hello world</p>
<script>
  var a = document.createTextNode('hahahah');
  document.body.appendChild(a)
</script>
</body>
</html>

5　 document.getElementsByClassName() returns a collection of all elements with the specified class name in the document, as a NodeList object collection. NodeList object collection is a data format similar to an array, which only provides the length property, and like array methods such as push and pop are not provided.

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

7　 document.getElementsByName() returns an object collection with the specified name.

8　 document.getElementsByTagName() returns an object collection with the specified tag name.Object Collection.

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.

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<head>
</head>
<body>
  <p>hello world</p>
<script>
  document.write('hahahh')
</script>
</body>
</html>

This is the full content of the detailed explanation of the commonly used properties and methods of the document object in the DOM of js basic, I hope everyone will support and cheer for the tutorial~

Basic Tutorial