JavaScript學習筆記-DOM學習(六)

  • 概念: Document Object Model 文檔對象模型
    • DOM將HTML文檔表達爲樹結構。
    • DOM是W3C(萬維網聯盟)的標準,它定義了訪問HTML和XML文檔的標準。
    • 將標記語言文檔的各個組成部分,封裝爲對象。可以使用這些對象,對標記語言文檔進行(CRUD)增刪改查的動態操作。
      在這裏插入圖片描述
  • W3C DOM標準被分爲3個不同的部分
    • 核心DOM - 針對任何結構化文檔的標準模型。

      • Document:文檔對象
        1.創建(獲取): 在html dom模型中可以使用window對象來獲取.
        * window.document
        * document
        2.方法:
        * 獲取Element對象
        getElementById(): 根據id屬性獲取元素對象。id屬性值一般唯一。
        getElementsByTagName():根據元素名稱獲取元素對象們。返回值是一個數組。
        getElementsClassName(): 根據Class名稱獲取元素對象們。返回值是一個數組。
        getElementsByName(): 根據name名稱獲取元素對象們。返回值是一個數組。
        * 創建其他DOM對象:
        createAttribute(name)
        createComment()
        createElement()
        createTextNode()
      • Element: 元素對象
        1.獲取/創建:通過document來獲取和創建。
        2.方法:
        • 1.removeAttribute(): 刪除屬性
        • 2.setAttribute(): 設置屬性
      • Attribute:屬性對象
      • Text: 文本對象
      • Comment:註釋對象
      • Node :節點對象,其它五個的父對象
      • 特點:所有dom對象都可以被認爲是一個節點。
      • 方法:
        CURD dom樹:
        * appendChild():向子節點列表的結尾添加新的子節點。
        * removeChild(): 刪除(並返回)當前節點的指定子節點。
        * replaceChild():用新節點替換一個子節點。
      • 屬性:
        parentNode: 返回當前節點的父節點。
        超鏈接功能:
        1.可以被點擊:樣式
        2.點擊後跳轉到href指定的url
        需求:保留1功能,去掉2功能
        實現:href=“javascript:void(0);”
    • XML DOM - 針對XML文檔的標準模型。

    • HTML DOM - 針對 HTML 文檔的標準模型。
      1.標籤體的設置和獲取:innerHTML。

      • 通過innerHTML直接操作html內容。

      2.使用html元素對象的屬性。
      3.控制樣式。

      • 使用元素的style屬性來設置(div1.style.border = “1px solid”;)
      • 提前定義好類選擇器的樣式,通過元素的className屬性來設置其class屬性值。
核心DOM動態表格示例:
<!doctype html>
<html>
	<head lang="en">
		<title>動態表格示例</title>
		<meta charset="utf-8">
		<style type="text/css">
			table{
				border: 1px solid;
				margin: auto;
				width: 500px;
			}
			th,td{
				border: 1px solid;
				text-align: center;
			}
			div{
				text-align: center;
				margin: 50px;
			}
			
		</style>
	</head>

	<body>
		<br>
		<br>
		<div align="center">
		<input id='index' type="text" placeholder="請輸入編號"></input>
		&nbsp&nbsp&nbsp
		<input id='name' type="text" placeholder="請輸入姓名"></input>
		&nbsp&nbsp&nbsp
		<input id='sex' type="text" placeholder="請輸入性別"></input>
		<input id='add' type="button" value="添加"></input>
		</div>

		<br>
		<br>
		
		<table>
		<caption>學生信息表</caption>
		<tr><th>編號</th><th>姓名</th><th>性別</th><th>操作</th></tr>
		<tr><td>1</td><td>張三</td><td></td><td><a href="javascript:void(0);" onclick="del_record(this)">刪除</a></td></tr>
		<tr><td>2</td><td>李四</td><td></td><td><a href="javascript:void(0);" onclick="del_record(this)">刪除</a></td></tr>
		<tr><td>3</td><td>王五</td><td></td><td><a href="javascript:void(0);" onclick="del_record(this)">刪除</a></td></tr>
		</table>
		
		
		<script>
			function del_record(obj){				//刪除記錄
				del_tr = obj.parentElement.parentElement;
				del_table = del_tr.parentElement;
				del_table.removeChild(del_tr);
			}

			document.getElementById("add").onclick = function(){		//添加記錄
				var index = document.getElementById("index").value;
				var name = document.getElementById("name").value;
				var sex = document.getElementById("sex").value;

				var td_insert1 = document.createElement("td");

				td_insert1.appendChild(document.createTextNode(index));
				var td_insert2 = document.createElement("td");
				td_insert2.appendChild(document.createTextNode(name));
				var td_insert3 = document.createElement("td");
				td_insert3.appendChild(document.createTextNode(sex));

				var td_insert4 = document.createElement("td");
				var elem_a = document.createElement("a");
				var text = document.createTextNode("刪除");
				elem_a.setAttribute("href","javascript:void(0);");
				elem_a.setAttribute("onclick","del_record(this);");
				elem_a.appendChild(text);
				td_insert4.appendChild(elem_a);

				var tr_insert  = document.createElement("tr");
				tr_insert.appendChild(td_insert1);
				tr_insert.appendChild(td_insert2);
				tr_insert.appendChild(td_insert3);
				tr_insert.appendChild(td_insert4);

				var table = document.getElementsByTagName("table")[0];
				table.appendChild(tr_insert);
			}
		</script>
	</body>
</html>

演示效果:
在這裏插入圖片描述

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