JavaScript HTML DOM對象

一、HTML DOM 對象概述

二、附表：HTML DOM 相關方法

一、HTML DOM 對象概述

1.1 HTML DOM 對象概述

1.1.1 DOM 對象介紹

DOM是指文檔對象模型（Document Object Model），在網頁被加載的時候，由瀏覽器創建的，通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。
通過獲取DOM對象，JavaScript可以改變頁面中的HTML 元素、HTML 屬性、CSS 樣式以及對頁面的觸發事件做出反應等。

1.1.2 DOM 對象獲取方式
（1）通過id獲取

var doms = document.getElementById("id值");

（2）通過標籤名獲取

var doms = document.getElementsByTagName("標籤名");

（3）通過類名獲取

var doms = document.getElementsByClassName("類名");

示例

<body>
	<p id="t">test</p>
	<p>test1</p>
	<p class="c">test2</p>
</body>
<script type="text/javascript">
	/* 通過id獲取 */
	var doms = document.getElementById("t");
	console.log("doms = " + doms);
	
	/* 通過標籤名獲取 */
	var doms1 = document.getElementsByTagName("p");
	console.log("doms1 = " + doms1);
	
	/* 通過類名獲取 */
	var doms2 = document.getElementsByClassName("c");
	console.log("doms2 = " + doms2);
</script>

1.2 HTML DOM 對象使用

1.2.1 通過DOM對象改變HTML內容
當獲取到了DOM對象後，如果想要改變一些相應的頁面內容，可以進一步獲取到DOM對象的內容，進行更改。

一般可以用innerHTML屬性，這個屬性可以獲取到DOM對象的內容，同時也可以直接修改這個內容。

語法如下

/* 獲取內容 */
var x = document.getElementById(id).innerHTML
/* 修改內容 */
document.getElementById(id).innerHTML = "要修改的內容"

示例如下

<body>
	<h3 id="t">test</h3>
	<h4>test1</h4>
	<h5 class="c">test2</h5>
</body>
<script type="text/javascript">
	/* 通過id獲取 */
	var doms = document.getElementById("t").innerHTML;
	document.write("通過id值獲取到的原來的內容爲：" + doms);
	document.getElementById("t").innerHTML = "修改的內容";
	
	/* 通過標籤名獲取 */
	var doms1 = document.getElementsByTagName("h4")[0].innerHTML;
	document.write("<br>通過標籤名獲取到的原來的內容爲：" + doms1);
	document.getElementsByTagName("h4")[0].innerHTML = "修改的內容1";
	
	/* 通過類名獲取 */
	var doms2 = document.getElementsByClassName("c")[0].innerHTML;
	document.write("<br>通過類名獲取到的原來的內容爲：" + doms2);
	document.getElementsByClassName("c")[0].innerHTML = "修改的內容2";
</script>

除了用innerHTML外，還可以用innerText，效果與innerHTML一致。示例如下

<body>
	<h3 id="t">test</h3>
	<h4>test1</h4>
	<h5 class="c">test2</h5>
</body>
<script type="text/javascript">
	/* 通過id獲取 */
	var doms = document.getElementById("t").innerText;
	document.write("通過id值獲取到的原來的內容爲：" + doms);
	document.getElementById("t").innerText = "修改的內容";
	
	/* 通過標籤名獲取 */
	var doms1 = document.getElementsByTagName("h4")[0].innerText;
	document.write("<br>通過標籤名獲取到的原來的內容爲：" + doms1);
	document.getElementsByTagName("h4")[0].innerText = "修改的內容1";
	
	/* 通過類名獲取 */
	var doms2 = document.getElementsByClassName("c")[0].innerText;
	document.write("<br>通過類名獲取到的原來的內容爲：" + doms2);
	document.getElementsByClassName("c")[0].innerText = "修改的內容2";
</script>

innerHTML、outerHTML和innerText、outerText的區別

innerHTML設置或獲取標籤所包含的HTML+文本信息(從標籤起始位置到終止位置全部內容，包括HTML標籤，但不包括自身)
outerHTML設置或獲取標籤自身及其所包含的HTML+文本信息（包括自身）
innerText設置或獲取標籤所包含的文本信息（從標籤起始位置到終止位置的內容，去除HTML標籤，但不包括自身）；
outerText設置或獲取標籤自身及其所包含的文本信息（包括自身）；
innerText和outerText在獲取的時候是相同效果，但在設置時，innerText僅設置標籤所包含的文本，而outerText設置包含包括標籤自身在內的文本。

1.2.2 通過DOM對象改變HTML屬性
獲取HTML屬性和修改HTML屬性。

語法

/* 獲取屬性 */
var x = document.getElementById(id)."屬性名";
/* 修改屬性 */
document.getElementById(id)."屬性名" = "新屬性值";

示例：通過屬性名獲取和改變屬性名，如改變字體的左右對齊方式和按鈕的寬度

<body>
	<h1 id="t" align="left" style="border: 1px red solid;width: 200px;">test</h1>
	<h2 align="left" style="border: 1px red solid;width: 200px;">test1</h2>
	<h3 class="c" align="left" style="border: 1px red solid;width: 200px;">test2</h3>
</body>
<script type="text/javascript">
	/* 通過id獲取 */
	var doms = document.getElementById("t").align;
	document.write("通過id值獲取到的原來的屬性爲：" + doms);
	document.getElementById("t").align = "right";
	
	/* 通過標籤名獲取 */
	 var doms1 = document.getElementsByTagName("h2")[0].align;
	 document.write("<br>通過標籤名獲取到的原來的屬性爲：" + doms1);
	 document.getElementsByTagName("h2")[0].align = "center";
	
	/* 通過類名獲取 */
	var doms2 = document.getElementsByClassName("c")[0].align;
	document.write("<br>通過類名獲取到的原來的屬性爲：" + doms2);
	document.getElementsByClassName("c")[0].align = "right";
</script>

上述示例中，我們將文字的align屬性即文字對齊方式從原始的left做了修改，修改後的顯示結果如下

1.2.3 通過DOM對象改變HTML CSS樣式
獲取和更改HTML的CSS樣式類似於獲取和更改HTML的屬性。

語法

/* 獲取屬性 */
var x = document.getElementById(id).style."css樣式名";
/* 修改屬性 */
document.getElementById(id).style."css樣式名" = "新css樣式";

示例

<body>
	<h1 id="t" align="left" style="border: 1px red solid;width: 200px;">test</h1>
	<h2 align="left" style="border: 1px red solid;width: 200px;">test1</h2>
	<h3 class="c" align="left" style="border: 1px red solid;width: 200px;">test2</h3>
</body>
<script type="text/javascript">
	/* 通過id獲取 */
	var doms = document.getElementById("t").style.width;
	document.write("通過id值獲取到的原來的屬性爲：" + doms);
	document.getElementById("t").style.width = "500px";
	
	/* 通過標籤名獲取 */
	 var doms1 = document.getElementsByTagName("h2")[0].style.width;
	 document.write("<br>通過標籤名獲取到的原來的屬性爲：" + doms1);
	 document.getElementsByTagName("h2")[0].style.width = "50px";
	
	/* 通過類名獲取 */
	var doms2 = document.getElementsByClassName("c")[0].style.width;
	document.write("<br>通過類名獲取到的原來的屬性爲：" + doms2);
	document.getElementsByClassName("c")[0].style.width = "300px";
</script>

1.2.4 通過DOM對象改變HTML 元素
（1） appendChild() ：創建新的元素，創建到原有的末尾
語法

//創建元素結點
var ele = document.createElement("要創建的標籤類型");
//添加文字
var txt = document.createTextNode("要給新建的標籤添加的內容");
//掛載文字到元素節點
ele .appendChild(txt);

新增標籤示例

<body>
	<div id="div1" align="center" style="border: 1px blue solid;width: 250px;">
		<h1 id="t" align="left" style="border: 1px red solid;width: 200px;">test</h1>
		<h2 align="left" style="border: 1px red solid;width: 200px;">test1</h2>
		<h3 class="c" align="left" style="border: 1px red solid;width: 200px;">test2</h3>
	</div>
</body>
<script type="text/javascript">
	var ele = document.createElement("h4");
	var txt = document.createTextNode("新增的h4");
	ele.appendChild(txt);
	 
	var element = document.getElementById("div1");
	element.appendChild(ele);
</script>

創建的結果

（2） insertBefore() ：創建新的元素，創建到原有的開頭
語法：

//創建元素結點
var ele = document.createElement("要創建的標籤類型");
//添加文字
var txt = document.createTextNode("要給新建的標籤添加的內容");
//掛載文字到元素節點
ele .insertBefore(txt);

新增標籤示例

<body>
	<div id="div1" align="center" style="border: 1px blue solid;width: 250px;">
		<h1 id="t" align="left" style="border: 1px red solid;width: 200px;">test</h1>
		<h2 align="left" style="border: 1px red solid;width: 200px;">test1</h2>
		<h3 class="c" align="left" style="border: 1px red solid;width: 200px;">test2</h3>
	</div>
</body>
<script type="text/javascript">
	var ele = document.createElement("h4");
	var txt = document.createTextNode("新增的h4");
	ele.appendChild(txt);
	 
	var element = document.getElementById("div1");
	var first = document.getElementById("t");
	element.insertBefore(ele, first);
</script>

（3）removeChild()：移除已有的元素
語法

//獲取要移除的元素的父級元素
var parent = document.getElementById("父級元素id");
//獲取要移除的元素
var child = document.getElementById("要移除的元素id");
//從父級刪除子級
parent.removeChild(child);

示例

<body>
	<div id="div1" align="center" style="border: 1px blue solid;width: 250px;">
		<h1 id="t" align="left" style="border: 1px red solid;width: 200px;">test</h1>
		<h2 align="left" style="border: 1px red solid;width: 200px;">test1</h2>
		<h3 class="c" align="left" style="border: 1px red solid;width: 200px;">test2</h3>
	</div>
</body>
<script type="text/javascript">
	var parent = document.getElementById("div1");
	var child = document.getElementById("t");
	parent.removeChild(child);
</script>

（4）replaceChild()：替換元素
語法

//創建一個新的元素
var ele = document.createElement("要創建的標籤類型");
var txt = document.createTextNode("要給新建的標籤添加的內容");
ele .appendChild(txt);
//獲取要移除的元素的父級元素和子級元素
var parent = document.getElementById("父級元素id");
var child = document.getElementById("要移除的元素id");
//從父級替換子級
parent.replaceChild(child);

示例

<body>
	<div id="div1" align="center" style="border: 1px blue solid;width: 250px;">
		<h1 id="t" align="left" style="border: 1px red solid;width: 200px;">test</h1>
		<h2 align="left" style="border: 1px red solid;width: 200px;">test1</h2>
		<h3 class="c" align="left" style="border: 1px red solid;width: 200px;">test2</h3>
	</div>
</body>
<script type="text/javascript">
	var ele = document.createElement("h4");
	var txt = document.createTextNode("替換的元素");
	ele .appendChild(txt);
	var parent = document.getElementById("div1");
	var child = document.getElementById("t");
	parent.replaceChild(ele, child);
</script>

二、附表：HTML DOM 相關方法

方法	描述
document.activeElement	返回當前獲取焦點元素
document.addEventListener()	向文檔添加句柄
document.body	返回文檔的body元素
document.createAttribute()	創建一個屬性節點
document.createElement()	創建元素節點。
document.createTextNode()	創建文本節點。
document.documentElement	返回文檔的根節點
document. getElementsByClassName()	返回文檔中所有指定類名的元素集合，作爲 NodeList 對象。
document.getElementById()	返回對擁有指定 id 的第一個對象的引用。
document.getElementsByName()	返回帶有指定名稱的對象集合。
document.getElementsByTagName()	返回帶有指定標籤名的對象集合。
document.lastModified	返回文檔被最後修改的日期和時間。
document.removeEventListener()	移除文檔中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()	重命名元素或者屬性節點。
document.title	返回當前文檔的標題。
document.URL	返回文檔完整的URL
document.write()	向文檔寫 HTML 表達式或 JavaScript 代碼。
document.writeln()	等同於 write() 方法，不同的是在每個表達式之後寫一個換行符。
element.appendChild()	爲元素添加一個新的子元素
element.attributes	返回一個元素的屬性數組
element.childNodes	返回元素的一個子節點的數組
element.className	設置或返回元素的class屬性
element.clientHeight	在頁面上返回內容的可視高度（不包括邊框，邊距或滾動條）
element.clientWidth	在頁面上返回內容的可視寬度（不包括邊框，邊距或滾動條）
element.firstChild	返回元素的第一個子節點
element.getAttribute()	返回指定元素的屬性值
element.getAttributeNode()	返回指定屬性節點
element.hasAttribute()	如果元素中存在指定的屬性返回 true，否則返回false。
element.hasAttributes()	如果元素有任何屬性返回true，否則返回false。
element.hasChildNodes()	返回一個元素是否具有任何子元素
element.id	設置或者返回元素的 id。
element.innerHTML	設置或者返回元素的內容。
element.insertBefore()	現有的子元素之前插入一個新的子元素
element.isContentEditable	如果元素內容可編輯返回 true，否則返回false
element.lastChild	返回的最後一個子元素
element.nodeValue	返回元素的類型
element.ownerDocument	返回元素的根元素（文檔對象）
element.parentNode	返回元素的父節點
element.querySelector()	返回匹配指定 CSS 選擇器元素的第一個子元素
document.querySelectorAll()	返回匹配指定 CSS 選擇器元素的所有子元素節點列表
element.removeAttribute()	從元素中刪除指定的屬性
element.removeAttributeNode()	刪除指定屬性節點並返回移除後的節點。
element.removeChild()	刪除一個子元素
element.replaceChild()	替換一個子元素
element.setAttribute()	設置或者改變指定屬性並指定值。
element.setAttributeNode()	設置或者改變指定屬性節點。
element.setIdAttribute()	設置指定元素的屬性值
element.setIdAttributeNode()	設置指定屬性節點
element.style	設置或返回元素的樣式屬性
element.tagName	作爲一個字符串返回某個元素的標記名（大寫）
element.textContent	設置或返回一個節點和它的文本內容
element.title	設置或返回元素的title屬性
element.toString()	一個元素轉換成字符串

JavaScript（三）—— JavaScript HTML DOM對象

JavaScript HTML DOM對象

一、HTML DOM 對象概述

1.1 HTML DOM 對象概述

1.2 HTML DOM 對象使用

二、附表：HTML DOM 相關方法

Redis 數據庫（三）—— Linux 系統安裝和操作 Redis 數據庫

JavaScript（四）—— JavaScript 函數與事件

Redis 數據庫（四）—— Redis 持久化

JavaScript（三）—— JavaScript HTML DOM對象

JAVA 設計模式（四）—— 設計模式之原型模式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結