DOM_案例

案例一：采用document对象和window对象实现弹窗并进行数据间的传送。

注意：由于我们要在新打开的窗口向第一个页面传递数据，这里我们用到了一个属性

opener 返回对创建此窗口的窗口的引用。

问题：在安全性较高的浏览器中不允许对本地文件进行数据传输，如Chrome（实际开发不会遇到）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
编号：
<input type="text" id="numId" />
<br />
姓名：
<input type="text" id="nameId" />
<br />
<input type="button" value="选择" onclick="click1();"/>
<script type="text/javascript">
	function click1(){
		window.open("table.html","","width=300,height=200");
		}
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table border="1">
  <tr>
    <td>操作</td>
    <td>编号</td>
    <td>姓名</td>
  </tr>
  <tr>
    <td><input type="button" id="button1" onclick="s1('001','Ethan')" value="选择" /></td>
    <td>001</td>
    <td>Ethan</td>
  </tr>
  <tr>
    <td><input type="button" id="button2" onclick="s1('002','Tom')" value="选择" /></td>
    <td>002</td>
    <td>Tom</td>
  </tr>
</table>
<script type="text/javascript">
	function s1(num, name){
		//opener 返回对创建此窗口的窗口的引用。
		var op = window.opener;
		op.document.getElementById("numId").value = num;
		op.document.getElementById("nameId").value = name;
		window.close();
		}
</script>
</body>
</html>

案例二：末尾添加节点

方法：

document.createElement() 创建元素节点

document.createTextNode() 创建文本节点

appendChild() 把新的子节点添加到指定节点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<ul id="ulId">
  <li>100</li>
  <li>200</li>
  <li>300</li>
  <li>400</li>
  <li>500</li>
</ul>
<input type="button" id="addId" value="添加节点" onclick="add1()" />
<script type="text/javascript">
    	function add1(){
			//  获取添加节点位置对象
			var ulAddress = document.getElementById("ulId");
			//	创建元素节点。
			var addLi = document.createElement("li");
			//  创建文本节点
			var addText = document.createTextNode("600");
			
			//	把新的子节点添加到指定节点。
			addLi.appendChild(addText);
			ulAddress.appendChild(addLi);
			}
    </script>
</body>
</html>

案例一：采用document对象和window对象实现弹窗并进行数据间的传送。

案例二：末尾添加节点

猜你喜欢