全新java大資料教程之JavaScript的DOM物件（Document Object Model 文件物件模型）
阿新 • • 發佈：2021-12-23
一、DOM簡介
DOM：Document Object Model 文件物件模型
要實現頁面的動態互動效果，bom 操作遠遠不夠，需要操作 html 才是核心。如何操作 htm，就是 DOM。簡單的說，dom 提供了用程式動態控制 html 介面。DOM即文件物件模型描繪了一個層次化的節點樹，執行開發人員新增、移除和修改頁面的某一部分。dom 處於javascript 的核心地位上。
每個載入瀏覽器的 HTML 文件都會成為 Document 物件。Document 物件使我們可以從指令碼中對 HTML 頁面中的所有元素進行訪問。Document 物件是 Window 物件的一部分，可通過 window.document 屬性對其進行訪問。
二、節點
載入 HTML 頁面時，Web 瀏覽器生成一個樹型結構，用來表示頁面內部結構。DOM 將這種樹型結構理解為由節點組成，組成一個節點樹。對於頁面中的元素，可以解析成以下幾種型別的節點：
html --> 文件節點
div --> 元素節點
title --> 屬性節點
測試 Div --> 文字節點
<html>
<head>
<title>樹!樹!到處都是樹!</title>
</head>
<body>
<div title="屬性節點">測試 Div</div>
</body>
</html>三、操作元素的節點
當HTML文件在被解析為一顆DOM樹以後，裡面的每一個節點都可以看做是一個一個的物件，我們稱為DOM物件，對於這些物件，我們可以進行各式各樣的操作，查詢到某一個或者一類節點物件，可以建立某種節點物件，可以在某個位置新增節點物件，甚至可以動態地刪除節點物件，這些操作可以使我們的頁面看起來有動態的效果，後期結合事件使用，就能讓我們的頁面在特定時機、特定的事件下執行特定的變換。
1、獲取節點
在進行增、刪、改的操作時，都需要指定到一個位置，或者找到一個目標，此時我們就可以通過Document物件提供的方法，查詢、定位某個物件（也就是我們說的節點）。
注意：操作 dom 必須等節點初始化完畢後，才能執行。
處理方式兩種:
（1）把 script 呼叫標籤移到html末尾即可；
（2）使用onload事件來處理JS，等待html 載入完畢再載入 onload 事件裡的 JS。
window.onload = function () { //預載入 html 後執行};獲取方式如下：
<body>
<p id="p1" class="para">這是一個段落<span>文字</span></p>
<p id="p1" class="para">這又是一個段落</p>
<input type="text" name="txt" />
<input type="checkbox" name="hobby" value="游泳" />游泳
<input type="checkbox" name="hobby" value="籃球" />籃球
<input type="checkbox" name="hobby" value="足球" />足球
<hr />
<a href="javascript:void(0)" onclick="testById()">按照id獲取</a>
<a href="javascript:void(0)" onclick="testByName()">按照name獲取</a>
<a href="javascript:void(0)" onclick="testByTagName()">按照標籤名獲取</a>
<a href="javascript:void(0);" onclick="testByClass();">按照class獲取</a>
</body>
說明：href="javascript:void(0)"：偽協議，表示不執行跳轉，而執行指定的點選事件。本文是Java大資料教程中JavaScript課程DOM部分的教學文件，如需全套視訊課程和資料請評論留言或私聊。
<script type="text/javascript">
// 按照id獲取元素
function testById() {
// 返回單個物件
var p = document.getElementById("p1");
console.log(p);
// 表示獲取元素開始標籤和結束標籤之間的html結構
console.log(p.innerHTML);
console.log(p.innerText); // 表示獲取標籤之間的普通文字
}
// 按照name獲取元素
function testByName() {
// 物件陣列
var ho = document.getElementsByName("hobby");
console.log(ho);
for(var i = 0; i <= ho.length - 1; i++) {
console.log(ho[i].value);
}
}
// 按照標籤名獲取元素
function testByTagName() {
// 物件陣列
var inputArr = document.getElementsByTagName("input");
for(var i = 0; i < inputArr.length; i++) {
if(inputArr[i].type == "text") {
console.log("text型別");
} else if(inputArr[i].type == "checkbox") {
if(inputArr[i].checked) {
console.log(inputArr[i].value);
}
}
}
}
// 按照class屬性獲取元素
function testByClass() {
// 物件陣列
var ps = document.getElementsByClassName("para");
console.log(ps[0].innerHTML);
ps[0].innerHTML += "這是一段新的文字";
}
</script>
四、建立節點和插入節點
很多時候我們想要在某個位置插入一個新的節點，此時我們首先需要有一個節點存在，可以通過以下幾種方式建立新節點。
1、建立節點
2、插入節點
<button onclick="add()">新增段落</button>
<div id="container"></div>
<script type="text/javascript">
function add(){
var container = document.getElementById('container')
var paragraph = document.createElement('p');
var txt = document.createTextNode('hello')
paragraph.appendChild(txt)
container.appendChild(paragraph)
}
</script>
新增 "段落、圖片、文字框、選項"
<body>
<button onclick="addPara();">新增段落</button>
<button onclick="addImg();">新增圖片</button>
<button onclick="addTxt();">新增文字框</button>
<button onclick="addOptions()">新增選項</button>
<select name="music">
<option value="-1">你心內的一首歌</option>
<option value="0">南山南</option>
<option value="1">喜歡你</option>
</select>
<hr />
<div id = "container"></div>
</body>
<script type="text/javascript">
// 新增p節點
function addPara(){
// 獲取容器
var container =document.getElementById("container");
// 建立段落<p></p>
var p =document.createElement('p');
// 第一種方式
// 建立文字節點
var txt=document.createTextNode("以後的你會感謝現在努力的你");
// 將txt節點追加到p節點中
p.appendChild(txt);
// 將p節點追加到container節點中
container.appendChild(p);
/*
// 第二種方式
// 向p節點中新增內容
p.innerHTML = "以後的你會感謝現在努力的你";
// 將p節點追加到container節點中
container.appendChild(p);
*/
/*
// 第三種方式
// 將字串型別的p標籤內容新增到container中，不會新增多次
var str = "<p>以後的你會感謝現在努力的你</p>";
container.innerHTML = str;
*/
}
// 新增圖片
function addImg(){
// 建立圖片
var img = document.createElement("img") ;
/*
// 設定屬性第一種方式
// 設定img標籤的src屬性
// img.src ="http://www.baidu.com/img/bd_logo1.png";
*/
// 設定屬性第二種方式
// setAttribute() 方法新增指定的屬性，併為其賦指定的值。
// 設定img的src屬性
img.setAttribute('src','http://www.baidu.com/img/bd_logo1.png');
img.style.width = '300px';
img.style.height = '200px';
// 獲取容器
var container =document.getElementById("container");
// 將img節點追加到container中。
container.appendChild(img);
}
// 新增文字框
function addTxt(){
// 建立文字框
var txt =document.createElement("input");
/*
// 設定型別第一種方式
txt.type = "text";
txt.value = "新增成功";
*/
// 設定型別第二種方式
txt.setAttribute('type', 'text');
txt.setAttribute('value', '新增成功');
/*
* txt.type = 'password'
* txt.value = '123'
*/
// 獲取容器
var container =document.getElementById("container");
// 將txt節點追加到container中。
container.appendChild(txt);
}
// 新增下拉框的選項
function addOptions(){
// 第一種方式
/*
// 建立下拉項
var option = document.createElement("option") ;
option.value = "2" ;
option.text = "油菜花" ;
// 獲取下拉框
var sel = document.getElementsByTagName("select")[0];
// 新增 下拉項
sel.appendChild(option);
*/
// 第二種方式:
var option = document.createElement("option") ;
option.value = "2" ;
option.text = "不該" ;
// 獲取下拉框
var sel = document.getElementsByTagName("select")[0];
// 新增下拉項
sel.options.add(option);
// 第三種方式: 新增下拉項
var sel = document.getElementsByTagName("select")[0];
sel.innerHTML += "<option value = '2'>英雄</option>" ;
}
</script>
如需全套java大資料架構教程和配套課件程式碼等資料請+V：xiaole888899999
3、間接查詢節點
4、刪除節點
removeChild()：從元素中移除子節點
<script type="text/javascript">
function delNode(){
var programmer =document.getElementById("programmer");
// 從父元素中刪除節點，獲取要刪除物件的父元素，然後從父元素中刪除該物件
programmer.parentNode.removeChild(programmer);
}
</script>
<body>
<span id="programmer">程式猿</span>
<a href="javascript:void(0)" onclick="delNode();">刪除</a>
</body>