【零基礎上手JavaWeb】快速上手 JavaScript DOM操作

跨考菌發表於2020-12-05

寫在前面，大家好！我是【跨考菌】，一枚跨界的程式猿，專注於後臺技術的輸出，目標成為全棧攻城獅！這部落格是對我跨界過程的總結和思考。如果你也對Java、後端技術感興趣，抑或是正在糾結於跨界，都可以關注我的動態，讓我們一起學習，一起進步~
我的部落格地址為：【跨考菌】的部落格

1、案例：在末尾新增節點

1.1 步驟

第一步：獲取到ul標籤
第二步：建立li標籤

document.createElement("標籤名稱")方法

第三步：建立文字

document.createTextNode("文字內容");

第四步：把文字新增到li下面
使用 appendChild方法
第五步：把裡新增到ul末尾
使用 appendChild方法

1.2 案例

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div{
		width:200px;
		height:200px;
		border:2px solid red;
	}
  </style>
 </head>
 <body>
 <div>
	<ul id="ulid">
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>
</div>
<div id="div1">

</div>
	<br/>
	<input type="button" value="add" οnclick="add1();"/>
	<script type="text/javascript">
		function add2() {
			var div1 = document.getElementById("div1");
			var ul1 = document.getElementById("ulid");
			div1.appendChild(ul1);
		}

		//在末尾新增節點
		function add1() {
			//獲取到ul標籤
			var ul1 = document.getElementById("ulid");
			//建立標籤
			var li1 = document.createElement("li");
			//建立文字
			var tex1 = document.createTextNode("5555");
			//把文字加入到li下面
			li1.appendChild(tex1);
			//把li加入到ul下面
			ul1.appendChild(li1);
		}
		
	</script>

 </body>
</html>

2、元素物件

要操作element物件，首先必須要獲取到element，
使用document裡面相應的方法獲取

2.1 方法

1）獲取屬性裡面的值

getAttribute(“屬性名稱”)

var input1 = document.getElementById("inputid");
//alert(input1.value);
alert(input1.getAttribute("value"));

2）設定屬性的值

input1.setAttribute("class","haha");

3）刪除屬性

input1.removeAttribute("name");

2.3 案例

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<input type="text" name="name1" id="inputid" value="aaaa"/>

	<script type="text/javascript">
		//先要獲取input標籤
		var input1 = document.getElementById("inputid");
		//alert(input1.value);
		//alert(input1.getAttribute("value"));
		//alert(input1.class);
		//alert(input1.getAttribute("class"));

		///alert(input1.getAttribute("class"));

		input1.setAttribute("class","haha");

		///alert(input1.getAttribute("class"));

		alert(input1.getAttribute("value"));
		input1.removeAttribute("value");
		alert(input1.getAttribute("value"));
		
	</script>

 </body>
</html>

2.3 想要獲取標籤下面的子標籤

使用屬性 childNodes，但是這個屬性相容性很差

獲得標籤下面子標籤的唯一有效辦法，使用getElementsByTagName方法

var ul11 = document.getElementById("ulid1");
//獲取ul下面的子標籤
//var lis = ul11.childNodes;
//alert(lis.length);
var lis = ul11.getElementsByTagName("li");
alert(lis.length);

3、Node物件

3.1 Node物件屬性

nodeName
nodeType
nodeValue

使用dom解析html時候，需要html裡面的標籤，屬性和文字都封裝成物件

標籤節點對應的值
nodeType： 1
nodeName：大寫標籤名稱比如SPAN
nodeValue: null

屬性節點對應的值
nodeType： 2
nodeName：屬性名稱
nodeValue: 屬性的值

文字節點對應的值
nodeType： 3
nodeName： #text
nodeValue: 文字內容

案例：

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<span id="spanid">哈哈呵呵</span>

	<script type="text/javascript">
		//獲取標籤物件
		var span1 = document.getElementById("spanid");
		//alert(span1.nodeType);   //  1
		///alert(span1.nodeName);   // SPAN
		///alert(span1.nodeValue);  // null

		//屬性
		var id1 = span1.getAttributeNode("id");
		//alert(id1.nodeType);  // 2
		//alert(id1.nodeName);  // id
		//alert(id1.nodeValue); // spanid

		//獲取文字
		var text1 = span1.firstChild;
		alert(text1.nodeType);  //  3
		alert(text1.nodeName);  // #text
		alert(text1.nodeValue); // 內容

	</script>

 </body>
</html>

3.2 節點關係

	<ul>
		<li>qqqqq</li>
		<li>wwww</li>
	</ul>

父節點

ul是li的父節點
parentNode

 //得到li1
var li1 = document.getElementById("li1");
//得到ul
var ul1 = li1.parentNode;
alert(ul1.id);

子節點

li是ul的子節點
childNodes：得到所有子節點，但是相容性很差
firstChild：獲取第一個子節點

//獲取ul的第一個子節點 id=li1
//得到ul
var ul1 = document.getElementById("ulid");
//第一個子節點
var li1 = ul1.firstChild;
alert(li1.id);
- lastChild：獲取最後一個子節點
//得到最後一個子節點
var li4 = ul1.lastChild;
alert(li4.id);

同輩節點

li直接關係是同輩節點
nextSibling: 返回一個給定節點的下一個兄弟節點。
previousSibling：返回一個給定節點的上一個兄弟節點。

//獲取li的id是li3的上一個和下一個兄弟節點
		var li3 = document.getElementById("li3");
		//alert(li3.nextSibling.id);
		alert(li3.previousSibling.id);

案例：

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>

	<ul id="ulid">
		<li id="li1">qqqqq</li>
		<li id="li2">wwww</li>
		<li id="li3">yyyyyy</li>
		<li id="li4">test1111</li>
	</ul>

	<script type="text/javascript">
		
		//得到li1
		var li1 = document.getElementById("li1");
		//得到ul
		var ul1 = li1.parentNode;
		alert(ul1.id); // ulid

		//獲取ul的第一個子節點 id=li1
		//得到ul
		var ul1 = document.getElementById("ulid");
		//第一個子節點
		var li1 = ul1.firstChild;
		alert(li1.id);

		//得到最後一個子節點
		var li4 = ul1.lastChild;
		alert(li4.id);

		//獲取li的id是li3的上一個和下一個兄弟節點
		var li3 = document.getElementById("li3");
		alert(li3.nextSibling.id);
		alert(li3.previousSibling.id);
		
	</script>

 </body>
</html>

4、操作DOM樹

1）appendChild方法

新增子節點到末尾
特點：類似於剪下黏貼的效果

var div2 = document.getElementById("div2");
//獲取ul
var ul11 = document.getElementById("ulid11");
//把ul新增到div2裡面
div2.appendChild(ul11);

2）insertBefore(newNode,oldNode)方法

在某個節點之前插入一個新的節點

兩個引數

要插入的節點
在誰之前插入

插入一個節點，節點不存在，建立
1、建立標籤
2、建立文字
3、把文字新增到標籤下面

程式碼

/*
	1、獲取到li13標籤
	2、建立li
	3、建立文字
	4、把文字新增到li下面
	5、獲取到ul
	6、把li新增到ul下面（在<li>貂蟬</li>之前新增 <li>董小宛</li>）		
*/
//獲取li3 標籤
var li13 = document.getElementById("li13");
//建立li
var li15 = document.createElement("li");
//建立文字
var text15 = document.createTextNode("董小宛");
//把文字新增到li下面 appendChild
li15.appendChild(text15);
//獲取到ul
var ul21 = document.getElementById("ulid21");
//在<li>貂蟬</li>之前新增 <li>董小宛</li> 
//insertBefore(newNode,oldNode)
ul21.insertBefore(li15,li13);

3）removeChild方法：刪除節點

通過父節點刪除，不能自己刪除自己

/*
	1、獲取到li24標籤
	2、獲取父節點ul標籤
	3、執行刪除（通過父節點刪除）
*/
//獲取li標籤
var li24 = document.getElementById("li24");
//獲取父節點
//兩種方式  1、通過id獲取 ； 2、通過屬性 parentNode獲取
var ul31 = document.getElementById("ulid31");
//刪除（通過父節點）
ul31.removeChild(li24);

4）replaceChild(newNode,oldNode)方法: 替換節點

不能自己替換自己，通過父節點替換
兩個引數

第一個引數：新的節點（替換成的節點）
第二個引數：舊的節點（被替換的節點）

程式碼

/*
		1、獲取到li34
		2、建立標籤li
		3、建立文字
		4、把文字新增到li下面
		5、獲取ul標籤（父節點）
		6、執行替換操作 （replaceChild(newNode,oldNode)）
	*/
	//獲取li34
	var li34 = document.getElementById("li34");
	//建立li
	var li35 = document.createElement("li");
	//建立文字
	var text35 = document.createTextNode("張無忌");
	//把文字新增到li下面
	li35.appendChild(text35);
	//獲取ul
	var ul41 = document.getElementById("ulid41");
	//替換節點
	ul41.replaceChild(li35,li34);

5）cloneNode(boolean): 複製節點

 //把ul列表複製到另外一個div裡面
		/*
			1、獲取到ul
			2、執行復制方法 cloneNode方法複製 true
			3、把複製之後的內容放到div裡面去
				** 獲取到div
				** appendChild方法
		*/
		//獲取ul
		var ul41 = document.getElementById("ulid41");
		//複製ul，放到類似剪下板裡面
		var ulcopy = ul41.cloneNode(true)
		//獲取到div
		var divv = document.getElementById("divv");
		//把副本放到div裡面去
		divv.appendChild(ulcopy);

6）操作dom總結

獲取節點使用方法

getElementById()：通過節點的id屬性，查詢對應節點。
getElementsByName()：通過節點的name屬性，查詢對應節點。
getElementsByTagName()：通過節點名稱，查詢對應節點

插入節點的方法

insertBefore方法：在某個節點之前插入
appendChild方法：在末尾新增，剪下黏貼

刪除節點方法

removeChild方法：通過父節點刪除

替換節點方法

replaceChild方法：通過父節點替換

5、innerHTML屬性

這個屬性不是dom的組成部分，但是大多數瀏覽器都支援的屬性

第一個作用：獲取文字內容

//獲取span標籤
var span1 = document.getElementById("sid");
alert(span1.innerHTML);

第二個作用：向標籤裡面設定內容（可以是html程式碼）

//向div裡面設定內容 <h1>AAAAA</h1>
//獲取到div
var div11 = document.getElementById("div11");
//設定內容
div11.innerHTML = "<h1>AAAAA</h1>";

練習：向div裡面新增一個表格

//向div裡面新增一個表格
//var tab = "<table border='1'><tr><td>aaaaaa</td></tr><tr><td>bbbbbb</td></tr><tr><td>cccccc</td></tr></table>";

var tab = "<table>";
tab += "</table>";

//相當於 var tab = "<table></table>";
div11.innerHTML = tab;

6、案例：動態顯示時間

得到當前的時間

var date = new Date();  //得到不是常規的格式
var d1 = date.toLocaleString(); //格式化

需要讓頁面每一秒獲取時間

setInterval方法 定時器

顯示到頁面上
每一秒向div裡面寫一次時間
使用innerHTML屬性
程式碼

function getD1() {
	//當前時間
	var date = new Date();
	//格式化
	var d1 = date.toLocaleString();
	//獲取div
	var div1 = document.getElementById("times");
	div1.innerHTML = d1;
}

//使用定時器實現每一秒寫一次時間
setInterval("getD1();",1000);

7、案例：全選練習

效果圖：
在這裡插入圖片描述
實現：

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<input type="checkbox" id="boxid" οnclick="selAllNo();"/>全選/全不選
	<br/>
	<input type="checkbox" name="love"/>籃球
	<input type="checkbox" name="love"/>排球
	<input type="checkbox" name="love"/>羽毛球
	<input type="checkbox" name="love"/>乒乓球
	<br/>
	<input type="button" value="全選" οnclick="selAll();"/>
	<input type="button" value="全不選" οnclick="selNo();"/>
	<input type="button" value="反選" οnclick="selOther();"/>
	<script type="text/javascript">
		//實現全選和全不選
		function selAllNo() {
			/*
				1、得到上面那個核取方塊
					- 通過id獲取到
				2、判斷這個核取方塊是否是選中
					- if條件，checked==true
				3、如果是選中，下面是全選
				4、如果不是選中，下面是全不選
			*/
			//得到上面核取方塊
			var box1 = document.getElementById("boxid");
			//判斷這個核取方塊是否是選擇
			if(box1.checked == true) { //是選擇狀態
				//呼叫全選方法
				selAll();
			} else { //不是選中狀態
				//呼叫全不選方法
				selNo();
			}
		}

		//實現反選的操作
		function selOther() {
			/*
				1、獲取到要操作的核取方塊
				2、返回陣列，遍歷陣列
				3、得到每一個核取方塊

				4、判斷當前的核取方塊是選中還是不選中
					- if(love1.checked == true) {}
				5、如果選中，屬性checked設定成false，否則，設定成true
			*/
			//獲取要操作的核取方塊
			var loves11 = document.getElementsByName("love");
			//遍歷陣列
			for(var a=0;a<loves11.length;a++) {
				//得到每一個核取方塊
				var love11 = loves11[a];
				//判斷當前這個核取方塊是什麼狀態
				if(love11.checked == true) { //是選中的狀態
					//設定checked=false
					love11.checked = false;
				} else { //是不選中的狀態
					//把checked=true
					love11.checked = true;
				}
			}
		}

		//實現全不選的操作
		function selNo() {
		
			/*
				1、獲取到要操作的核取方塊
				2、返回的是陣列，遍歷陣列
				3、得到每一個核取方塊
				4、設定核取方塊的屬性 checked=false
			*/
			//得到要操作的核取方塊
			var loves1 = document.getElementsByName("love");
			//遍歷陣列
			for(var j=0;j<loves1.length;j++) {
				//得到每一個核取方塊
				var love1 = loves1[j];
				//設定屬性的值checked = false;
				love1.checked = false;
			}
		}

		//實現全選的操作
		function selAll() {
			/*
				1、獲取要操作的核取方塊 
					- 使用getElementsByName()
				2、返回是陣列，
					- 屬性 checked判斷核取方塊是否選中
						*** checked = true; //表示選中
						*** checked = false;//表示不選中
					- 遍歷陣列，得到的是每一個checkbox
						* 把每一個checkbox屬性checked=true					
			*/
			//獲取要操作的核取方塊
			var loves = document.getElementsByName("love");
			//遍歷陣列，得到每一個核取方塊
			for(var i=0;i<loves.length;i++) {
				var love1 = loves[i]; //得到每一個核取方塊
				//設定屬性是true
				love1.checked = true;
			}
		}
		
	</script>

 </body>
</html>

8、案例：下拉選單左右選擇

效果圖：
在這裡插入圖片描述
實現：

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	
<div id="s1" style="float:left;">
		<div>
	<select id="select1" multiple="multiple" style="width:100px;height:100px;">
		<option>AAAAAAAA</option>
		<option>BBBBBBBB</option>
		<option>CCCCCCCC</option>
		<option>DDDDDDDD</option>
		<option>EEEEEEEE</option>
	</select>
	</div>


	<div>
	<input type="button" value="選中新增到右邊" οnclick="selToRight();"/><br/>
	<input type="button" value="全部新增到右邊" οnclick="allToRight();"/>
	</div>
</div>

<div id="s2">
		<div>
	<select id="select2" multiple="multiple" style="width:100px;height:100px;">
		<option>QQQQQQQQ</option>
	</select>
	</div>

	<div>
	<input type="button" value="選中新增到左邊" οnclick="selToLeft();"/><br/>
	<input type="button" value="全部新增到左邊" οnclick="allToLeft();"/>
	</div>
</div>

	<script type="text/javascript">

		//實現全部新增到左邊
		function allToLeft() {
			/*
				1、獲取select2裡面的option物件
				2、返回是陣列，遍歷陣列
				3、得到每一個option物件

				4、獲取到select1
				5、新增到select1裡面
					- 使用appendChild方法
			*/
			//獲取select2
			var select2 = document.getElementById("select2");
			//獲取select1
			var select1 = document.getElementById("select1");
			//獲取select2裡面的option
			var options1 = select2.getElementsByTagName("option");
			//遍歷陣列
			for(var m=0;m<options1.length;m++){
				//得到每一個option
				var op11 = options1[m];
				//新增到select1裡面
				select1.appendChild(op11);
				m--;
			}
		}

		//選擇新增到左邊
		function selToLeft() {
			/*
				1、獲取select2裡面的option物件
				2、返回是陣列，遍歷陣列
				3、得到每一個option物件
				4、判斷option是否被選中
					- if條件 屬性 selected == true：選擇
				5、獲取select1
				6、新增到select1裡面
					- 使用appendChild方法
			*/
			//獲取select1
			var s1 = document.getElementById("select1");
			//獲取到select2
			var s2 = document.getElementById("select2");
			//得到s1裡面的option物件
			var opss = s2.getElementsByTagName("option");
			//遍歷陣列
			for(var aa=0;aa<opss.length;aa++) {
				//得到每一個option
				var op = opss[aa];
				//判斷是否被選中
				if(op.selected == true) { //被選中
					//新增到select1裡面
					s1.appendChild(op);
					aa--;
				}
			}
		}

		//全部新增到右邊
		function allToRight() {
			/*
				1、獲取第一個select下面的option物件
				2、返回陣列，遍歷陣列
				3、得到每一個option物件
				4、得到select2
				5、新增到select2下面
					- appendChild方法
			*/
			//得到select2
			var s2 = document.getElementById("select2");
			//得到select下面的option物件
			var s1 = document.getElementById("select1");
			var ops = s1.getElementsByTagName("option");//返回的是陣列
			//遍歷陣列
			for(var j=0;j<ops.length;j++) {
				//得到每一個option物件
				var op1 = ops[j];
				//新增option到s2下面
				s2.appendChild(op1);
				j--;
			}
		}

		//實現選中新增到右邊
		function selToRight() {
			/*
				1、獲取select1裡面的option
					- getElementsByTagName()返回是陣列
					- 遍歷陣列，得到每一個option
				2、判斷option是否被選中
					- 屬性 selected，判斷是否被選中
						** selected= true: 選中
						** selected= false：沒有選擇
				3、如果是選中，把選擇的新增到右邊去
				4、得到select2
				4、新增選擇的部分
					- appendChild方法
			*/
			//獲取select1裡面的option
			//獲取select2
			var select2 = document.getElementById("select2");
			//得到select1
			var select1 = document.getElementById("select1");
			//得到option
			var options1 = select1.getElementsByTagName("option");
			//遍歷陣列
			for(var i=0;i<options1.length;i++) {
				//alert(i);
				//第一次迴圈 i=0  length：5   
				//第二次迴圈 i=0  length：4   
				//           i=0  length: 3
				var option1 = options1[i];//得到每一個option物件
				//判斷是否被選中
				if(option1.selected == true) {
					//新增到select2裡面
					select2.appendChild(option1);
					i--;
				}
			}

		}
		
	</script>

 </body>
</html>

9、案例：省市聯動

效果圖：
在這裡插入圖片描述
實現：

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<select id="countryid" οnchange="add1(this.value);">
		<option value="0">--請選擇--</option>
		<option value="中國">中國</option>
		<option value="美國">美國</option>
		<option value="德國">德國</option>
		<option value="日本">日本</option>
	</select>

	<select id="cityid">
			
	</select>

 </body>
 	<script type="text/javascript">
		
		//建立一個陣列儲存資料
		//二維陣列
		var arr = new Array(4);
		arr[0] = ["中國","南京","撫州","臨洮","日喀則","哈密"];
		arr[1] = ["美國","華盛頓","底特律","休斯頓","紐約"];
		arr[2] = ["德國","慕尼黑","柏林","法蘭克福","狼堡"];
		arr[3] = ["日本","東京","北海道","大阪","廣島","長崎"];

		function add1(val) {
			//alert(val);
			/*
				1、遍歷二維陣列
				2、得到也是一個陣列（國家對於關係）

				3、拿到陣列中的第一個值和傳遞過來的值做比較
				4、如果相同，獲取到第一個值後面的元素
				5、得到city的select
				6、新增過去（使用）appendChild方法
					- 建立option（三步）
			*/

			/*
				由於每次都要想city裡面新增option
				第二次新增，追加
				* 每次新增之前，判斷一下city裡面是否有option，如果有，刪除
			*/

			//獲取city的select
			var city1 = document.getElementById("cityid");
			//得到city裡面的option
			var options1 = city1.getElementsByTagName("option");
			//遍歷陣列
			for(var m=0;m<options1.length;m++) {
				//得到每一個option
				var op = options1[m];
				//刪除這個option 通過父節點刪除
				city1.removeChild(op);
				m--;
			}

			//遍歷二維陣列
			for(var i=0;i<arr.length;i++) {
				//得到二維陣列裡面的每一個陣列
				var arr1 = arr[i];
				//得到遍歷之後的陣列的第一個值
				var firstvalue = arr1[0];
				//判斷傳遞過來的值和第一個值是否相同
				if(firstvalue == val) { //相同
					//得到第一個值後面的元素
					//遍歷arr1
					for(var j=1;j<arr1.length;j++) {
						var value1 = arr1[j]; //得到城市的名稱
						//alert(value1);
						//建立option
						var option1 = document.createElement("option");
						//建立文字
						var text1 = document.createTextNode(value1);
						//把文字新增到option1裡面
						option1.appendChild(text1);
						//新增值到city1裡面
						city1.appendChild(option1);
					}
				}

			}
		}
		
	</script>
</html>

10、案例：動態生成表格

效果圖：
在這裡插入圖片描述
實現：

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	行：<input type="text" id="h" />
	列：<input type="text" id="l" />
	<br/>
	<input type="button" value="生成" οnclick="add2();"/>

	<div id="divv">

	</div>
	<script type="text/javascript">
		
		function add2() {
		
			/*
				1、得到輸入的行和列的值
				2、生成表格
					** 迴圈行
					** 在行裡面迴圈單元格
				3、顯示到頁面上
					- 把表格的程式碼設定到div裡面
					- 使用innerHTML屬性
			*/
			//獲取輸入的行和列
			var h = document.getElementById("h").value;
			var l = document.getElementById("l").value;

			//把表格程式碼放到一個變數裡面
			var tab = "<table border='1' bordercolor='blue'>";
			//迴圈行
			for(var i=1;i<=h;i++) {
				tab += "<tr>";
				//迴圈單元格
				for(var j=1;j<=l;j++) {
					tab += "<td>aaaaaaa</td>"
				}
				tab += "</tr>";
			}

			tab += "</table>";

			//alert(tab);
			//得到div標籤
			var divv = document.getElementById("divv");
			//把table的程式碼設定到div裡面去
			divv.innerHTML = tab;
		}
		
	</script>

 </body>
</html>

在這裡插入圖片描述

PHP快速上手（11）：HTML基礎
2020-12-27
PHPHTML
Redis 快速上手
2019-11-23
Redis
JDBC快速上手
2020-09-27
JDBC
Flask快速上手
2020-11-18
Flask
Maven快速上手
2020-10-10
Maven
gtest快速上手
2019-05-10
快速上手BootstrapVue
2019-05-08
bootVue
docker 快速上手
2022-05-29
Docker
ElasticJob 快速上手
2021-01-19
AST
? 快速上手三大基礎 React Hooks
2019-03-13
ReactHook
ES6快速上手 —— 基礎篇
2018-04-02
零基礎學習Java多久能給上手？
2021-09-03
Java
JavaScript基礎之DOM操作
2018-11-11
JavaScript
PHP快速上手（03）：PHP語言基礎
2020-12-22
PHP
Flask之旅: 快速上手
2019-01-20
Flask
Ansible awx 快速上手
2018-08-22
SpringBoot-快速上手
2018-06-02
Spring Boot
快速上手之docker
2024-05-06
Docker
Vue框架快速上手
2023-10-02
Vue框架
【On Nacos】快速上手Nacos
2022-06-25
Serverless 工程實踐 | 零基礎上手 Knative 應用
2021-10-12
Server
Docker 快速上手指南
2018-11-28
Docker
快速上手Linux核心命令
2024-04-16
Linux
快速上手前端框架layui
2019-04-19
前端框架UI
Spring-Boot快速上手
2019-03-04
Springboot
gdb除錯快速上手
2024-06-16
除錯
Vue3快速上手
2024-07-03
Vue
Apifox（2）快速上手apifox
2021-12-11
API
LLaMA快速上手指南
2023-03-13
快速上手 vue3
2022-02-25
Vue
Jenkins快速上手安裝
2021-11-27
Jenkins
Git和GitHub快速上手
2021-08-21
Github
Zalando Postgres Operator 快速上手
2022-04-08
Java網路程式設計快速上手（SE基礎）
2021-04-17
Java程式設計
Python和JavaScript哪個容易上手？0基礎必看！
2021-05-18
PythonJavaScript
Android BLE 快速上手指南
2018-11-02
Android
React 教程：快速上手指南
2019-02-27
React
Vue同構(一): 快速上手
2018-08-09
Vue

【零基礎上手JavaWeb】快速上手 JavaScript DOM操作

目錄

1、案例：在末尾新增節點

1.1 步驟

1.2 案例

2、元素物件

2.1 方法

2.3 案例

2.3 想要獲取標籤下面的子標籤

3、Node物件

3.1 Node物件屬性

3.2 節點關係

4、操作DOM樹

5、innerHTML屬性

6、案例：動態顯示時間

7、案例：全選練習

8、案例：下拉選單左右選擇

9、案例：省市聯動

10、案例：動態生成表格

相關文章