首頁> web前端> Vue.js> 主體

JS的Document屬性與方法

小老鼠
發布: 2024-03-14 10:47:05
原創
804 人瀏覽過

在JavaScript中,document物件是一個非常重要的全域對象,它代表整個HTML文件。你可以透過document物件來存取和修改HTML文件的內容和結構。以下是一些常見的document屬性和方法:

屬性

#1、document.title:取得或設定文件的標題,通常顯示在瀏覽器的標題列或標籤上。

javascript

document.title = "新的页面标题";
登入後複製

2、document.URL:取得文件的完整URL。

javascript

console.log(document.URL);
登入後複製

3、document.documentElement:取得文件的根元素,通常是元素。

javascript

console.log(document.documentElement);
登入後複製

4、document.body:取得文件的元素。

javascript

console.log(document.body);
登入後複製

5、document.head:取得文件的元素。

javascript

console.log(document.head);
登入後複製

6、document.referrer:取得導航到目前頁面的前一個頁面的URL。

javascript

console.log(document.referrer);
登入後複製

#方法

1、document.getElementById (id):根據指定的id取得元素。

javascript

var element = document.getElementById("myElementId");
登入後複製

2、document.getElementsByClassName(className):根據指定的類別名稱取得元素集合。

javascript

var elements = document.getElementsByClassName("myClassName");
登入後複製

3、document.getElementsByTagName(tagName):根據指定的標籤名稱取得元素集合。

javascript

var elements = document.getElementsByTagName("div");
登入後複製

4、document.querySelector(selector):傳回文件中符合指定CSS選擇器的第一個Element元素。

javascript

var element = document.querySelector(".myClass");
登入後複製

5、document.querySelectorAll(selector):傳回文件中符合指定CSS選擇器的所有Element元素的NodeList(靜態的)。

javascript

var elements = document.querySelectorAll(".myClass");
登入後複製

6、document.createElement(tagName):建立一個新的元素。

javascript

var newElement = document.createElement("div");
登入後複製

7、document.createTextNode(text):建立一個新的文字節點。

javascript

var textNode = document.createTextNode("Hello, world!");
登入後複製

8、document.appendChild(node):向文件的某個元素追加子節點。

javascript

someElement.appendChild(newElement);
登入後複製

9、document.removeChild(node):從文件移除某個子節點。

javascript

someElement.removeChild(childElement);
登入後複製

9、document.write(content):寫入HTML表達式或JavaScript程式碼到文件中。

javascript

document.write("

这是一个段落。

");
登入後複製

這只是document物件的一部分屬性和方法。實際上,document物件提供了許多其他的功能和方法,用於處理HTML文件的內容和結構。你可以透過查閱相關的JavaScript文件或教學課程來了解更多資訊。

以上是JS的Document屬性與方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!