奋斗30天Javascript之DOM對HTML元素的增删改操作（Part12）

最新推荐文章于 2021-10-22 14:28:13 发布

那是遇知吧

最新推荐文章于 2021-10-22 14:28:13 发布

阅读量174

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_41406727/article/details/88670453

版权

javascript 专栏收录该内容

71 篇文章 2 订阅

订阅专栏

最近又在重新复习js，不怎么用有些就就生疏了，每天都要复习复习在复习才行，分享一下跟着腾讯视频的日常笔记记录。

有些錯誤可能是沒寫對中英字符，可能會報錯，都手寫的，見諒，废话不多说半句，开始复习吧！

* DOM创建节点的方法：

· document.createElement(Tag),Tag必须是合法的HTML元素

* DOM复制节点的方法：

· 节点cloneNode（boolean deep），当deep为true时，表示复制当前节点以及当前节点的全部后代节点。为false时，只复制当前节点。

* DOM添加和删除节点的方法：

appendChild(newNode)	将newNode添加成当前节点的最后一个子节点
insetBefore(newNode,refNode)	在refNode节点之前插入newNode节点
replaceChild(newNode,oldNode)	将oldNode节点替换成newNode节点
removeChild(oldNode)	将oldNode子节点删除

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function weatherobj(){
	var weatherid = document.getElementById("weather");
	var weatli =document.createElement("li");
	weatli.innerHTML="阴天";
	weatherid.appendChild(weatli);
	
}
	function copyobj(){
		var weatherid = document.getElementById("weather");
		var rain = weatherid.lastChild.previousSibling.cloneNode(true);
		weatherid.appendChild(rain);
	}
	function delobj(){
		var weatherid = document.getElementById("weather");
		var dels =weatherid.lastChild.previousSibling;
		weatherid.removeChild(dels);
	}
</script>
</head>
<body>

<ul id="weather">
	<li>晴天</li>
	<li>雨天</li>
	</ul>
<button type="button" onclick="weatherobj()">创建复制替换节点</button>
	<button type="button" onclick="copyobj()">复制节点</button>
	<button type="button" onclick="delobj()">删除节点</button>
</body>
</html>

结果为：点击第一个button

结果为：点击第二个button

结果为：点击第三个button

* DOM为列表框和下拉菜单添加选项的方式

· 创建选项除了使用前面所示的createElement方法之外，还可以

使用专门的构造器来创造一个选项出来。语法如下：

new Optiin(text,value,defaulSelscted,selected)

·该构造器有4个参数，说明如下：

text	该选项的文本，即该选项所呈现的“内容”
value	选中该选项的值
defaulSelscted	设置默认是否显示该选项
selected	设置该选项当前是否被选中

提示：并不是每次构造都需要指名4个参数，可以指名一个或者2个都可，加入一个就指向text，两个的话，第一个参数为text，第二个为value。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
	function createweather(){
		var weather = document.createElement("select");
		for(var i = 0; i<5; i++){
			var opt = new Option(i,i);
			weather.options[i]=opt
		}weather.size = 5;
		weather.id = "weather";
		document.getElementById("body").appendChild(weather);
	}
	function del(){
		var weather = document.getElementById("weather");
		if(weather.options.length>0){
			weather.options[weather.options.length-1] = null
		   }
	}
	function qingkong(){
		var weather = document.getElementById("weather");
		if(weather.options.length>0){
			weather.options.length = 0
		   }
	}
</script>
</head>
<body id="body">


<button type="button" onclick="createweather()">創建一個天氣列表框</button>
	<button type="button" onclick="del()">一條條刪除列表框內容</button>
		<button type="button" onclick="qingkong()">清空列表框</button>

</body>
</html>

結果為：

1：點擊創建一個天氣列表框input則會創建一個select對象

2：點擊一個個刪除input則會一個個刪除option中得值

3：點擊清空input則會直接清空select內的option值

* 删除列表框，下拉菜单的选项的方法：

· 直接使用列表框或者下拉菜单对象.remove(index)方法删除指定选项

· 直接将指定选项赋值为null

· 列表框或下拉菜单对象.remove(index)或对象.option[index] = null

* DOM動態添加刪除表格內容所使用的常用方法：

insertRow(index)	在指定索引位置插入一行
createCaption()	為該表格創建標題
createTFoot()	為該表格創建<tfoot.../>元素，假如已存在就返回現有的
createTHead()	為該表格創建<thead.../>元素，假如已存在就返回現有的
deleteRow(index)	刪除表格中index索引處的行
deleteCaption()	刪除表格標題
deleteTFoot()	從表格刪除tfoot元素以及其內容
deleteTHead()	從表格刪除tHead元素以及其內容

* 給表格行創建或刪除單元格的方法

insertCell（index）	在index處創建一個單元格，返回新創建的單元格
deleteCell(index)	刪除某行在index索引處的單元格

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
	function createtable(){
		var tables = document.createElement("table");
		var bodys =document.getElementById("body");
		var newcap = tables.createCaption();
		newcap.innerHTML = "標題";
		tables.id = "tablebox";		
		for(var i = 0; i<5; i++){
			var tr = tables.insertRow(i);
			for(var j = 0; j<4; j++){
				var td=tr.insertCell(j);
				td.innerHTML = "單元格"+i+j
			}
		}
		bodys.appendChild(tables);
	}
	function del(){
		var tablebox = document.getElementById("tablebox");
		if(tablebox.rows.length>0){
			tablebox.deleteRow(tablebox.rows.length-1)
		   }
	}
	function cellobj(){
		var tablebox = document.getElementById("tablebox");
		var lastrows =  tablebox.rows[tablebox.rows.length-1];
		if(lastrows.cells.length>0){
			lastrows.deleteCell(lastrows.cells.length-1)
		   }
	}
</script>
</head>
<body id="body">


<button type="button" onclick="createtable()">創建一個5行4列的表格</button>
	<button type="button" onclick="del()">刪除最後一行</button>
		<button type="button" onclick="cellobj()">刪除最後一個單元格</button>

</body>
</html>

點擊創建一個5行4列的表格會創建帶標題的一個表格：

點擊刪除行：

點擊刪除單元格：

那是遇知吧

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
奋斗30天Javascript之DOM對HTML元素的增删改操作（Part12）

最近又在重新复习js，不怎么用有些就就生疏了，每天都要复习复习在复习才行，分享一下跟着腾讯视频的日常笔记记录。有些錯誤可能是沒寫對中英字符，可能會報錯，都手寫的，見諒，废话不多说半句，开始复习吧！* DOM创建节点的方法：· document.createElement(Tag),Tag必须是合法的HTML元素* DOM复制节点的方法：· 节点cloneNode（boolean...
复制链接

扫一扫