第七章：DOM模型一

DOM（Document Object Model）：文檔對象模型

對文檔的結構化的表述

定義了在程式中對該結構進行通路的方式

DOM 分類

核心 DOM：用于任何結構化文檔的标準模型

定義了與系統平台和程式設計語言無關的接口，DOM 是一種 API

HTML DOM：用于 HTML 文檔的标準模型

XML DOM：用于 XML 文檔的标準模型

DOM 作用

通路文檔内容，包括元素、屬性、文本

增加文檔内容，包括元素、屬性、文本

删除文檔内容，包括元素、屬性、文本

修改文檔内容，包括元素、屬性、文本

DOM 的應用十分廣泛，各種網頁特效均有 DOM 的蹤影

DOM 樹

DOM 将 HTML 文檔抽象為樹形結構，稱這棵樹為 DOM 樹

HTML 中的每一項内容都可以在 DOM 樹中找到

對文檔内容的操作即對 DOM 樹的操作

HTML 文檔中的所有内容都是節點：

是根節點，其他标簽都是元素，屬性是屬性。 ① 整個文檔是一個文檔節點； ② 每個 HTML 元素是元素節點； ③ HTML 元素内的文本是文本節點 ,回車也是文本節點； ④ 每個 HTML 屬性是屬性節點； ⑤ 注釋是注釋節點；

DOM 節點是一個對象，擁有屬性和方法

元素節點

HTML 開始标簽中的屬性為元素節點對象的屬性

HTML 開始标簽中的事件屬性為元素節點對象的方法

元素節點對象中的方法函數中的 this 指向目前觸發事件的元素

屬性節點

文本節點

空格、換行空格屬于文本節點

<body>
	<div id="contianer">
	</div>
</body>
<!-- lastchild-->
	<script>
		//得到一個元素的節點
		var contianer=document.getElementById("contianer")
		//事件也可以看成一個特殊的屬性
		//在對象的方法内部，this指向目前對象
		//DOM對象的回調函數内部，this指向目前對象
		contianer.onclick=function(){
			console.log(this.id);
		}
		console.log(contianer);

	</script>

第七章：DOM模型一

元素樹

在節點樹中，頂端節點被稱為根（root）

父節點：每個節點都有父節點、除非該元素是文檔的根節點

子節點：每個元素節點可以有 0 個、1 個或多個子節點

同胞節點：指擁有相同父節點的節點

JavaScript 解釋器會為載入的每個 HTML文檔建立一個對應的document 對象

通過使用 document對象，可以從腳本中對 HTML 頁面中的所有節點進行通路

擷取節點的方式：

直接擷取：

通過ID屬性擷取節點

通過标簽名獲得所有的同名節點

通過類名擷取所有相同類名的标簽

通過節點關系擷取

通過父節點擷取子節點

通過子節點獲得父節點

獲得前後兄弟節點

//第一個單詞首字母小寫，其餘單詞首字母大寫（小駝峰命名法）

通過 id 屬性獲得節點（ID選擇器）

document.getElementById( )

通過标簽名獲得所有同名标簽（标簽選擇器）

document.getElementsByTagName( )

傳回值是數組，用時注意帶上角标

通過類名獲得所有類名相同的标簽（類選擇器）

document.getElementsByClassName( )

var arr=["welcome","to the","westworld"]; 
		var pList=document.getElementsByTagName("p");
		for(var num=0;num<pList.length;++num)
		{
			//雙标記标簽可以使用這個屬性
			pList[num].innerHTML=arr[num];
		}

document.documentElement 傳回 HTML 文檔中元素

document.head 傳回 HTML 文檔中元素

document.body 傳回 HTML 文檔中元素

<body>
    <div id="container">
        <p id="p1">這是一個段落</p>
    </div>
</body>
<script>
    p1.onclick = function() {
        container.replaceChild(hNode, p1);
    }
</script>

childNodes 屬性——傳回節點的子節點集合。之後可以通過循環或者索引找到需要的元素節點。

例：document.getElementById(“myList”).childNodes;

document.getElementById(“myList”).childNodes[0];
children 屬性——傳回節點的所有元素子節點集合。

例：document.getElementById(“myList”).children;

document.getElementById(“myList”).children[0];

DOM對象。chilnodes表示子節點的集合（子節點對象），包括空格，注釋，實際網頁元素

children，擷取具體的元素子節點對象的集合，不包含空格與注釋

firstChild 屬性——傳回指定節點的首個子節點。可遞歸使用，即支援 parentObj.firstChild.firstChild… 的形式，如此可獲得更深層次的節點。

例：document.getElementById(“myList”).firstChild;
firstElementChild 屬性——傳回指定節點的首個元素子節點。

例：document.getElementById(“myList”).firstElementChild;
lastChild 屬性——傳回指定節點的最後一個子節點。可遞歸使用，即支援 parentObj.lastChild.lastChild… 的形式，如此可獲得更深層次的節點。

例：document.getElementById(“myList”).lastChild;
lastElementChild 屬性——傳回指定節點的最後一個元素子節點

例：document.getElementById(“myList”).lastElementChild;

parentNode 屬性——傳回指定節點的父節點

parentElement 屬性——傳回指定節點的父節點

html代碼:
<h1>新聞動态<span id="time">2018-10-7</span></h1>
js代碼：
var parent= document.getElementById("time").parentNode;
console.log(parent.innerHTML);
輸出結果：
新聞動态<span id="time">2018-10-7</span>

previous(Element)Sibling 屬性——傳回指定節點緊跟的前一個(元素)兄弟節點。

例：document.getElementById(“item1”).previousSibling;
next(Element)Sibling 屬性——傳回指定節點之後緊跟的一個(元素)兄弟節點

例：document.getElementById(“item2”).nextSibling
innerHTML 屬性

innerHTML 是 DOM 中元素節點的屬性，相當于一個容器

用于擷取或改變任意元素節點的内容，該屬性可讀可寫

操作簡單，幾乎所有浏覽器均支援 innerText 屬性

<body>
	<ul id="list">
		<li class="bg">香蕉</li>
		<li class="bg">蘋果</li>
		<li class="bg">橘子</li>
	</ul>
</body>
	<script>
		var list=document.getElementById("list");
		list.innerHTML="<h1>這是标題</h1>"//會解析内容
		list.innerText="<h1>這是标題</h1>";//不解析内容
		//這是标題
		//<h1>這是标題</h1>
		console.log(list.innerText);//過濾标記，純文字
	</script>

textContent 屬性//有缺陷，不使用
讀取元素節點内容

var txt = document.getElementById(“intro”).innerHTML;

document.write(txt);
修改元素節點内容

document.getElementById(“intro”).innerHTML = “hello”;
擷取某一進制素節點的屬性

node.getAttribute( attrName )
設定某一進制素節點的屬性

node.setAttribute( attrName，value )

當屬性存在時，為修改相應屬性值

當屬性不存在時，為添加相應屬性
删除某一進制素節點的屬性

node.removeAttribute( attrName )
判斷某一進制素節點是否含有某屬性

node.hasAttribute( attrName )

傳回值為布爾值 true/false

設定節點屬性 當屬性不存在時，添加相應屬性
    three.setAttribute("class", "red");

    當屬性存在時，為修改相應屬性值
   three.setAttribute("class", "green");

var btn2=document.getElementById("btn2");
		btn2.onclick=function(){
			this.parentNode.firstElementChild.removeAttribute("class");//移除class屬性
		}
		btn2.onclick=function(){
			var isExist=this.parentNode.firstElementChild.hasAttribute("class");//判斷是否有class
			console.log(isExist);//傳回判斷結果
			if(isExist==true)
			{
				this.parentNode.firstElementChild.removeAttribute("class");//移除class屬性
			}
		}

DOM 操作注意事項：

擷取 DOM 節點的操作要在被浏覽器加載之後進行
 <script>标簽放在 HTML 内容後面，即<body>結束标簽前面
 通用性強，幾乎所有浏覽器均支援
 操作比較複雜，書寫代碼量過大
 DOM 節點、DOM 樹與元素樹
 通路 DOM 元素節點的方式
 直接通路
 間接通路
 特殊節點通路
 元素節點的屬性操作
 增、删、改、查、判斷方法
 元素節點的文本内容操作 —— innerHTML

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>綜合練習</title>
    <style>
    body {
        padding: 50px;
    }

    td {
        width: 100px;
    }
    </style>
</head>

<body>
    <table id="tab" border="1" cellspacing="0">
        <tr>
            <td>
                <button>删除本行0</button>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>删除本行1</button>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>删除本行2</button>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>删除本行3</button>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>删除本行4</button>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>删除本行5</button>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>删除本行6</button>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>删除本行7</button>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <script>
    //效果：點選按鈕，删除按鈕所在行
    var button = document.getElementsByTagName("button"); //類似數組
    var tab = document.getElementById('tab')
    for (var i = 0; i < button.length; i++) { //周遊類似數組
        button[i].onclick = function() {
            // this.parentNode.parentNode.innerHTML = "";
            tab.children[0].removeChild(this.parentNode.parentNode)
        }

    }
    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    body {
        padding: 50px;
    }

    #div {
        display: inline-flex;
        flex-wrap: wrap;
    }

    .circle {
        width: 100px;
        height: 100px;
        margin: 15px;
        border-radius: 50%;
    }
    </style>
</head>

<body>
    <div id="div">
        <div class="circle" style="background:rgba(100,100,200,0.4)"></div>
    </div>
    <script>
    //效果：點選桌面圓，然後添加一個随機顔色的圓

    //第一步：随機顔色函數
    function color() {
        var r = parseInt(Math.random() * 255);
        var g = parseInt(Math.random() * 255);
        var b = parseInt(Math.random() * 255);
        var a = Math.random() * 0.7 + 0.3;
        //a = a.toFixed(2)  //保留兩位小數
        var rgba = "rgba(" + r + "," + g + "," + b + "," + a + ")";

        return rgba;
    }

    //第二步：添加随機顔色圓函數
    function circle(that) {
        that.innerHTML += '<div class="circle" style="background:' + color() + '"></div>';//字元串拼接
    }

    //第三步：為div綁定函數功能
    var div = document.getElementById("div");
    div.setAttribute("onclick", "circle(this)");
    
    </script>
</body>

</html>

<body>
    <p>我喜歡的水果:</p>
    <ul id="fruit">
        <li>百香果</li>
        <li>山竹</li>
        <li class="three">火龍果</li>
        <li>猕猴桃</li>
    </ul>
    <p>我喜歡的動物:</p>
    <ul id="animal">
        <li>小猴子</li>
        <li>獅子</li>
        <li class="three">小豬</li>
        <li>大熊貓</li>
    </ul>
    <script>
    //類似數組對象 具有長度屬性，可以周遊，但不是真正的數組，不具有數組的方法
    // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays


    //類似數組對象周遊
    var p = document.getElementsByTagName("p");//傳回類似數組對象
    for (var i = 0; i < p.length; i++) {
        document.write(p[i].innerHTML)
        document.write("<br/>");
    }
    </script>

第七章：DOM模型一

元素節點

元素樹

擷取節點的方式：

DOM 操作注意事項：

繼續閱讀

第一、二章：HTML基礎第一章：javascript第二章：JavaScript基礎文法