web之DOM基础

DOM

原生JS中DOM节点相关API合集
DOM介绍
DOM是文档对象模型的简称。
借助DOM模型，我们可以使用js对HTML进行修改

DOM模型中有以下3种节点：
元素节点：各种标签就是这些元素节点的名称，例如< p>、< ul>等。
文本节点:文本节点总是被包含在元素节点的内部。
属性节点:一般用来修饰元素节点就称之为属性节点。

示例：

//HTML文档
//a称之为元素节点,title="百度" href="https://www.baidu.com/"这两个称之为属性节点,被包含在a标签里面的"百度"称之为文本节点
<a title="百度" href="https://www.baidu.com/">百度</a>

• 为了动态的修改HTML，须先访问HTML元素。DOM主要提供了两种方法来访问HTML:

1.根据ID访问HTML元素-通过document对象调用getElementById()方法来查找具有唯一id属性值的元素。
2.利用节点关系访问HTML，常用属性方法：

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

• 第一种使用id查找访问HTML元素方法例子:

点击按钮获取三个元素里面的内容

//js代码
function f() {
    
    
	//var mydiv=document.getElementById("mydiv");//找到这3个元素
	//var content=document.getElementById("content");//找到这3个元素
	//var textname=document.getElementById("textname");//找到这3个元素
	//可以简化省略掉document.
	var mydiv, mydiv, textname;
	with(document) {
    
    
		mydiv = getElementById("mydiv");
		content = getElementById("content");
		textname = getElementById("textname");
	}
	//去div里面面的內容用.innerHTML
	alert(mydiv.innerHTML + "\n" + content.value + "\n" + textname.value);
}

//HTML代码
<div id="mydiv">这是一个div</div>
<textarea name="" id="content" cols="30" rows="10">textarea</textarea><br/>
<input type="text" id="textname" value="text"><br/>
<input type="button" id="btn" value="访问元素的内容" onclick="f()">

• 第二种使用节点关系来查找HTML元素:

//HTML代码
<ul>
	<li id="n1">li1</li>
	<li id="n2">li2</li>
	<li id="n3">li3</li>
	<li id="n4">li4</li>
	<li id="n5">li5</li>
	<li id="n6">li6</li>
</ul>
<input type="button" value="父节点" onclick="f(curr.parentNode)">
//在火狐谷歌浏览器里面，他会认为换行也是一个子节点,在IE浏览器就不会.
<input type="button" value="第一个子节点" onclick="f(curr.parentNode.firstChild.nextSibling)">
<input type="button" value="上一个节点" onclick="f(curr.previousSibling.previousSibling)">
<input type="button" value="下一个节点" onclick="f(curr.nextSibling.nextSibling)">
<input type="button" value="最后一个子节点" onclick="f(curr.parentNode.lastChild.previousSibling)">
<input type="button" value="得到所有li元素的个数" onclick="f2()">


//js代码
<script type="text/javascript">
	var curr = document.getElementById("n4");
	function f(target) {
    
    
		alert(target.innerHTML);
	}
	function f2() {
    
    
		alert(document.getElementsByTagName("li").length);
	}
</script>

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

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

在elements返回额数组中访问具体的表单控件语法：

属性	用途
.elements[index]	返回该表单中第index个表单控件
.elements[elementName]	返回表单内id或name为elemenName的表单控件
.elemetName	返回表单中id或name为elementName的表单控件

例子：

//js代码
function f() {
    
    
	var myform = document.forms[0]; //得到第一个表单
	//var myform = document.getElementById("myform");//用这个也可
	alert(myform.action); //返回该表单的提交地址
	alert(myform.method); //提交方式
	alert(myform.target); //打开方式
	myform.submit(); //提交表单
	myform.reset(); //恢复表单的初始状态
}


//HTML代码
<form id="myform" action="https://www.baidu.com/" method="get" target="_blank">//action为提交的地址，提交的方式是get，target="_blank"是在新的浏览器中运行
	<input type="text" name="username" value="javascript"><br/>
	<input type="text" name="password" value="123456"><br/>
	<select name="city" id="">
		<option value="zhonghuo">中国</option>
		<option value="beijing" selected="selected">北京</option>
	</select><br/>
	<input type="button" value="获取表单内第一个控件" onclick="alert(document.getElementById('myform').elements[0].value);">
	<input type="button" value="获取表单内第二个控件" onclick="alert(document.getElementById('myform').elements['password'].value);">
	<input type="button" value="获取表单内第三个控件" onclick="alert(document.getElementById('myform').city.value);">
	<input type="button" value="操作表单" onclick="f()">
</form>

• DOM访问列表框、下拉菜单的常用属性:

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

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

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

访问下拉菜单例子:

//HTML代码
<select name="city" id="city" size="5">//size="5"为可见选项是5
	<option value="beijing">北京</option>
	<option value="shanghai" selected="selected">上海</option>
	<option value="tianjin">天津</option>
	<option value="nanjing">南京</option>
	<option value="shenzhen">深圳</option>
	<option value="wuhan">武汉</option>
</select><br/>
<input type="button" value="第一个城市" onclick="f(city.options[0]);">
<input type="button" value="上一个城市" onclick="f(city.options[city.selectedIndex-1])">//指被选中的前一个城市
<input type="button" value="下一个城市" onclick="f(city.options[city.selectedIndex+1]);">//指被选中的下一个城市
<input type="button" value="最后一个城市" onclick="f(city.options[city.length-1])">


//js代码
var city = document.getElementById("city");
var f = function(city) {
    
    
	alert(city.text);
}

• DOM访问表格子元素的常用属性和方法：

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

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

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

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

属性	用途
cellIndex	返回该单元格在表格行内的索引值

点击获取表格数据跟修改表格内容例子：

//js代码
function update() {
    
    
	var row = document.getElementById("row").value;
	var cell = document.getElementById("cell").value;
	var course = document.getElementById("course").value;
	var t = document.getElementById("table");
	//t.rows[row - 1].cells[cell - 1].innerHTML = course;//第一种写法
	t.rows.item(row - 1).cells.item(cell - 1).innerHTML = course //通过下标
}

//HTML代码
<table id="table" border="1">
	<caption>web课程</caption>
	<tr>
		<td>java</td>
		<td>javascript</td>
	</tr>
	<tr>
		<td>C</td>
		<td>C++</td>
	</tr>
	<tr>
		<td>java</td>
		<td>android</td>
	</tr>
</table>
<input type="button" value="表格标题" onclick="alert(document.getElementById('table').caption.innerHTML)">
<input type="button" value="第一行、第一格" onclick="alert(document.getElementById('table').rows[0].cells[0].innerHTML)">
<input type="button" value="第二行、第二格" onclick="alert(document.getElementById('table').rows[1].cells[1].innerHTML)">
<input type="button" value="第三行、第二格" onclick="alert(document.getElementById('table').rows[2].cells[1].innerHTML)"><br/> 设置指定单元格的值:第
<input type="text" id="row" size="2">行, 第
<input type="text" id="cell" size="6">列值为:
<input type="text" id="course" size="9">
<input type="button" id="btn" value="修改" onclick="update()">

DOM对HTML元素的增删改操作

• 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子节点删除

了解如何创建复制删除元素例子:

//JS代码
//添加替换修改节点代码
function create() {
    
    
	var ul = document.getElementById("ul");
	var element = document.createElement("li"); //创建一个新的li标签
	element.innerHTML = "联合国";
	//ul.appendChild(element); //按顺序插入节点
	//ul.insertBefore(element, ul.firstChild.nextSibling); //在第一个元素插入节点
	//ul.replaceChild(element, ul.firstChild.nextSibling);//替换节点
}
//复制节点代码
function copy() {
    
    
	var ul = document.getElementById("ul");
	//复制节点,用false只复制节点，不复制文字，用true连中国都会复制进去
	var element = ul.firstChild.nextSibling.cloneNode(true);
	ul.appendChild(element); //把复制的节点插入进去
}
//删除节点
function remove() {
    
    
	var ul = document.getElementById("ul");
	var element = ul.firstChild.nextSibling; //查找第一个元素
	ul.removeChild(element);
}



//HTML代码
<ul id="ul">
	<li>中国</li>
	<li>美国</li>
</ul>
<input type="button" value="创建复制替换节点" onclick="create()">
<input type="button" value="复制节点" onclick="copy()">
<input type="button" value="删除节点" onclick="remove()">

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

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

new Option(text,value,defaultSelected,selected);

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

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

注意：并不是每次构造都需指明4个参数，可以指明一个或者两个都可以，假如一个的话指明的事text。两个的话，第一个是text，第二个是value。

• 添加创建好的选项至列表框或下拉菜单的方式:
  直接<select…/>的指定选项赋。

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

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

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

添加删除列表框例子:

//js代码
function createSelect() {
    
     //添加列表框
	var element = document.createElement("select"); //创建一个select标签
	for (var i = 0; i < 10; i++) {
    
    
		var op = new Option("新增选项" + i, i); //创建选项
		element.options[i] = op; //把选项赋值给select标签
	}
	element.size = 5; //给下拉列表设置可见长度为5
	element.id = "city"; //给下拉列表设置id
	document.getElementById("test").appendChild(element); //把select下拉列表添加到test界面中
}

function delOne() {
    
     //删除一条列表框
	var city = document.getElementById("city");
	if (city.options.length > 0) {
    
     //判断有无列表框
		//city.remove(city.options.length - 1); //第一种删除方式
		city.options[city.options.length - 1] = null;
	}
}

function clearAll() {
    
     //删除整个列表框元素，只是删除列表框的options
	var city = document.getElementById("city");
	if (city.options.length > 0) {
    
     //判断有无列表框
		city.options.length = 0;
	}
}


//HTML代码

<body id="test">
    <input type="button" value="创建一个城市列表框" onclick="createSelect()">
    <input type="button" value="一条条删除列表框内容" onclick="delOne()">
    <input type="button" value="一次性清空列表框内容" onclick="clearAll()">
</body>

DOM动态添加删除表格内容所使用到的常用方式:

方法	用途
insertRow(index)	在指定索引位置插入一行
createCaption()	为该表格创建标题
createFoot()	为该表格创建<tfoot…/>元素,假如已存在就返回现有的
createHead()	为该表格创建<thead…/>元素,假如已存在就返回现有的
deleteRow(index)	删除表格中index索引处的行
deleteCaption()	删除表格标题
deleteFoot()	从表格删除tFoot元素及其内容
deleteHead()	从表格删除tHead元素及其内容

给表格行创建、删除单元格的方法:

方法	用途
insertCell(index)	在index处创建一个单元格,返回新创建的单元格
deleteCell(index)	删除某一行在index索引处的单元格

对单元格增删改操作例子:

//js代码
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++) {
    
     //创建5行的循环
		var tr = t.insertRow(i);
		for (var j = 0; j < 4; j++) {
    
     //创建4列的循环
			var td = tr.insertCell(j);
			td.innerHTML = "单元格" + i + j;
		}
	}
	b.appendChild(t); //把表格放到btn里面;不然显示不出来，重点
}

function deleteLastRow() {
    
     //删除最后一行
	var t = document.getElementById("mytable");
	if (t.rows.length > 0) {
    
    
		t.deleteRow(t.rows.length - 1)
	}
}

function deleteLastCell() {
    
     //删除最后一个单元格
	var t = document.getElementById("mytable");
	var lastRow = t.rows[t.rows.length - 1];
	if (lastRow.cells.length > 0) {
    
     //判断行i有没有单元格
		lastRow.deleteCell(lastRow.cells.length - 1); //删除单元格最后一个单元格
	}
}



//HTML代码
<body id="test">
    <input type="button" value="创建一个5行4列的表格" onclick="createTable()">
    <input type="button" value="删除最后一行" onclick="deleteLastRow()">
    <input type="button" value="删除最后一个单元格" onclick="deleteLastCell()">
</body>