DOM学习笔记（三）

来源：互联网发布：php框架知乎编辑：程序博客网时间：2024/06/05 18:04

1、新创建一个元素节点, 并把该节点添加为文档中指定节点的子节点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript">//新创建一个元素节点, 并把该节点添加为文档中指定节点的子节点window.onload = function(){alert(1);//1. document.createElement(elementTagName)//新创建一个元素节点, 返回值为指向元素节点的引用//<li></li>var liNode = document.createElement("li");//2. 创建 "厦门" 的文本节点//document.createTextNode(string) 创建一个文本节点//参数为文本值, 返回该文本节点的引用. var xmText = document.createTextNode("厦门");//<li>厦门</li>liNode.appendChild(xmText);var cityNode = document.getElementById("city");//2. elementNode.appendChild(newChild): 为 elementNode//新添加 newChild 子节点, 该子节点将作为 elementNode 的最后//一个子节点. cityNode.appendChild(liNode);}</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atguigu"/></body></html>

2、练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">//需求: 点击 submit 按钮时,　检查是否选择 type, 若没有选择给出提示: "请选择类型"; //     检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";//若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 //需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值. window.onload = function(){function showContent(liNode){alert("^_^#" + liNode.firstChild.nodeValue);}var liNodes = document.getElementsByTagName("li");for(var i = 0; i < liNodes.length; i++){liNodes[i].onclick = function(){showContent(this);}}//1. 获取 #submit 对应的按钮 submitBtnvar submit = document.getElementById("submit");//2. 为 submitBtn 添加 onclick 响应函数submit.onclick = function(){//4. 检查是否选择 type, 若没有选择给出提示: "请选择类型"//4.1 选择所有的 name="type" 的节点 typesvar types = document.getElementsByName("type");//4.2 遍历 types, 检查其是否有一个 type 的 checked 属性存在, 就可说明//有一个 type 被选中了: 通过  if(元素节点.属性名) 来判断某一个元素节点是否有//该属性.var typeVal = null;for(var i = 0; i < types.length; i++){if(types[i].checked){typeVal = types[i].value;break;}}//4.3 若没有任何一个 type 被选中, 则弹出: "请选择类型". 响应方法结束: //return falseif(typeVal == null){alert("请选择类型");return false;}//5. 获取 name="name" 的文本值: 通过 value 属性: nameVal var nameEle = document.getElementsByName("name")[0];var nameVal = nameEle.value;//6. 去除 nameVal 的前后空格. var reg = /^\s*|\s*$/g;nameVal = nameVal.replace(reg, "");//使 name 的文本框也去除前后空格. nameEle.value = nameVal;//6. 把 nameVal 和 "" 进行比较, 若是 "" 说明只出入了空格, 弹出 "请输入内容"//方法结束: return falseif(nameVal == ""){alert("请输入内容");return false;}//7. 创建 li 节点var liNode = document.createElement("li");//8. 利用 nameVal 创建文本节点var content = document.createTextNode(nameVal);//9. 把 8 加为 7 的子节点liNode.appendChild(content);//11. 为新创建的 li 添加 onclick 响应函数liNode.onclick = function(){showContent(this);}//10. 把 7 加为选择的 type 对应的 ul 的子节点document.getElementById(typeVal)        .appendChild(liNode);//3. 在 onclick 响应函数的结尾处添加 return false, 就可以取消提交按钮的//默认行为. return false;}}</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br><form action="dom-7.html" name="myform"><input type="radio" name="type" value="city">城市<input type="radio" name="type" value="game">游戏name: <input type="text" name="name"/><input type="submit" value="Submit" id="submit"/></form></body></html>

0 0