家好，我是IT共享者，人稱皮皮。

前言

相信做網站對JavaScript再熟悉不過了，它是一門腳本語言，不同于Python的是，它是一門瀏覽器腳本語言，而Python則是服務器腳本語言，我們不光要會Python，還要會JavaScript，因為它對做網頁方面是有很大作用的。

1.文檔對象（DOM）

1).Document對象

這是我們用的最普遍的一個文檔對象了，專門用來操作DOM節點時用。

1)).獲取元素

document.getElementById()           #通過id查找HTML元素
document.getElementsByName()        #通過name查找HTML元素
document.getElementsByTagName()     #通過標簽名查找HTML元素
document.getElementsByClassName()   #通過類名查找HTML元素 
document.querySelector(".h")        #第一個類名為 "h" 的元素
document.querySelectorAll("div.no, div#h") #所有class為"no"或者id為"h"的div元素
document.body          #獲取body標簽
document.documentElement   #獲取html標簽

2)).獲取網頁內容

document.cookie        #網頁cookie
document.domain        #文檔的域名
document.lastModified  #文檔被最后修改的日期和時間
document.referrer      #載入當前文檔的文檔的URL
document.title         #當前文檔的標題
document.URL           #當前文檔的URL
document.doctype       #當前文檔的doctype
document.baseURI       #當前文檔的絕對URI
document.documentMode   #瀏覽器使用的模式
document.documentURI    #文檔的URI
document.implementation #DOM實現
document.inputEncoding  #文檔的編碼（字符集）
document.readyState     #文檔的（加載）狀態
document.strictErrorChecking    #是否強制執行錯誤檢查

3)).文檔寫入

document.write('hello world')   向文檔寫入文本
document.writeln('hello world') 向文檔寫入文本并換行

4)).獲取集合

document.all        #所有html元素
document.anchors    #所有Anchor引用
document.forms      #所有的表單引用
document.images     #所有的圖片引用
document.links      #所有的超鏈接引用
document.scripts    #所有的腳本引用
document.embeds     #所有的流媒體引用

5)).獲取節點

childNodes          #獲取子節點的集合 ，返回數組 ，并把換行和空格也當成是節點信息。
children            #獲取子節點的集合 ，返回數組   
firstChild          #獲取第一個子元素  并把換行和空格也當成是節點信息
firstElementChild   #獲取第一個子節點
lastChild           #獲取最后一個子節點 并把換行和空格也當成是節點信息
lastElementChild    #獲取最后一個子節點
parentNode          #獲取父節點
parentElement       #獲取父節點(IE)
offsetParent        #獲取所有父節點  對應的值是body下的所有節點信息
previousSibling         #獲取上一個兄弟節點  匹配字符，包括換行和空格，而不是節點
previousElementSibling  #獲取上一個兄弟節點  直接匹配節點
nextSibling             #獲取下一個兄弟節點  匹配字符，包括換行和空格，而不是節點
nextElementSibling      #獲取下一個兄弟節點  直接匹配節點
ownerDocument           #元素的根節點

這里我們獲取到了所有的Div元素，我們可以針對性的獲取一個ID下的Div的子元素以及它的兄弟和父，子元素，如下：

6)).創建節點

我們可以自定義節點并添加值，不過要將它添加到文檔中去，所以必須添加節點，一般和下方的增加節點配套使用。

document.createElement(標簽)  #創建HTML元素
document.createTextNode(文本) #給文檔添加文本
document.createComment(文本)  #創建一個注釋節點
document.createDocumentFragment() #創建文檔粉碎節點

7)).增加節點

appendChild（節點） #節點被添加到元素的末尾
insertBefore（a,b） #a節點會插入b節點的前面

8)).刪除節點

removeChild(節點名)  #被移除的節點仍在文檔中，只是文檔中已沒有其位置了

9)).替換節點

replaceChild(插入的節點，被替換的節點)

10)).復制節點

a.cloneChild() #復制a節點,復制出來的節點作為返回值為true時，則a元素后代也一并復制。否則，僅復制a元素本身

11)).節點屬性

#節點類型 nodeType 有三種情況
#1.元素節點  2.屬性節點  3.文本節點


#節點名稱 nodeName 


#節點值 nodeValue 
#元素節點沒節點值，為null 
#文本節點的節點值就是文本
#屬性節點的節點值就是該屬性值


#節點屬性獲取
a.width
a['width']
a.gerAttribute(屬性名)  返回指定的屬性值
a.gerAttributeNode(屬性名) 返回指定的屬性節點
節點屬性設置
a.width=400
a['width']=400
a.attributes['width']=400
a.setAttribute('width',400) 添加指定的屬性
a.setAttributeNode(b) 添加指定的屬性節點


#節點屬性刪除
a.removeChild(子節點)    從元素中移除子節點
a.removeAttribute(屬性)  從元素中移除指定屬性
a.removeAttributeNode(屬性) 移除指定的屬性節點，并返回被移除的節點


a.id 獲取當前元素的id
a.className  獲取當前元素的class
a.classList  獲取當前元素的class列表


a.accessKey='w'    設置或返回元素的快捷鍵
a.namespaceURI     返回指定節點的命名空間的 URI
a.dir              設置或返回元素的內容是否可編輯
a.normalize()      合并元素中相鄰的文本節點，并移除空的文本節點
a.tabIndex='3'     設置或返回元素的tab鍵控制次序
a.tagName          返回元素的標簽名
a.textContent      設置或返回節點及其子代的文本內容
a.title            設置或返回元素的標題屬性
a.item(num)        返回節點列表中位于指定下標的節點
a.length           返回節點列表中的節點數

12)).獲取元素文本

a.innerHTML  獲取或者設置對象內的HTML
a.innerText  獲取或者設置對象內的文本
a.outerHTML  獲取或者設置對象外的HTML
a.outerText  獲取或者設置對象外的文本
a.value      獲取或者設置表單元素的值

總結

這篇文章主要介紹了JavaScript的文檔對象。下一篇文章，我們繼續介紹JavaScript，敬請期待！

TML DOM (文檔對象模型)

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

HTML DOM 定義了用于 HTML 的一系列標準的對象，以及訪問和處理 HTML 文檔的標準方法。通過 DOM，你可以訪問所有的 HTML 元素，連同它們所包含的文本和屬性。

HTML DOM 模型被構造為對象的樹：

查找 HTML 元素

//通過 id 查找 HTML 元素
var x=document.getElementById("intro");

//通過標簽名查找 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

//通過類名找到 HTML 元素
var x=document.getElementsByClassName("intro");

HTML DOM 改變 HTML 內容

//改變 HTML 輸出流
document.write(Date());
//絕對不要在文檔加載完成之后使用,用btn點擊事件執行 document.write()。這會覆蓋該文檔。

//改變 HTML 內容
document.getElementById(id).innerHTML=new HTML

//改變 HTML 屬性
document.getElementById(id).attribute=new value

HTML DOM 改變 CSS

//改變 HTML 樣式
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

<h1 id="id1">我的標題 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
點我!</button>

HTML DOM 事件

//對事件做出反應
<h1 onclick="this.innerHTML='Ooops!'">點擊文本!</h1>

<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點擊文本!</h1>
</body>


//HTML 事件屬性
<body>
<p>點擊按鈕執行 <em>displayDate()</em> 函數.</p>
<button onclick="displayDate()">點我</button>
<script>
function displayDate()
{
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>


//使用 HTML DOM 來分配事件
document.getElementById("myBtn").onclick=function(){displayDate()};

//onchange 事件
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
輸入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>當你離開輸入框后，函數將被觸發，將小寫字母轉為大寫字母。</p>
</body>

HTML DOM 事件監聽器

//addEventListener() 方法
<body>
<p>該實例使用 addEventListener() 方法在按鈕中添加點擊事件。 </p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>
</body>

//向原元素添加事件句柄
<body>
<p>該實例使用 addEventListener() 方法在按鈕中添加點擊事件。 </p>
<button id="myBtn">點我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

//向同一個元素中添加多個事件句柄
<body>
<p>該實例使用 addEventListener() 方法向同個按鈕中添加兩個點擊事件。</p>
<button id="myBtn">點我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函數已執行!")
}
</script>
</body>

HTML DOM 元素

在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性，分別是：

1. nodeName : 節點的名稱
2. nodeValue ：節點的值
3. nodeType ：節點的類型

創建新的 HTML 元素

<body>
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("這是一個新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

刪除已有的 HTML 元素

<body>
<div id="div1">
	<p id="p1">這是一個段落。</p>
	<p id="p2">這是另一個段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
</body>

以上內容整理于網絡，如有侵權請聯系刪除。