JavaWeb基礎總結之Dom
Dom：Document Object Model（文件物件模型）。是W3C組織推薦的處理可擴充套件標誌語言的標準程式設計介面。在網頁上，組織頁面（或文件）的物件被組織在一個樹形結構中，用來表示文件中物件的標準模型就稱為DOM。
DOM實際上是以面向物件方式描述的文件模型。DOM定義了表示和修改文件所需的物件、這些物件的行為和屬性以及這些物件之間的關係。可以把DOM認為是頁面上資料和結構的一個樹形表示，不過頁面當然可能並不是以這種樹的方式具體實現。
通過 JavaScript，您可以重構整個 HTML 文件。您可以新增、移除、改變或重排頁面上的專案。
要改變頁面的某個東西，JavaScript 就需要獲得對 HTML 文件中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行新增、移動、改變或移除的方法和屬性，都是通過文件物件模型來獲得的。
DOM 可被 JavaScript 用來讀取、改變 HTML、XHTML 以及 XML 文件。
W3C DOM 標準被分為 3 個不同的部分：
-
核心 DOM - 針對任何結構化文件的標準模型
-
XML DOM - 針對 XML 文件的標準模型
-
HTML DOM - 針對 HTML 文件的標準模型
XML DOM
XML DOM 是：
-
用於 XML 的標準物件模型
-
用於 XML 的標準程式設計介面
-
中立於平臺和語言
-
W3C 標準
XML DOM 定義了所有 XML 元素的物件和屬性
換句話說：XML DOM 是用於獲取、更改、新增或刪除 XML 元素的標準。
HTML DOM
HTML DOM 是：
-
HTML 的標準物件模型
-
HTML 的標準程式設計介面
-
W3C 標準
HTML DOM 定義了所有 HTML 元素的物件和屬性，以及訪問它們的方法（介面）。
換言之，HTML DOM 是關於如何獲取、修改、新增或刪除 HTML 元素的標準。
關於Dom對html的常見操作：
document物件：表示整個文件
常用方法：
- write（“”）：想頁面輸出變數（值），向頁面輸出html程式碼
- getElementById（）通過Id獲得標籤物件，獲取物件後可以獲取物件的屬性資訊，也可以設定物件的屬性值
- getElementsByName（）通過name獲取一組同名的值，是一個數組，便利得到物件，順便得到相對應的屬性值
- document.getElementsByTagName（）返回的是一個數組通過標籤名獲取相應的物件順便獲取相對應的值
- 建立標籤：document.createElement("標籤名稱")
- 建立文字：document.createTextNode("文字內容")
- 把文字內容新增到父節點下面：appendchild方法
元素物件：element物件
- getAttribute（“value”）可以獲取到相應屬性的值
- setAttribute（“屬性名”，“屬性值”）設定標籤裡面的屬性名
- removeAttribute（“屬性名稱”）但是不可以刪除屬性value的值
- 獲取標籤下面的子標籤：陣列物件.chaildNodes把父標籤下面的標籤存入陣列（但是相容性差，一般不用）應該根據getElementsTagName（），方法很好，但是這個方法是document的方法，不是element物件的方法
- insertBefore（newNode，oldNode）在某個節點之前插入一個新的節點
- ul2.insertBefore（ul5，ul3）在ul2和ul3之間插入ul5
- removeChild刪除節點，通過父節點刪除掉自己
- 父節點.replaceChild（newNode，oldNode）用新節點替換父節點底下的舊節點
- cloneNode（）複製標籤節點內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload=function () {
//通過id得到物件
var ele=document.getElementById("test");
alert(ele.textContent)
//通過name屬性名得到物件陣列
var arr=document.getElementsByName("test");
for(var i=0;i<arr.length;i++){
alert(arr[i].textContent)
}
//通過標籤名得到物件陣列
var arr2=document.getElementsByTagName("p")
for(var i=0;i<arr2.length;i++){
alert(arr2[i].textContent)
}
// document.write("<input type='text' value='Is-Me-HL'/>")
// 上面這行程式碼是document直接向html頁面輸出資料，就是直接用資料覆蓋原先的頁面
//下面進行的是建立一個文字框物件，然後給他value屬性設定預設值Is-Me-Hl，
// 然後新增到html頁面中的body元素裡的末尾，注意：是新增，不是覆蓋，要和document.write()區分開來
var input=document.createElement("input")
input.type='text'
input.value="Is-Me-HL"
var body=document.getElementsByTagName("body")
body[0].appendChild(input)
//下面也是執行一個建立Element元素及新增一個元素的過程，原理同上，只是這次想給他賦值的是標籤對中的文字值
//建立p標籤
var p=document.createElement("p")
p.innerText="Hello，"
body[0].appendChild(p)
//功能同上
var TextNode=document.createTextNode("I am Is-Me-HL")
p.appendChild(TextNode)
//通過物件得到屬性值和設定屬性值，拿id為test的測試
//一開始已經拿到test元素物件了，name下面直接看看其操作
//得到id為test的元素的name屬性，因為name屬性也是test，所以不好區分的話，那麼我先設定其name值為其他，如https://blog.csdn.net/m0_37265215
ele.setAttribute("name","https://blog.csdn.net/m0_37265215")
//設定完成後，再得到其name的值，看是不是https://blog.csdn.net/m0_37265215
alert(ele.getAttribute("name"))
//增加一個屬性，然後進行刪除操作
ele.setAttribute("TestId","1")
alert(ele.getAttribute("TestId"))
//進行刪除
ele.removeAttribute("TestId");
alert(ele.getAttribute("TestId"))
}
</script>
</head>
<body>
<p id="test" name="test">Is-Me-Hl</p>
<p id="test1" name="test">Is-Me-Hl-1</p>
<p id="test2" name="test">Is-Me-Hl-2</p>
</body>
</html>注：以上文章僅是個人學習過程總結，若有不當之處，望不吝賜教。