document

時間 2019-12-09

標籤 document 简体版

原文原文鏈接

document對象爲文檔節點，位於全部節點的頂端html

nodeType爲9node

nodeName爲「＃document」chrome

nodeValue爲null瀏覽器

沒有父節點app

子節點有元素節點，註釋節點，DOCTYPE節點等等dom

最經常使用的是元素節點，document的子節點只有一個元素節點，就是html節點編碼

document的一些經常使用屬性和方法：spa

屬性：orm

document.documentElement:直接得到一個html文檔的<html>標籤htm

document.title:獲取<title>標籤，能夠得到內容和修改內容，document.title直接對應頁面選項卡上的文字

document.body:得到<body>標籤

document.head:獲取<head>標籤這個只適用於safiri和chrome瀏覽器，要慎用

document.URL:獲取頁面整個的URL地址

document.domain:獲取頁面的域名

document.referrer:獲取跳轉到當前頁面的URL地址

document.readyState；返回loading（頁面正在加載）或者complete（頁面加載完畢）

document.charset:能夠獲得頁面的編碼方法，同時也能夠對其賦值，改變頁面的編碼方式

例：當前頁面的地址爲http://www.baidu.com/a/index.html,上一個頁面的地址爲http://www.souhu.com/a/index.htm，在baidu是從souhu跳轉過來的

因此document.URL爲http://www.baidu.com/a/index.html，

因此document.domain爲www.baidu.com，

因此document.referrer爲http://www.souhu.com/a/index.html。

其中能夠對document.domain進行修改，其餘兩個不能夠修改，document.domain能夠修改成baidu.com，將其改爲鬆散的域名，可是隻能這樣改，

不能夠改爲其餘頁面的域名。

document.domain的做用：有兩個頁面，一個域名爲p2p.baidu.com 另外一個爲www.baidu.com，兩者之間的js是不能夠進行互相取值的，可是若是將兩個js文件

的document.domain都改成baidu.com,兩者之間就能夠互相訪問彼此的js對象了。

注:只要講document.domain改成鬆散的之後，就不能夠再改成緊繃的了，若是document.domain改成了baidu.com就不能夠再改成www.baidu.com了。

方法：

getElementById:

document.getElementById("某個id名") 獲取該id所對應的標籤，若是有多個id，只取第一個，這個方法通常只用document調用

getElementsByTagName

document.getElementsByTagName("某個標籤的名") 若是是用document調用這個方法，則獲取的是全部這個標籤名的元素，返回一個HTMLCollection對象

至關於一個NodeList對象。

getElementsByTagName也能夠在某個元素上調用，例如，如今獲取了一個元素element

element.getElementsByTagName("div")就是在element這個元素的全部後代元素中進行搜索。

var a＝document.getElementsByTagName("div")

a.length:獲取所得到的元素的個數

a[i]/a.item(i):獲取第i 個元素

getElementsByClassName

這個方法一樣能夠在元素上調用，也能夠用document調用，返回一個NodeList類型，存儲的爲具備該類名的標籤

在元素上調用的時候是得到該元素的後代中具備這個類名的元素

var a＝document.getElementsByClassName("aaa")

a.length:獲取所得到的元素的個數

a[i]/a.item(i):獲取第i 個元素

同時能夠搜索具備幾個類的元素

例如document.getElementsByClassName("aaa bbb ccc")

getElementsByName

該方法會返回name爲某個具體值的元素，爲HTMLCollection類型，至關於一個NodeList類型

只能用document調用

var a＝document.getElementsByName("aaa")

a.length:name爲aaa的元素個數

a[i]/a.item(i):第i 個元素

querySelector

這個方法能夠有document，html中的各類元素，和documentFragment調用，其中documentFragment是DOM中的一個節點，有文章做專門介紹

document在全局查找，在元素上調用會在元素的後代中查找，在documentFragment上調用，會在documentFragment的內容中進行查找

傳入的參數能夠是任何的CSS選擇器

例如

document.querySelector(".abc") 查找類名爲abc的元素

document.querySelector("p a")查找全部是p標籤的後代的a元素

這個方法只返回查找到的第一個元素

querySelectorAll

與querySelector同樣，可是會找到全部的元素，返回NodeList類型

有item() [] length屬性

以上全部的方法得到到的元素都有一個classList屬性

classList屬性中有add，remove，traggle，contains，item方法，有length屬性

a[0].classList.add("某個類名")：能夠在該標籤中加入這個類

a[0].classList.remove("某個類名")：能夠在該標籤中加入這個類

a[0].classList.toggle("某個類名")：能夠判斷標籤中是否有這個類，若是有就刪除，若是沒有，就添加

a[0].classList.contains("某個類名")：判斷標籤中是否有這個類，返回true活着false

a[0].classList.length：獲得這個元素中類的個數

a[0].classList.item(i)/a[0].classList[i]:獲取第i個類

用這個屬性，就能夠很方便的對元素的類進行操做

document還有一些簡單的操做

document.anchors 獲得全部帶有name的<a>標籤

document.links 獲得全部帶有href的<a>標籤

document.images 獲得全部的<img>標籤

document.forms 獲得全部的<form>標籤

這是個方法都返回HTMLCollection對象，至關於NodeList對象有length，item() []屬性和方法

其實這四個方法就是上面方法的一些簡寫，本質都是同樣的

write() writeln() open() close()方法

document.write():接收一個字符串參數，可使字符串，js裏的各類方法，或html標籤，script標籤，將執行的結果輸出到頁面中，

若是有</script>要將其轉義爲<\/script>，不然識別到</script>時會使結束js的加載。

若是在整個頁面都加載完再調用這個方法的話，就會把以前的頁面覆蓋，若是在頁面加載過程當中調用，則不會覆蓋。

document.writeln() 與document.write()做用相同，不過最後會自動添加一個換行符

open() close() 會分別打開和關閉網頁的輸出流。若是在頁面加載過程當中調用document.write()則不用調用這兩個方法

若是在頁面加載結束調用document.write()，則會自動調用document.open()擦出以前頁面的內容，而後執行完document.write()後自動調用

document.close()關閉輸入流，不用顯示調用這兩個方法。

createElement()方法

用document.createDocument()方法，能夠建立元素，括號裏爲元素名

例如var aaa=document.createDocument("div")

此時則建立了一個div元素，存儲在aaa中，能夠爲其添加屬性

div.align="center" 等等

能夠用appendChild等方法將aaa即div元素插入到html文檔中

還有另外一種建立元素的方法

var aaa=document.createDocument("<div align=\"center\"></div>")

即直接傳入html標籤

createAttribute()方法

建立屬性節點，在Element與Attr節點那一章中具體說明

1. document
2. Document
3. Single document interface和Multiple document interface
4. Document以及Document CRUD操作
5. New Document
6. Elasticsearch Document
7. Document類
8. $(document).ready()
9. JavaScript document
10. javascript document
更多相關文章...
• XSLT document() 函數 - XSLT 教程
• XML DOM - Document 對象 - XML DOM 教程

相關標籤/搜索

document

indexwriter+document+field

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。