初見成效，使用JS操作DOM對象

原創 码歌大大 2020-07-02 09:08

開篇寄語：

 

要緊盯住自己的人生目標，不要被周圍毫無意義的人或者事所牽絆，尤其不要生閒氣。

 

看淡一點，不要太在乎別人的那張臉；簡單一點，不要用他人的尺子，量自己的長短。心態好，一切安好。

 

昨天給大家提到過，那現在就一起來看看DOM。

 

二、JavaScript操作DOM對象

1、什麼是DOM

DOM：Document Object Model 文檔對象模型

要實現頁面的動態交互效果，BOM操作遠遠不夠，需要操作 html 纔是核心。如何操作 html，就是 DOM。

簡單的說，DOM提供了用程序動態控制 html 接口。DOM即文檔對象模型描繪了一個層次化的節點樹，運行開發人員添加、移除和修改頁面的某一部分。DOM處於javascript 的核心地位上。

每個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。

2、節點

加載 HTML 頁面時，Web 瀏覽器生成一個樹型結構，用來表示頁面內部結構。DOM 將這種樹型結構理解爲由節點組成，組成一個節點樹。對於頁面中的元素，可以解析成以下幾種類型的節點：

節點類型 HTML內容 例如
文檔節點 文檔本身 整個文檔 document
元素節點 所有的HTML元素 <a>、<div>、<p>
屬性節點 HTML元素內的屬性 id、href、name、class
文本節點 元素內的文本 hello
註釋節點 HTML中的註釋 <!-- --> 
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>樹！樹！到處都是樹！</title>
</head>

<body>
<h1>百度</h1>
<!-- 點擊超鏈接跳轉百度 -->
<a href="http://www.baidu.com">百度</a>
</body>

</html>

 

3、元素節點的操作

當HTML文檔在被解析爲一顆DOM樹以後，裏面的每一個節點都可以看做是一個一個的對象，我們成爲DOM對象，對於這些對象，我們可以進行各式各樣的操作，查找到某一個或者一類節點對象，可以創建某種節點對象，可以在某個位置添加節點對象，甚至可以動態地刪除節點對象，這些操作可以使我們的頁面看起來有動態的效果，後期結合事件使用，就能讓我們的頁面在特定時機、特定的事件下執行特定的變換。

獲取節點

在進行增、刪、改的操作時，都需要指定到一個位置，或者找到一個目標，此時我們就可以通過Document對象提供的方法，查找、定位某個對象（也就是我們說的節點）。

注意：操作 dom 必須等節點初始化完畢後，才能執行。處理方式兩種:

a. 把 script 調用標籤移到html末尾即可；

b. 使用onload事件來處理JS，等待html 加載完畢再加載 onload 事件裏的 JS。

window.onload = function() {
  // 當頁面加載完後調用函數
};

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<!-- 注意script塊的位置 -->
<script type="text/javascript">
window.onload = function() {
var dv = document.getElementById("dv");
dv.innerHTML = "我是一個div";
}
</script>
</head>

<body>
<div id="dv"></div>
</body>

</html>

獲取方式如下：

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>操作DOM對象-獲取節點</title>
</head>
<body>
<!-- 根據id class獲取元素 -->
<p id="p1" class="ptext">這是一個段落<span>文本</span></p>
<p id="p2" class="ptext">這又是一個段落</p>

<!-- 根據name 標籤名稱獲取元素 -->
<input type="checkbox" name="hobby" value="游泳" />游泳
<input type="checkbox" name="hobby" value="籃球" />籃球
<input type="checkbox" name="hobby" value="足球" />足球
<input type="text" value="我是一個輸入框" />

<!-- href="javascript:void(0);"僞協議，表示不執行跳轉，而執行指定的事件 -->
<a href="javascript:void(0);" οnclick="testById();">根據id獲取元素</a>
<a href="javascript:void(0);" οnclick="testByName();">根據name獲取元素</a>
<a href="javascript:void(0);" οnclick="testByTagName();">根標籤名稱獲取元素</a>
<a href="javascript:void(0);" οnclick="testByClass();">根據class獲取元素</a>

<script type="text/javascript">
// 根據id獲取元素
function testById() {
// 返回單個對象
var p = document.getElementById("p1");
console.log(p);
console.log(p.innerHTML);// 表示獲取元素開始標籤和結束標籤之間的html結構
console.log(p.innerText);// 表示獲取標籤之間的普通文本
}

// 根據name獲取元素
function testByName() {
// 返回對象數組
var hobby = document.getElementsByName("hobby");
console.log(hobby);
// 循環遍歷每一個元素
for (var i = 0; i < hobby.length; i++) {
console.log(hobby[i].value);
}
}

// 根據標籤名稱獲取元素
function testByTagName() {
// 返回對象數組
var inputArr = document.getElementsByTagName("input");
console.log(inputArr);

// 循環遍歷每一個元素
for (var i = 0; i < inputArr.length; i++) {
// 判斷是否是text類型
if ("text" == inputArr[i].type) {
console.log(inputArr[i].value);
// 判斷是否是checkbox類型
} else if ("checkbox" == inputArr[i].type) {
// 判斷是否選中
if (inputArr[i].checked) {
console.log(inputArr[i].value);
}
}
}
}

// 根據class獲取元素
function testByClass() {
// 返回對象數組
var ptext = document.getElementsByClassName("ptext");
console.log(ptext);
console.log(ptext[0].innerHTML);
console.log(ptext[0].innerText);
ptext[0].innerHTML += "，這是一段新的文本";
}
</script>
</body>
</html>

說明：href="javascript:void(0)";僞協議，表示不執行跳轉，而執行指定的點擊事件。

創建節點和插入節點

很多時候我們想要在某個位置插入一個新的節點，此時我們首先需要有一個節點存在，可以通過以下幾種方式創建新節點。

創建節點

插入節點

添加段落

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>添加段落</title>
</head>

<body>
<button οnclick="addP();">添加段落</button>
<div id="container"></div>

<script type="text/javascript">
function addP() {
// 第一種方式
// 根據id獲取元素div
var container = document.getElementById('container');
// 創建p元素
var p = document.createElement('p');
// 創建文本節點
var txt = document.createTextNode('以後的你會感謝現在努力的你');
// p元素添加文本節點
p.appendChild(txt);
// div元素添加p元素
container.appendChild(p);

// 第二種方式
// 向p節點中添加內容
p.innerHTML = "以後的你會感謝現在努力的你2";
// 將p節點追加到container節點中
container.appendChild(p);

// 第三種方式
// 將字符串類型的p標籤內容添加到container中
var str = "<p>以後的你會感謝現在努力的你3</p>";
container.innerHTML = str;
}
</script>

</body>

</html>

添加圖片

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>添加圖片</title>
</head>

<body>
<button οnclick="addImg();">添加圖片</button>
<div id="container"></div>

<script type="text/javascript">
// 添加圖片
function addImg() {
// 創建img元素
var img = document.createElement("img");
// 設置屬性第一種方式
// 設置img元素的src屬性
img.src = "http://www.baidu.com/img/bd_logo1.png";
img.style.width = '500px';
img.style.height = '260px';

// 設置屬性第二種方式
// setAttribute() 方法添加指定的屬性，併爲其賦指定的值。
// 設置img元素的src屬性
img.setAttribute('src', 'http://www.baidu.com/img/bd_logo1.png');
img.setAttribute("style", "width: 500px;height: 260px;");

// 獲取div元素
var container = document.getElementById("container");
// 將img元素節點追加到div元素中
container.appendChild(img);
               
               // 第三種方式
// 將字符串類型的p標籤內容添加到container中
container.innerHTML = "<img src='http://www.baidu.com/img/bd_logo1.png' />";
}
</script>

</body>

</html>

添加文本框

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>添加文本框</title>
</head>

<body>
<button οnclick="addTxt();">添加文本框</button>
<div id="container"></div>

<script type="text/javascript">
// 添加文本框
function addTxt() {
// 創建input元素
var txt = document.createElement("input");
// 設置類型第一種方式
txt.type = "text";
txt.value = "添加成功";

//txt.type = 'password'
//txt.value = '123'

// 設置類型第二種方式
txt.setAttribute('type', 'text');
txt.setAttribute('value', '添加成功');

// 獲取div元素
var container = document.getElementById("container");
// 將input節點追加到div元素中
container.appendChild(txt);
               
               // 第三種方式
// 將字符串類型的p標籤內容添加到container中
container.innerHTML = "<input type='password' />";
}
</script>

</body>

</html>

 

添加選項框

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>添加選項框</title>
</head>

<body>
<button οnclick="addOptions()">添加選項</button>
<select name="music">
<option value="0">---請選擇---</option>
<option value="1">南山南</option>
<option value="2">喜歡你</option>
</select>

<script type="text/javascript">
// 添加下拉框的選項
function addOptions() {
// 第一種方式
// 創建下拉項
var option = document.createElement("option");
option.value = "3";
option.text = "需要人陪";
// 獲取下拉框
var sel = document.getElementsByTagName("select")[0];
// 添加下拉項 
sel.appendChild(option);

// 第二種方式
var option = document.createElement("option");
option.value = "4";
option.text = "光年之外";
// 獲取下拉框
var sel = document.getElementsByTagName("select")[0];
// 添加下拉項
sel.options.add(option);

// 第三種方式
// 獲取下拉框
var sel = document.getElementsByTagName("select")[0];
// 添加下拉選項
sel.innerHTML += "<option value='5'>風的季節</option>";
}
</script>

</body>

</html>

間接查找節點

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>間接查找節點</title>
</head>

<body>
<button type="button" id="btn">測試按鈕</button>

<div id="dv">
開始
<form>
<table>
<input />
<input />
<input id="inp" />
<span></span>
</table>
</form>
結束
</div>

<script type="text/javascript">
var dv = document.getElementById('dv');

// childNodes返回元素的一個子節點的數組
function get_childNodes() {
console.log(dv.childNodes[1]); // 獲取到form
}

// firstChild返回元素的第一個子節點
function get_firstChild() {
console.log(dv.firstChild);
}

// lastChild返回元素的最後一個子節點
function get_lastChild() {
console.log(dv.lastChild);
}

// previousSibling返回元素的上一個兄弟節點
function get_previousSibling() {
var inp = document.getElementById('inp');
console.log(inp.previousSibling);
}
           
           // nextSibling返回元素的下一個兄弟節點
function get_nextSibling() {
var inp = document.getElementById('inp');
console.log(inp.nextSibling);
}
           
           // parentNode返回元素的父節點
function get_parentNode() {
var inp = document.getElementById('inp');
console.log(inp.parentNode);
}

var btn = document.getElementById('btn');
btn.onclick = get_childNodes; // DOM方式處理 解耦
</script>
</body>

</html>

刪除節點

方法|屬性 描述
removeChild() 從元素中移除子節點

第一種：獲取父節點，然後刪除子節點

父節點.removeChild(childNode);

第二種：通過舊節點定位到父節點，然後刪除子節點

childNode.parentNode.removeChild(childNode);

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>刪除節點</title>
</head>

<body>
<div id="dv">
<span id="cxy">程序猿</span>
<a href="javascript:void(0)" οnclick="delNode();">刪除</a>
</div>

<script type="text/javascript">
function delNode() {
// 第一種方式：獲取父節點，然後刪除子節點
var dv = document.getElementById('dv');
var cxy = document.getElementById("cxy");
dv.removeChild(cxy);

// 第二種方式：通過舊節點定位到父節點，然後刪除子節點
//var cxy = document.getElementById("cxy");
//cxy.parentNode.removeChild(cxy);
}
</script>
</body>

</html>

 

4、屬性操作

在操作DOM對象時，除了可以操作對象整體之外，還可以更加靈活地操作對象中的各個屬性。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>屬性操作</title>
</head>

<body>
<button type="button" id="btn">測試按鈕</button><br />

<input type="text" value="加油，勝利就在眼前" id="txt" class="test" />
<br />

性別：
<input type="radio" checked="true" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br />

<img src="img/timg.jpg" id="sxtimg" title="sxt" />

<script type="text/javascript">
var txt = document.getElementById("txt");
var sex = document.getElementsByName("sex")[0];
var sxtimg = document.getElementById("sxtimg");

// 獲取文本
function getValue() {
// 獲取文本
console.log(txt.value);
}

// 獲取屬性
function getAttr() {
var id = txt.getAttribute("id");
               console.log(id);
               console.log(txt.id);
var value = txt.getAttribute("value");
               console.log(value);
var clazz = txt.getAttribute("class");
               console.log(clazz);
               console.log(txt.className);
}

// 獲取狀態是否選中
function getChecked() {
console.log(sex.checked);// 指定選項是否被選中
}

// 設置屬性
function setAttr() {
sxtimg.style.display = 'none';// 隱藏圖片
txt.setAttribute("value", "success");// 修改文本內容

txt.setAttribute("aaa", "000000"); // 自定義屬性
console.log(txt.getAttribute("aaa")); // 獲取自定義屬性值
}

// 刪除屬性
function delAttr() {
console.log(txt.getAttribute("id"));
txt.removeAttribute("id");
console.log(txt.getAttribute("id"));
}

var btn = document.getElementById('btn');
btn.onclick = delAttr;
</script>
</body>

</html>

Javascript進行的是原始的操作，常常和事件一起結合使用，後期學習JQuery可以更方便地操作DOM。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

自己做一個在線markdown編輯器

赵sir来了 2019-08-03 13:25:03

ES6 初探

赵sir来了 2019-04-15 13:24:34

【碼歌】jQuery事件，完成個人相冊

码歌大大 2019-03-21 06:41:21

【碼歌】養兵千日用兵一時，你準備好了嗎？

码歌大大 2019-03-21 06:41:21

【碼歌】write less ,do more----輕巧jQuery

码歌大大 2019-03-21 06:41:21

小有成就，深入理解JavaScript事件模型

码歌大大 2019-03-16 06:51:06

忠於人品，跳動在網頁的精靈--JavaScript

码歌大大 2019-03-15 06:05:16

陷於才華，跳動在網頁的精靈--JavaScript

码歌大大 2019-03-15 06:05:16

瞭解了HTML之後，一起來看怎麼給他穿上好看的衣服

码歌大大 2019-03-14 03:23:52

只需3分鐘，輕鬆明白一個網頁是如何製作的

码歌大大 2019-03-13 02:28:57

熟練使用常用標籤，網頁可以這麼輕鬆搞定

码歌大大 2019-03-13 02:28:16

有趣的 HTML5 滑塊

赵sir来了 2019-02-25 13:20:22

前端必會...前端面試/html面試

川衡 2018-08-24 09:23:44

前端必會

川衡 2018-08-24 09:23:44