DOM操作总结

最新推荐文章于 2023-05-23 10:49:06 发布

伯爵-ShuaiqiShang

最新推荐文章于 2023-05-23 10:49:06 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： JS DOM

本文链接：https://blog.csdn.net/qq_31860777/article/details/81048797

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、DOM初识和常用属性和方法：

DOM是文档对象模型的简称。当网页加载时，可以将结构化文档在内存中转换成对象的树。

DOM节点对象的分类:元素节点，属性节点，文本节点。

元素节点：各种标签就是这些元素节点的名称，例如段落标签，列表标签等。
文本节点：文本节点总是被包含在元素节点的内部。
属性节点：一般用来修饰元素节点就称之为属性节点。

节点常用属性和方法如下：

parentNode	返回当前节点的父节点
previousSibling	返回当前节点的前一个兄弟节点
nextSibling	返回当前节点的后一个兄弟节点
childNodes	返回当前节点的所有子节点
firstChild	返回当前节点的第一个子节点
lastChild	返回当前节点的最后一个子节点
getElementByTagName(tagName)	返回当前节点的具有指定标签名的所有子节点

举例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>获取元素值并弹出</title>
	<style>
      #n4{color:red;}
	</style>
</head>
<body>
  <ul id="name">
  	<li id="n1">zhangsan</li>
  	<li id="n2">lisi</li>
  	<li id="n3">wangwu</li>
  	<li id="n4">zhaoliu</li>
  	<li id="n5">xiaoqiang</li>
  	<li id="n6">chenhao</li>
  </ul>
  <input type="button" value="父节点" οnclick="showinfo(curr.parentNode)">
  <input type="button" value="第一个子节点" οnclick="showinfo(curr.parentNode.firstChild.nextSibling)">
  <input type="button" value="上一个子节点" οnclick="showinfo(curr.previousSibling.previousSibling)">  
  <input type="button" value="下一个子节点" οnclick="showinfo(curr.nextSibling.nextSibling)">
  <input type="button" value="最后一个子节点" οnclick="showinfo(curr.parentNode.lastChild.previousSibling)">
  <input type="button" value="得到所有li元素的个数" οnclick="showCount()">
</body>
<script>
  var curr=document.getElementById('n4');
  function showinfo(target)
  { 
  	alert(target.innerHTML);
  }
  function showCount()
  {
  	alert(document.getElementsByTagName('li').length);
  }
</script>
</html>

示例：

二、DOM访问表单控件的常用属性和方法如下：

action	返回该表单的提交地址
elements	返回该表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件
length	返回表单内表单域的个数
method	返回表单内的method属性，主要有get和post两个值
target	确定提交表单时的结果窗口，主要有_self、_blank、_top等
reset()、submit()	重置表单和确定表单方法

举例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>查找表单控件</title>
</head>
<body>
	<form action="http://www.itcast.cn" id="myform" method="get" target="_blank">
		<input type="text" name="username" value="chenhao"><br>
		<input type="text" name="password" value="123456"><br>
		<select name="city">
			<option value="shanghai">上海</option>
			<option value="nanjing" selected >南京</option>
		</select><br>
		<input type="button" value="获取表单内第一个控件"
		οnclick="alert(document.getElementById('myform').elements[0].value)">
		<input type="button" value="获取表单内第二个控件"
		οnclick="alert(document.getElementById('myform').elements['password'].value)">
		<input type="button" value="获取表单内第三个控件"
		οnclick="alert(document.getElementById('myform').city.value)">
		<input type="button" value="操作表单" οnclick="operatorForm()">
	</form>
</body>
<script>
	function operatorForm()
	{
		var myform=document.forms[0];
		alert(myform.action);
		alert(myform.method);
		alert(myform.target);
		myform.submit();
	}
</script>
</html>

示例：

三、DOM访问列表框、下拉菜单的常用属性和方法：

form	返回列表框、下拉菜单所在的表单对象
length	返回列表框、下拉菜单的选项个数
options	返回列表框、下拉菜单里所有选项组成的数组
selectedIndex	返回下拉列表中选中选项的索引
type	返回下拉列表的类型，多选的话返回select-multiple,单选返回select-one

使用options[index]返回具体选项对应的常用属性：

defaultSelected	返回该选项默认是否被选中
index	返回该选项在列表框、下拉菜单中的索引
selected	返回该选项是否被选中
text	返回该选项呈现的文本
value	返回该选项的value属性值

举例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>查找表单控件</title>
</head>
<body>
	<select name="city" id="city" size="5">
		<option value="beijing">北京</option>
		<option value="shanghai" selected>上海</option>
		<option value="tianjin">天津</option>
		<option value="nanjing">南京</option>
		<option value="shenzhen">深圳</option>
		<option value="wuhan">武汉</option>
	</select><br>
	<input type="button" value="第一个城市" οnclick="change(s_city.options[0])">
	<input type="button" value="上一个城市" οnclick="change(s_city.options[s_city.selectedIndex-1])">
	<input type="button" value="下一个城市" οnclick="change(s_city.options[s_city.selectedIndex+1])">
	<input type="button" value="最后一个城市" οnclick="change(s_city.options[s_city.length-1])">
</body>
<script>
  var s_city=document.getElementById('city');
  var change=function(city){
  	alert(city.text);
  } 
</script>
</html>

示例：

四、DOM访问表格子元素的常用属性和方法如下：

caption	返回表格的标题对象
rows	返回该表格里的所有表格行
tbodies	返回该表格里所有<tbody .../>元素组成的数组
tfoot	返回该表格里所有<tfoot.../>元素
thead	返回该表格里所有<thead../>元素

通过rows[index]返回表格指定的行所对应的属性：

cells	返回该表格行内所有的单元格组成的数组
rowIndex	返回该表格行在表格内的索引值
sectionRowIndex	返回该表格行在其所在元素(tbody、thead等元素)的索引值

通过cells[index]返回表格指定的列对应的属性：

cellIndex

返回该单元格在表格行内的索引值

举例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>查找表单控件</title>
</head>
<body>
    <table id="mytable" border="1">
    	<caption>海通科技课程</caption>
    	<tr>
    		<td>C</td>
    		<td>C++</td>
    	</tr>
    	<tr>
    		<td>LSD</td>
    		<td>ARM</td>
    	</tr>
    	<tr>
    		<td>J2EE</td>
    		<td>Android</td>
    	</tr>
    </table>
	<input type="button" value="表格标题"
	οnclick="alert(document.getElementById('mytable').caption.innerHTML);">
	<input type="button" value="第一行、第一格"
	οnclick="alert(document.getElementById('mytable').rows[0].cells[0].innerHTML);">
	<input type="button" value="第二行、第二格"
	οnclick="alert(document.getElementById('mytable').rows[1].cells[1].innerHTML);">
	<input type="button" value="第三行、第一格"
	οnclick="alert(document.getElementById('mytable').rows[2].cells[0].innerHTML);"><br>
	设置指定单元格的值：第<input type="text" id="row" size="2">行,
	第<input type="text" id="cel" size="2">列的值为,
	<input type="text" id="course" size="10">
	<input type="button" id="btn_set" value="修改" οnclick="update()">
</body>
<script>
	function update(){
		var row=document.getElementById("row").value;
		var cell=document.getElementById("cel").value;
		var t=document.getElementById("mytable");
		// t.rows[row-1].cells[cell-1].innerHTML=document.getElementById('course').value;
		t.rows.item(row-1).cells.item(cell-1).innerHTML=document.getElementById('course').value;
			}
</script>
</html>

示例：

五、DOM节点的增删改操作：

DOM创建节点的方法：document.createElement(Tag),Tag必须是合法的HTML元素
DOM复制节点的方法：节点.cloneNode(boolean deep),当deep为true时，表示复制当前节点以及当前节点的全部后代节点。为false时，只复制当前节点。

DOM添加、删除节点的方法：

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

举例代码和示例请参考博文《实例实现DOM节点的添加、复制，替换和删除》。

六、DOM为列表框、下拉菜单添加选项的方式：

创建选项除了使用前面所示的createElement方法之外，还可以使用专门的构造器来构造一个选项出来。语法如下：

new Option(text,value,defaultSelected,selected)

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

text	该选项的文本、即该选项所呈现的"内容"
value	选中该选项的值
defaultSelected	设置默认是否显示该选项
selected	设置该选项是否被选中

添加创建好的选项至列表框或下拉菜单的方法：

直接为<select .../>的指定选项赋值即可。

列表框或下拉菜单对象.options[i]=创建好的option对象。

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

直接使用列表框或下拉菜单对象.remove(index)方法删除指定选项
直接将指定选项赋值为null

举例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM操作下拉框</title>
	<style>
      select{
      	border:solid 1px black;
      }
	</style>
</head>
<body>
  <input type="button" value="创建一个城市列表框" id='btn1'>
  <input type="button" value="一条条删除列表框内容" id='btn2'>
  <input type="button" value="一次性清空列表框内容" id='btn3'>
</body>
<script>
	var btn1=document.getElementById('btn1');
	var btn2=document.getElementById('btn2');
	var btn3=document.getElementById('btn3');
	
	//创建一个城市列表框
	function createsel(){ 
		var element=document.createElement('select');//创建一个下拉列表框对象
		element.size=5;
		element.id='city';
		var a=['北京','邯郸','石家庄','郑州','郴州','桂林','广州','哈尔滨','吉林','呼和浩特','锡林郭勒','张家口','济南','青岛','威海','日照','南宁','昆明','西宁','拉萨','丹东','宁波','屏东','花莲'];
		for(var i=0;i<8;i++)
		{
		   var p=parseInt(Math.random()*a.length);
           var options=document.createElement('option');
           options.value=a[p]; 
           options.innerHTML=a[p]; 
           element.appendChild(options);
                           //为列表框添加选项并添加进下拉列表框对象
		}
		document.body.appendChild(element);
	}
	btn1.addEventListener('click',createsel);
	//一条条删除列表框内容
	function delOne(){
		var city=document.getElementById('city');
		if(city.options.length>0)
		{city.remove(city.options.length-1);}
	    if(city.options.length==0)
	    	{document.body.removeChild(city);}
	}
	btn2.addEventListener('click',delOne);
	function delAll(){
		var city=document.getElementById('city');
		document.body.removeChild(city);
	}
	btn3.addEventListener('click',delAll);
</script>
</html>

示例：

七、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 lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM动态操作表格</title>
</head>
<body>
    <div id="test">
	<input type="button" value="创建一个5行4列的表格" οnclick="createTable()">
	<input type="button" value="删除最后一行" οnclick="deleteLastRow()">
	<input type="button" value="删除最后一个单元格" οnclick="deleteLastCell()">
	</div>
</body>
<script>
	function createTable(){
		var b=document.getElementById('test');
        var t=document.createElement("table");
        t.border="1";
        t.id="mytable";
        var caption=t.createCaption();
        caption.innerHTML="我的表格";
        for(var i=0;i<5;i++)
        {
        	var tr=t.insertRow(i);
        	for(var j=0;j<4;j++)
        	{
        		var td=tr.insertCell(j);
        		td.innerHTML="单元格"+i+j;
        	}
        }
        b.appendChild(t);
	}
	//删除最后一行
	function deleteLastRow(){
		var t=document.getElementById("mytable");
		// alert(t.nodeName); //显示节点名称
		if(t.rows.length>0){
			t.deleteRow(t.rows.length-1);
		}
		//如果表格一行内容都没有了，则移除整个表格
		if(t.rows.length==0)
		{
			var b=document.getElementById('test');
			var c=b.lastChild;
	        b.removeChild(c);
		}
	}
	//删除最后一个单元格
	function deleteLastCell(){
		var t=document.getElementById("mytable");
		var lastRow=t.rows[t.rows.length-1];//最后一行
		if(lastRow.cells.length>0){
			lastRow.deleteCell(lastRow.cells.length-1);
		}
		if(lastRow.cells.length==0)  //如果最后一行空了，则移除这一行
			{t.deleteRow(t.rows.length-1);}
		if(t.rows.length==0)
		{
			var b=document.getElementById('test');
			var c=b.lastChild;
	        b.removeChild(c);
		}
	}
</script>
</html>

示例：