Home >Web Front-end >Vue.js >Document properties and methods of JS

Document properties and methods of JS

小老鼠
小老鼠Original
2024-03-14 10:47:05980browse

In JavaScript, the document object is a very important global object, which represents the entire HTML document. You can access and modify the content and structure of an HTML document through the document object. The following are some common document properties and methods:

Properties

1.document.title: Get or set The title of the document, usually displayed in the browser's title bar or tab.

javascript

document.title = "新的页面标题";

2. document.URL: Get the complete URL of the document.

javascript

console.log(document.URL);

3. document.documentElement: Get the root element of the document, usually the 100db36a723c770d327fc0aef2ce13b1 element.

javascript

console.log(document.documentElement);

4. document.body: Get the 6c04bd5ca3fcae76e30b72ad730ca86d element of the document.

javascript

console.log(document.body);

5. document.head: Get the 93f0f5c25f18dab9d176bd4f6de5d30e element of the document.

javascript

console.log(document.head);

6. document.referrer: Get the URL of the previous page that navigates to the current page.

javascript

console.log(document.referrer);

Method

1.document.getElementById (id): Get the element based on the specified id.

javascript

var element = document.getElementById("myElementId");

2. document.getElementsByClassName(className): Get the element collection based on the specified class name.

javascript

var elements = document.getElementsByClassName("myClassName");

3. document.getElementsByTagName(tagName): Get the element collection based on the specified tag name.

javascript

var elements = document.getElementsByTagName("div");

4. document.querySelector(selector): Returns the first Element in the document that matches the specified CSS selector.

javascript

var element = document.querySelector(".myClass");

5. document.querySelectorAll(selector): Returns a NodeList of all Element elements in the document that match the specified CSS selector ( still).

javascript

var elements = document.querySelectorAll(".myClass");

6. document.createElement(tagName): Create a new element.

javascript

var newElement = document.createElement("div");

7. document.createTextNode(text): Create a new text node.

javascript

var textNode = document.createTextNode("Hello, world!");

8. document.appendChild(node): Append a child node to an element of the document.

javascript

someElement.appendChild(newElement);

9. document.removeChild(node): Remove a child node from the document.

javascript

someElement.removeChild(childElement);

9. document.write(content): Write HTML expression or JavaScript code to the document.

javascript

document.write("<p>这是一个段落。</p>");

This is just some of the properties and methods of the document object. In fact, the document object provides many other functions and methods for handling the content and structure of HTML documents. You can learn more by consulting the relevant JavaScript documentation or tutorials.

The above is the detailed content of Document properties and methods of JS. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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