1.节点的属性
| 节点的属性：所有节点都有的属性 | 元素节点， 属性节点， 文本节点 |
| nodeType | 只 读 属 性 |
| nodeName | 返回对应节点的名字，只读属性 |
| nodeVALUE 可读写属性 | null 属性值， 文本值 |
2. 创建一个元素节点:
createElement(): 按照给定的标签名创建一个新的元素节点.
方法只有一个参数：被创建的元素节点的名字, 是一个字符串.
方法的返回值：是一个指向新建节点的引用指针.
返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.
3. 创建一个文本节点:
createTextNode(): 创建一个包含着给定文本的新文本节点.
这个方法的返回值是一个指向新建文本节点引用指针.
它是一个文本节点, 所以它的 nodeType 属性等于 3.
方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里
4. 为元素节点添加子节点:
appendChild(): var reference = element.appendChild(newChild):
给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
方法的返回值是一个指向新增子节点的引用指针.
dom7.html
<!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() { //新创建的一个元素节点，并把该节点添加为文档中指定节点的子节点 var liNode = document.createElement("li"); //创建武汉的文本节点 ,createTextNode(String), var whText = document.createTextNode("武汉"); liNode.appendChild(whText) var cityNode = document.getElementById("city"); 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> name： <input type="text" name="username" id="name" value="xiaoxiaolin"> </body> </html>
练习2：
exe3.html
<!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"> //需求1：点击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);//当前的节点 } } //id 用#表示 //1. 获取 #submit 对应的按钮 submitBtn var submit =document.getElementById("submit"); //2.为submit添加响应函数 submit.onclick = function(){ //4.检查是否选择type，若没有选择给出提示："没有选择" //4.1选择所有的name = type,的节点types var 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 false if (!typeVal) { alert("请选择类型"); return false; } //alert(typeVal); //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; //7.把nameVal和""进行比较，若是"" 说明只输入空格，弹出"请输入内容" if (nameVal == "") { alert("请输入内容"); return false; } //8.创建li节点 var liNode =document.createElement("li"); //9.利用 nameVal 创建文本节点 var content = document.createTextNode("nameVal"); //10.把创建的文本节点作为刚创建li节点的子节点 liNode.appendChild(content); //12.为新创建的li添加 onclick响应函数 liNode.onclick = function(){ showContent(this); } //11.把上面的节点加为选择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>