【零基礎上手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
快速上手BootstrapVue
2019-05-08
bootVue
ElasticJob 快速上手
2021-01-19
AST
Flask快速上手
2020-11-18
Flask
JDBC快速上手
2020-09-27
JDBC
docker 快速上手
2022-05-29
Docker
ES6快速上手 —— 基礎篇
2018-04-02
零基礎學習Java多久能給上手？
2021-09-03
Java
Flask之旅: 快速上手
2019-01-20
Flask
Vue框架快速上手
2023-10-02
Vue框架
快速上手之docker
2024-05-06
Docker
? 快速上手三大基礎 React Hooks
2019-03-13
ReactHook
PHP快速上手（03）：PHP語言基礎
2020-12-22
PHP
快速上手前端框架layui
2019-04-19
前端框架UI
Git和GitHub快速上手
2021-08-21
Github
Docker 快速上手指南
2018-11-28
Docker
Zalando Postgres Operator 快速上手
2022-04-08
快速上手 vue3
2022-02-25
Vue
LLaMA快速上手指南
2023-03-13
Git 快速上手精華梳理
2017-09-16
Git
vue.js快速上手
2017-09-15
Vue.js
react native快速上手
2017-11-24
React Native
Vue.js 快速上手。
2015-12-23
Vue.js
資訊科技快速上手教程
2016-03-15
gdb除錯快速上手
2024-06-16
除錯
Vue3快速上手
2024-07-03
Vue
JavaScript基礎之DOM操作
2018-11-11
JavaScript
Serverless 工程實踐 | 零基礎上手 Knative 應用
2021-10-12
Server
Java網路程式設計快速上手（SE基礎）
2021-04-17
Java程式設計
Flutter ListView 實戰快速上手
2020-03-23
FlutterView
SAP系統如何快速上手？
2020-04-02
React 教程：快速上手指南
2019-02-27
React
Spring-Boot快速上手
2019-03-04
Springboot
Github Action 快速上手指南
2021-02-20
Github
Vue同構(一): 快速上手
2018-08-09
Vue
Jenkins快速上手安裝
2021-11-27
Jenkins
SpringBoot-快速上手
2018-06-02
Spring Boot

【零基礎上手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、案例：動態生成表格

相關文章