HTMLDOM

发布时间：2020-06-04 03:00:05 作者：ssc2013
来源：网络阅读：385

DOM（文档对象模型）是由W3C制定的一套访问和操作XML（eXtensible Markup Language）文档的标准，即API。比如DOM告诉JavaScript引擎如何在浏览器窗口中显示和操作XML创建的标记（Tag）。

由于HTML与XML的相似性及差异，JavaScript不仅实现了标准的DOM方法和属性（即由W3C制定的），而且还实现了HTML特有的 DOM方法和属性，前者称为DOM Core，并不专属于JavaScript，后者称为HTML-DOM。不管是DOM Core还是HTML-DOM，我们在使用JavaScript的时候要注意浏览器之间的兼容性，因为不同的浏览器对这两类方法和属性的支持可能不一样。这里不详谈DOM Core和HTML-DOM，以及跨浏览器兼容性，教材上都有详细描述。但一般推荐使用DOM Core方法和属性，尽管稍显繁杂。

常见的Core DOM方法如下：

1、创建节点
createElement()
createTextNode()
2、复制节点
cloneNode()
3、插入节点
appendChild()
insertBefore()
4、删除节点
removeChild()
5、替换节点
replaceChild()
6、查找和设置节点属性
setAttribute()
getAttribute()
7、查找节点
getElementById()
getElementsByTagName()
hasChildNode()

常见的Core DOM属性如下：

node.childNodes
node.firstChild
node.lastChild
node.nextSibling
node.previousSibling
node.parentNode

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML DOM</title>
<style type="text/css">
	table,tr,td{text-align:center;border:1px solid #000000;border-collapse:collapse;line-height:30px;}
	table{margin:0px auto;}
	td{width:200px;}
	body{text-align:center;margin:0px auto;}
	#frist{margin-top:20px;}
</style>
</head>

<body>
	<div id="frist">
			<table id="myTable">
			<tr >
				<td>商品名称</td>
				<td>数量</td>
				<td>价格</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>防滑正品休闲鞋</td>
				<td>12</td>
				<td>￥568</td>
				<td><input type="button" value="删除" onclick="delRow(this)"/><input type="button" value="修改" onclick="updateRow(this)"/></td>
			</tr>
			<tr>
				<td>抗疲劳项圈</td>
				<td>5</td>
				<td>￥49</td>
				<td><input type="button" value="删除" onclick="delRow(this)"/><input type="button" value="修改"></td>
			</tr>
			<tr>
				<td colspan="4"><input type="button" value="增加订单" onclick="addRow()"/></td>
			</tr>
		</table>
		<input type="button" value="显示第二行第二个单元格的内容" onclick="show()">
	</div>
	<p>该内容为作者原创，转载请声明，违规必究！</p>
</body>
<script type="text/javascript" defer>
	function $(id){
		return document.getElementById(id);
	}
	function addRow(){	
		var newRow=$("myTable").insertRow($("myTable").rows.length-1);
		var col1=newRow.insertCell(0);
		col1.innerHTML="幸福从天而降";
		var col2=newRow.insertCell(1);
		col2.innerHTML="50";
		var col3=newRow.insertCell(2);
		col3.innerHTML="￥18.5";
		var col4=newRow.insertCell(3);
		col4.innerHTML="<input type='button' value='修改'/><input type='button' value='删除' onclick='delRow(this)'/>";
	}
	function delRow(v){
		var index=v.parentNode.parentNode.rowIndex;
		$("myTable").deleteRow(index);
	}
	function show(){
		var col=$("myTable").rows[1].cells[1].innerHTML;
		alert(col);
	}
	function updateRow(v){
		var row=v.parentNode.parentNode;
		row.cells[0].lastNode;
		for(var i=0;i<row.cells.length-1;i++){
			row.cells[i].setAttribute("type","text");
		}
	}
</script>
</html>

HTMLDOM

相关阅读