【JavaScript教科書】JavaScript之BOM和DOM操作詳細總結

文章目錄
@[toc]
一、JavaScript的BOM
1.1 瞭解BOM
1.2 window
1.3 window尺寸
1.4 window方法（打開與關閉）
1.5 Screen（屏幕尺寸）
1.6 location
1.6.1 什麼是Location？
1.6.2 location方法
1.7 history
1.7.1 什麼是history？
1.7.2 history方法
二、JavaScript計時
2.1 重溫Date對象
2.2 JavaScript計時函數
2.2.1 setInterval() 週期執行函數
2.2.2 clearInterval() 停止周期函數
2.2.3 setTimeout() 延遲執行函數
2.2.4 clearTimeout() 停止延時函數
2.3 JavaScript模擬鐘錶
2.3.1 模擬鐘錶（BOM）
2.3.2 模擬鐘錶（DOM）
三、JavaScript的DOM
3.1 什麼是DOM？
3.2 MOD模型分類
3.3 DOM對象
3.3.1 Document文檔對象
3.3.2 Element元素對象
3.4 DOM中的節點屬性
3.4.1 nodeName節點的名稱
3.4.2 nodeValue節點的值
3.4.3 nodeType節點的類型
3.4.4 創建節點對象
3.5 常用屬性和方法
3.5.1 獲取父節點
3.5.2 獲取所有的子節點
3.5.3 獲取元素屬性的集合
3.5.4 節點的獲取遍歷
3.6 全選/反選按鈕案例
四、DOM元素操作
4.1 獲取HTML元素
4.1.1 id查找HTML元素
4.1.2 標籤名查找HTML元素
4.1.3 類名查找HTML元素
4.1.4 innerText與innerHTML的區別
4.1.5 獲取HTML元素的使用
4.1.6 獲取設置移除屬性案例
4.2 修改HTML
4.2.1 改變HTML文本
4.2.2 改變HTML屬性
4.3 修改CSS樣式
4.4 元素標籤的 CRUD
4.4.1 創建新元素
4.4.2 刪除已有的 HTML 元素
4.4.3 替換元素
4.5 DOM事件
4.5.1 DOM事件介紹
4.5.2 DOM事件改變文本內容
4.6EventListener
4.6.1 addEventListener() 方法
4.6.2 事件冒泡或事件捕獲

一、JavaScript的BOM

1.1 瞭解BOM

瀏覽器對象模型 (BOM) 使 JavaScript 有能力與瀏覽器"對話"。

瀏覽器對象模型 (BOM)：(Browser Object Model)尚無正式標準。

由於現代瀏覽器已經（幾乎）實現了 JavaScript 交互性方面的相同方法和屬性，因此常被認爲是 BOM 的方法和屬性。

1.2 window

所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。

所有 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。

全局變量是 window 對象的屬性。

全局函數是 window 對象的方法。

甚至 HTML DOM 的 document 也是 window 對象的屬性之一：（兩者相同）

window.document.getElementById("header");
document.getElementById("header");

1.3 window尺寸

有三種方法能夠確定瀏覽器窗口的尺寸。

注意： 瀏覽器窗口的內部高度(不包括滾動條、菜單欄、工具欄)

適用於Internet Explorer、Chrome、Firefox、Opera 以及 Safari瀏覽器的window如下：

window.innerHeight

window.innerWidth

適用於Internet Explorer 8、7、6、5瀏覽器的window如下：

document.documentElement.clientHeight

document.documentElement.clientWidth

或者

document.documentElement.clientHeight

document.documentElement.clientWidth

JavaScript方案，適用於所有瀏覽器的window如下：

var width = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;

var height = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;

<script type="text/javascript">	
	document.write(window.innerWidth + "*" + window.innerHeight + "<br />");
    document.write(document.documentElement.clientWidth + "*" + document.documentElement.clientHeight + "<br />");
    document.write(document.body.clientWidth + "*" + document.body.clientHeight + "<br />");

	var width = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
	var height = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
	document.write(width + "*" + height);
</script>

1.4 window方法（打開與關閉）

打開新窗口：window.open()

關閉當前窗口：window.close()

body>
<button onclick="newWindow()">百度搜索</button><br />
<button onclick="closeWindow()">關閉</button><br />
<script type="text/javascript">
    var newWindows;
    function newWindow() {
        newWindows = window.open("https://www.baidu.com/","baidu");
    }
    function closeWindow() {
        newWindows.close();
    }
</script>
</body>

1.5 Screen（屏幕尺寸）

可用寬度：screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，比如窗口任務欄。

可用高度：screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，比如窗口任務欄。

<script type="text/javascript">
document.write(screen.availWidth + "*" + screen.availHeight);
</script>

1.6 location

1.6.1 什麼是Location？

location 對象用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。window.location 對象在編寫時可不使用 window 這個前綴。

1.6.2 location方法

名稱	描述
location.href	屬性返回當前頁面的 URL
location.hostname	返回 web 主機的域名
location.pathname	返回當前頁面的路徑和文件名
location.port	返回 web 主機的端口（80 或 443）
location.protocol	返回所使用的 web 協議（http:// 或 https://）
location.assign	加載新的文檔

<body>
<button onclick="ass()">百度</button>
<script type="text/javascript">
    //加載新文檔
    function ass() {
        location.assign("https://www.baidu.com/");
    }
    console.log(location.href);
    console.log(location.hostname);
    console.log(location.pathname);
    console.log(location.port);
    console.log(location.protocol);
</script>
</body>

1.7 history

1.7.1 什麼是history？

window.history 對象包含瀏覽器的歷史。

window.history 對象在編寫時可不使用 window 這個前綴。

爲了保護用戶隱私，對 JavaScript 訪問該對象的方法做出了限制。

1.7.2 history方法

名稱	描述
history.back	方法名描述與在瀏覽器點擊後退按鈕相同
history.forward	與在瀏覽器中點擊按鈕向前相同

以下兩個JSP點擊超鏈接後，可以使用前進、後退按鈕來實現功能！

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>history</title>
</head>
<body>
<button onclick="f()">前進</button>
<a href="back.jsp">訪問頁面</a>
<script type="text/javascript">
    function f() {
        window.history.forward();
    }
</script>
</body>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>回退</title>
</head>
<body>
<button onclick="b()">回退</button>
<script type="text/javascript">
    function b() {
        window.history.back();
    }
</script>
</body>
</html>

二、JavaScript計時

2.1 重溫Date對象

var date = new Date();
document.write(d);
document.write("<br/>")
document.write("年份："+(date.getYear()+1900));
document.write("<br/>")
document.write("年份："+date.getFullYear());
document.write("<br/>");
document.write("月份:"+(date.getMonth()+1))
document.write("<br/>");
document.write("日期:"+date.getDate());
document.write("<br/>");
document.write("小時:"+date.getHours());
document.write("<br/>");
document.write("分鐘:"+date.getMinutes());
document.write("<br/>");
document.write("秒:"+date.getSeconds());

2.2 JavaScript計時函數

2.2.1 setInterval() 週期執行函數

setInterval() 週期執行函數。間隔指定的毫秒數不停地執行指定的代碼。

//每三秒彈出一次Hello World!
setInterval(function(){alert("Hello World!")},3000);

2.2.2 clearInterval() 停止周期函數

clearInterval() 方法用於停止 setInterval() 方法執行的函數代碼。

var i = setInterval(function(){alert("Hello Wrold!")},3000);
//停止周期函數,每三秒彈出一次Hello World!
clearInterval(i);

2.2.3 setTimeout() 延遲執行函數

setTimeout() 延遲執行函數。延遲執行指定的函數，只能執行一次。

語法：window.setTimeout(“javascript 函數”,毫秒數);

第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 “alert(‘5 seconds!’)”，或者對函數的調用，諸如 alertMsg()"

第二個參數指示從當前起多少毫秒後執行第一個參數

//等待3秒後僅彈出一次Hello World!的窗口
setTimeout(function(){alert("啊哈哈哈！")},2000);

//使用延遲函數實現周期函數效果
<script type="text/javascript">
    var num = 0;
    var id = 0;
    function show() {
        document.write("我是id" + id + "<br />");
        num++;
        if (num != 20) {
            id = setTimeout(show, 1000);
        }
    }
    id = setTimeout(show, 1000);
</script>

2.2.4 clearTimeout() 停止延時函數

clearTimeout() 方法用於停止執行setTimeout()方法的函數代碼。

<button onclick="c()">停止</button>
<script type="text/javascript">
    //設置延遲彈窗2秒後執行一次
    var s = setTimeout(function () {
        alert("啊哈哈哈！")
    }, 2000);

    //停止延遲函數
    function c() {
        clearTimeout(s);
    }
</script>

2.3 JavaScript模擬鐘錶

2.3.1 模擬鐘錶（BOM）

<button onclick="stop()">停止</button>
<button onclick="go()">繼續</button>
<script type="text/javascript">
    function times() {
        //刷新當前文檔,類似於你瀏覽器上的刷新頁面按鈕。
        location.reload();
    }

    //顯示日期事件
    var date = new Date();
    document.write(date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
    //每過1秒刷新一次時間（刷新）
    var s = setInterval(times, 1000);

    //繼續計時
    function go() {
        s = setInterval(times, 1000);
    }

    //停止計時
    function stop() {
        clearInterval(s);
    }
</script>

2.3.2 模擬鐘錶（DOM）

var myVar = setInterval(function(){myTimer()},1000);

function myTimer()
{
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}

<p id="demo"></p>
<button onclick = "myStopFunction()">Stop time</button>

<script>
var myVar = setInterval(function(){myTimer()},1000);
function myTimer()
{
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction()
{
clearInterval(myVar);
}
</script>

三、JavaScript的DOM

3.1 什麼是DOM？

通過 HTML DOM,使用 JavaScript訪問 HTML 文檔的所有元素。

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

3.2 MOD模型分類

HTML DMO模型定義了訪問和操作 HTML 文檔的標準方法。DOM 將 HTML 文檔表達爲樹結構。

在HTML當中，一切都是節點

元素節點：HMTL標籤。

文本節點：標籤中的文字（比如標籤之間的空格、換行）

屬性節點：標籤的屬性。

各節點關係體現爲： 父子關係\兄弟關係

通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。

JavaScript 能夠改變頁面中的所有 HTML 元素。

JavaScript 能夠改變頁面中的所有 HTML 屬性。

JavaScript 能夠改變頁面中的所有 CSS 樣式。

JavaScript 能夠對頁面中的所有事件做出反應。

XML DOM文檔對象模型定義訪問和操作XML文檔的標準方法。DOM 將 XML 文檔作爲一個樹形結構，而樹葉被定義爲節點。

XML格式

<?xml version="1.0" encoding="utf-8" ?>
<students>
    <student id="1">
        <name>張三</name>
        <age>18</age>
    </student>
    <student id="2">
        <name>李四</name>
        <age>19</age>
    </student>
</students>

3.3 DOM對象

HTML DOM對象

對象	描述
Document（文檔對象）	每個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。
Element（元素對象）	在 HTML DOM 中，Element 對象表示 HTML 元素。Element 對象可以擁有類型爲元素節點、文本節點、註釋節點的子節點。NodeList 對象表示節點列表，比如 HTML 元素的子節點集合。元素也可以擁有屬性。屬性是屬性節點。
Attribute（節點對象）	在 HTML DOM 中，Attr 對象表示 HTML 屬性。HTML 屬性始終屬於 HTML 元素。
Event（事件對象）	Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

注意：下文的常用屬性或方法用加粗斜體修飾！

3.3.1 Document文檔對象

Document對象所有屬性

屬性	描述
body	提供對元素的直接訪問。對於定義了框架集的文檔，該屬性引用最外層的。
cookie	設置或返回與當前文檔有關的所有 cookie。
domain	返回當前文檔的域名。
lastModified	返回文檔被最後修改的日期和時間。
referrer	返回載入當前文檔的文檔的 URL。
title	返回當前文檔的標題。
URL	返回當前文檔的 URL。

Document對象常用方法

方法	描述
close()	關閉用 document.open() 方法打開的輸出流，並顯示選定的數據。
getElementById()	返回對擁有指定 id 的第一個對象的引用。
getElementsByName()	返回帶有指定名稱的對象集合。
getElementsByTagName()	返回帶有指定標籤名的對象集合。
open()	打開一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出。
write()	向文檔寫 HTML 表達式或 JavaScript 代碼。
writeln()	等同於 write() 方法，不同的是在每個表達式之後寫一個換行符。
createAttribute()	創建屬性對象
createElement()	創建元素對象
createTextNode()	創建文本對象

3.3.2 Element元素對象

Element元素對象常用屬性和方法

屬性/方法	描述
element.appendChild()	向元素添加新的子節點，作爲最後一個子節點。
element.attributes	返回元素屬性的 NamedNodeMap。
element.childNodes	返回元素子節點的 NodeList。
element.parentNode	返回元素的父節點。
element.className	設置或返回元素的 class 屬性。
element.clientHeight	返回元素的可見高度。
element.clientWidth	返回元素的可見寬度。
element.firstChild	返回元素的首個子節點。
element.lastChild	返回元素的最後一個子元素。
element.removeChild()	從元素中移除子節點。
element.replaceChild()	替換元素中的子節點。
element.getAttribute()	返回元素節點的指定屬性值。
element.getAttributeNode()	返回指定的屬性節點。
element.removeAttribute()	從元素中移除指定屬性。
element.removeAttributeNode()	移除指定的屬性節點，並返回被移除的節點。
element.getElementsByTagName()	返回擁有指定標籤名的所有子元素的集合。
element.id	設置或返回元素的 id。
element.innerHTML	設置或返回元素的內容。
element.nodeName	返回元素的名稱。
element.nodeType	返回元素的節點類型。
element.nodeValue	設置或返回元素值。
element.setAttribute()	把指定屬性設置或更改爲指定值。
element.setAttributeNode()	設置或更改指定屬性節點。
element.style	設置或返回元素的 style 屬性。
nodelist.item()	返回 NodeList 中位於指定下標的節點。
nodelist.length	返回 NodeList 中的節點數。

3.4 DOM中的節點屬性

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

3.4.1 nodeName節點的名稱

nodeName 屬性：節點的名稱，是隻讀的。

元素節點的 nodeName 與標籤名相同

屬性節點的 nodeName 是屬性的名稱

文本節點的 nodeName 永遠是 #text

//元素節點的 nodeName 與標籤名相同
document.write(document.body.nodeName)
//屬性節點的 nodeName 是屬性的名稱
document.write(document.body.attributes[0].nodeName)
//文本節點的 nodeName 永遠是 #text
document.write(document.getElementById("demo").childNodes[0].nodeName)

3.4.2 nodeValue節點的值

nodeValue 屬性：節點的值

元素節點的 nodeValue 是 undefined 或 null

文本節點的 nodeValue 是文本自身

屬性節點的 nodeValue 是屬性的值

//元素節點的 nodeValue 是 undefined 或 null
document.write(document.head.nodeValue)
//文本節點的 nodeValue 是文本自身
document.write(document.getElementById("demo").childNodes[0].nodeValue)
//屬性節點的 nodeValue 是屬性的值
document.write(document.getElementById("demo").attributes[0].nodeValue)

3.4.3 nodeType節點的類型

nodeType 屬性：節點的類型，是隻讀的。以下常用的幾種結點類型：

元素類型	節點類型
元素	1
屬性	2
文本	3
註釋	8
文檔	9

3.4.4 創建節點對象

創建節點的方法都是由XML DOM中的Document對象來創建的，調用方式爲document.方法。

方法	名稱
createComment()	創建註釋節點
createElement()	創建元素節點
createTextNode()	創建文本節點

3.5 常用屬性和方法

3.5.1 獲取父節點

調用者就是節點。一個節點只有一個父節點，調用方式爲節點.parentNode

//獲得 body 的父元素
var parentNode = document.body.parentNode;

3.5.2 獲取所有的子節點

childNodes：標準屬性。返回的是指定元素的子節點的集合（包括元素節點、所有屬性、文本節點）。調用方法爲子節點數組 = 父節點.childNodes;

注意： 火狐谷歌等高版本會把換行也看做是子節點。（瞭解）

//獲取body所有的子節點的集合
var nodeList = document.body.childNodes;

3.5.3 獲取元素屬性的集合

獲取元素屬性集合調用方法爲節點.attributes

//獲取body元素集合中的長度
var len = document.body.attributes.length;
//獲取body元素集合
var list = document.body.attributes;

3.5.4 節點的獲取遍歷

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>DOM</title>
    <script type="text/javascript">
        function getNodes() {
            var nodes = document.body.childNodes;
            var txt = "";
            for (var i = 0; i < nodes.length; i++) {
                txt = txt + nodes[i].nodeName + ":" + nodes[i].nodeValue;
            }
            var length = nodes.length;
            console.log("節點個數爲：" + length);
            console.log(txt);
        }
    </script>
</head>
<body>
<button onclick="getNodes()">單擊獲取節點集合</button><br />
<p id="demo">注意：空格的換行也算是文本，文本也是一個節點！</p>
</body>
</html>

3.6 全選/反選按鈕案例

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>demo4</title>
    <script>
        /**
         * 全選/全不選
         */
        function selectAll() {
            //通過class="hobby"獲取所有選項(數組)
            var hobby = document.getElementsByClassName("hobby");
            //通過id="all"獲取全選/全不選選項
            var all = document.getElementById("all");
            //遍歷hobby數組
            for (var i = 0; i < hobby.length; i++) {
                //將class="hobby"的所有選項的選中狀態與all關聯
                hobby[i].checked = all.checked;
            }
        }

        /**
         * 全選
         *
         * checked設置返回是否被選中
         * checked = true;  選中
         * checked = false; 未選中
         */
        function fn1() {
            var hobby = document.getElementsByClassName("hobby");
            for (var i = 0; i < hobby.length; i++) {
                //判斷如果全部選項沒有被選中則繼續執行全選操作
                if (!hobby[i].checked) {
                    //將所有選項狀態變爲選中狀態
                    hobby[i].checked = true;
                }
            }
        }

        /**
         * 全不選
         */
        function fn2() {
            var hobby = document.getElementsByClassName("hobby");
            for (var i = 0; i < hobby.length; i++) {
                //判斷如果全部選項被選中則繼續全部選操作
                if (hobby[i].checked) {
                    //將所有選項狀態變爲未選中
                    hobby[i].checked = false;
                }
            }
        }

        /**
         * 反選
         */
        function fn3() {
            var hobby = document.getElementsByClassName("hobby");
            for (var i = 0; i < hobby.length; i++) {
                //獲取選項的選中狀態
                var oldChecked = hobby[i].checked;
                //把獲取選中的選中狀態取反
                var newChecked = !oldChecked;
                hobby[i].checked = newChecked;
            }
        }
    </script>
</head>
<body>
<input type="checkbox" onchange="selectAll()" id="all">全選/全不選<br>
<br>
<input type="checkbox" class="hobby">籃球
<input type="checkbox" class="hobby">足球
<input type="checkbox" class="hobby">乒乓球
<input type="checkbox" class="hobby">羽毛球
<br>
<br>
<button onclick="fn1()">全選</button>
<button onclick="fn2()">全不選</button>
<button onclick="fn3()">反選</button>
</body>
</html>

四、DOM元素操作

4.1 獲取HTML元素

通常，通過 JavaScript，您需要操作 HTML 元素。爲了做到這件事情，您必須首先找到該元素。有三種方法來做這件事：

通過 id 找到 HTML 元素

通過標籤名找到 HTML 元素

通過類名找到HTML 元素

4.1.1 id查找HTML元素

在 DOM 中查找 HTML 元素的最簡單的方法，是通過使用元素的 id。

通過id=“div1”查找元素。如果找到該元素，則該方法將以對象（在 x 中）的形式返回該元素。如果未找到該元素，則 x 將包含 null。

//通過id=“div1”查找元素
var x = document.getElementById("div1");

4.1.2 標籤名查找HTML元素

查找id="main"的元素。通過查找到的id="main"的元素中，查找所有元素的<p>標籤元素

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

4.1.3 類名查找HTML元素

查找class="div"的元素。通過getElementsByClassName 函數來查找 class=“div” 的元素

var x = document.getElementsByClassName("div");

4.1.4 innerText與innerHTML的區別

innerText：獲取標籤的所有文本內容，但凡是文本內容就會獲取到，也會被打印

innerHTML：獲取標籤的文本內容，如果文本內容裏含有頁面標籤字符串，innerHTML會解析頁面標籤字符串，則頁面標籤字符串被解析而不會被獲取到，也不會被打印

//注意：b標籤被innerHTML解析
"<b>我是被innerText獲取</b>"		//結果爲：<b>我是被innerText獲取</b>
"<b>我是被innerHTML獲取</b>"		//結果爲：我是被innerHTML獲取

4.1.5 獲取HTML元素的使用

<body>
<div id="div_id" class="div_class">
    我是div
</div>
<p>我是1號p標籤</p>
<p class="pp">我是2號p標籤</p>
<p>我是3號p標籤</p>
<p class="pp">我是4號p標籤</p>
<p>我是5號p標籤</p>
<p class="pp">我是6號p標籤</p>
<script type="text/javascript">
    //獲取div標籤爲div_id的標籤文本
    var d = document.getElementById("div_id");
    console.log(d.innerText);
    //獲取多個標籤中第一個標籤文本
    var ps = document.getElementsByTagName("p");
    console.log(ps[0].innerText);
    //獲取標籤數量
    console.log(ps.length);
    //獲取第一個p標籤文本
    console.log(ps[0].innerText);
    //獲取多個class爲pp的其中第一個標籤文本
    var pps = document.getElementsByClassName("pp");
    console.log(pps[0].innerText);
</script>
</body>

4.1.6 獲取設置移除屬性案例

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>DOM</title>
    <%--
        需求1:獲取輸入框中的name屬性值
        需求2:設置輸入框中的name屬性值
        需求3:移除輸入框中的name屬性
    --%>
    <script>

        function fn1() {
            //獲取輸入框中的name屬性值
            var ele = document.getElementById("username");
            var value = ele.getAttribute("name");
            console.log(value)
        }

        function fn2() {
            //設置輸入框中的name屬性值
            var ele = document.getElementById("username");
            ele.setAttribute("name","myUsername");

        }

        function fn3() {
            // 移除輸入框中的name屬性
            var ele = document.getElementById("username");
            ele.removeAttribute("name");
        }

        function fn4() {
            var ele = document.getElementById("username");
            //注意：通過getAttribute獲取屬性值，該屬性值必須顯式地設置到標籤上！
            var value = ele.getAttribute("value");
            console.log(value)
        }

    </script>
</head>
<body>
    <input type="text" name="username" id="username" value="zhangsan"/>
    <button onclick="fn1()">獲取</button>
    <button onclick="fn2()">設置</button>
    <button onclick="fn3()">移除</button>
    <button onclick="fn4()">獲取value屬性</button>
</body>
</html>

4.2 修改HTML

HTML DOM 允許 JavaScript 改變 HTML 元素的內容。

4.2.1 改變HTML文本

修改 HTML 文本的最簡單的方法時使用 innerHTML 屬性。

如需改變 HTML 元素的內容，請使用這個語法：

document.getElementById(id).innerHTML=“xxxx”;

document.getElementById(id).innerText=“xxxx”;

<html>
<body>
<p id="p1">Hello World!</p>
<script>
//改變了<p>元素的文本
document.getElementById("p1").innerHTML="xxxx";
</script>
</body>
</html>

4.2.2 改變HTML屬性

如需改變 HTML 元素的屬性，請使用這個語法：

document.getElementById(id).attribute=新屬性值

document.getElementById(“image”).setAttribute(“屬性”,“值”);

<!DOCTYPE html>
<html>
<body>
<img id="image" src="hello.png">
<script>
//改變<img>元素的src屬性
document.getElementById("image").src="world.jpg";
</script>
</body>
</html>

4.3 修改CSS樣式

如需改變 HTML 元素的樣式，請使用這個語法：

document.getElementById(id).style.property=新樣式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
//修改<p>元素的樣式
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通過腳本修改</p>
</body>
</html>

4.4 元素標籤的 CRUD

4.4.1 創建新元素

如需向 HTML DOM 添加新元素，您必須首先創建該元素（元素節點），然後向一個已存在的元素追加該元素。

這段代碼創建新的<p> 元素：var para=document.createElement("p");。如需向 <p> 元素添加文本，您必須首先創建文本節點。這段代碼創建了一個文本節點：var node=document.createTextNode("這是一個新段落。");。然後必須向
元素追加這個文本節點：para.appendChild(node);。最後必須向一個已有的元素追加這個新元素。這段代碼找到一個已有的元素：var element=document.getElementById("div1");。以下代碼在已存在的元素後添加新元素：element.appendChild(para);。

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>

<script>
//創建p元素節點
var para = document.createElement("p");
//創建文本節點
var node = document.createTextNode("這是一個新段落。");
//向p元素中添加文本
para.appendChild(node);

//通過id=”div1“獲取元素
var element = document.getElementById("div1");
//向該元素中添加p元素
element.appendChild(para);
</script>

insertBefore(元素 1,元素 2)

在父元素添加，將元素1插入到元素2的前面，調用語法爲父元素.insertBefore(元素 1,元素 2)

</head>
	<body>
	<div id="div1">
		<p id="p1">這是一個段落。</p>
		<p id="p2">這是另一個段落。</p>
	</div>
	
	<script>
    //需求：在 div1 裏面,插入 para 到p1 的前面
    
    //獲取p元素節點
	var para = document.createElement("p");
	//創建文本節點
	var node = document.createTextNode("這是一個新段落。");
	//向元素中添加文本
	para.appendChild(node);
	//通過id="p1"來獲取元素
	var p1 = document.getElementById("p1");
	//通過id="div1"來獲取元素
	var element = document.getElementById("div1");
	//通過調用insertBefore方法來實現在div1裏面，插入para到p1前面
	element.insertBefore(para,p1);
	</script>
</body>

4.4.2 刪除已有的 HTML 元素

remove()

在頁面內（文檔）刪除已有HTML元素，調用語法爲document.想要刪除的元素.remove();

</head>
	<body>
	<div id="div1">
		<p id="p1">這是一個段落。</p>
		<p id="p2">這是另一個段落。</p>
	</div>
	<button onclick="deletes()">刪除p1</button>
	<script>
	function deletes(){
		document.getElementById("p1").remove();
	}
	</script>
</body>

removeChild()

通過父元素來刪除子元素，調用語法爲父元素.removeChild(子元素)

找到 id=“div1” 的元素：var parent = document.getElementById("div1");。找到 id=“p1” 的 <p> 元素：var child = document.getElementById("p1");。從父元素中刪除子元素：parent.removeChild(child);。如果能夠在不引用父元素的情況下刪除某個元素，就太好了。不過很遺憾。DOM 需要清楚您需要刪除的元素，以及它的父元素。這是常用的解決方案：找到您希望刪除的子元素，然後使用其 parentNode 屬性來找到父元素： var child=document.getElementById("p1"); child.parentNode.removeChild(child);

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
//通過id="div1"獲取元素
var parent = document.getElementById("div1");
//通過id="p1"獲取id="div1"的子元素
var child = document.getElementById("p1");
//刪除子元素
parent.removeChild(child);
</script>

4.4.3 替換元素

replaceChild(元素 1,元素 2);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="" id="h">
	<div id="div1">
		<p id="p1">這是一個段落。</p>
		<p id="p2">這是另一個段落。</p>
	</div>
	<button type="button" id="btn" onclick="deletes()"> 刪除 p1</button>
	<script>
	
	function deletes(){
		var para=document.createElement("p");
		var node=document.createTextNode("這是一個新段落。");
		para.appendChild(node);
		var p1 = document.getElementById("p1");
		var element=document.getElementById("div1");
		element.replaceChild(para,p1);
	}
	</script>
	</body>
</html>

4.5 DOM事件

4.5.1 DOM事件介紹

HTML DOM 允許我們通過觸發事件來執行代碼。

比如以下事件：

元素被點擊。

頁面加載完成。

輸入框被修改。

本例改變了 id=“id1” 的 HTML 元素的樣式，當用戶點擊按鈕時：

注意：點擊後會將原來的標籤顏色變爲紅色！

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">myH1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
button</button>

</body>
</html>

4.5.2 DOM事件改變文本內容

當在 <h1> 元素上點擊時，會改變其內容：

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='改變內容!'">點擊文本!</h1>
</body>
</html>

本例從事件處理器調用一個函數：

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
    id.innerHTML="改變內容!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點擊文本!</h1>
</body>
</html>

HTML DOM 允許您使用 JavaScript 來向 HTML 元素分配事件：

<script>
document.getElementById("myBtn").onclick=function(){
    document.getElementById("myhead2").style.color='blue';
};
</script>

onchange 事件常結合對輸入字段的驗證來使用。

下面是一個如何使用 onchange 的例子。當用戶改變輸入字段的內容時，會調用 upperCase() 函數。

<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件可用於在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

4.6EventListener

4.6.1 addEventListener() 方法

在用戶點擊按鈕時觸發監聽事件：

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法用於向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不會覆蓋已存在的事件句柄。

你可以向一個元素添加多個事件句柄。

你可以向同個元素添加多個同類型的事件句柄，如：兩個 “click” 事件。

你可以向任何 DOM 對象添加事件監聽，不僅僅是 HTML 元素。如： window 對象。

addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）。

當你使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來，可讀性更強，在沒有控制HTML標記時也可以添加事件監聽。

你可以使用 removeEventListener() 方法來移除事件的監聽。

語法：

第一個參數是事件的類型 (如 “click” 或 “mousedown”). 把on去掉

第二個參數是事件觸發後調用的函數。

第三個參數是個布爾值用於描述事件是冒泡還是捕獲。該參數是可選的。

注意：不要使用 “on” 前綴。例如，使用 “click” ,而不是使用 “onclick”。

element.addEventListener(event, function, useCapture);

當用戶點擊元素時彈出 “Hello World!” :

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

addEventListener() 方法允許向同個元素添加多個事件，且不會覆蓋已存在的事件：

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

4.6.2 事件冒泡或事件捕獲

事件傳遞有兩種方式：冒泡與捕獲。

事件傳遞定義了元素事件觸發的順序。如果你將 <p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪個元素的 “click” 事件先被觸發呢？

在冒泡中，內部元素的事件會先被觸發，然後再觸發外部元素，即： <p> 元素的點擊事件先觸發，然後會觸發 <div> 元素的點擊事件。

在捕獲中，外部元素的事件會先被觸發，然後纔會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發，然後再觸發 <p> 元素的點擊事件。

addEventListener() 方法可以指定 “useCapture” 參數來設置傳遞類型：

addEventListener(event, function, useCapture);

默認值爲 false, 即冒泡傳遞，當值爲 true 時, 事件使用捕獲傳遞。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);