一、什么是 HTML DOM?
HTML DOM 是:
HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。
换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
二、 HTML DOM 节点因此:通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。
正常的JavaScript的写法有如下三种:
1、这种方法使用于js不是很多得情况下使用,否则代码不好看,不好调试
<!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> </head> <body> <!-- HTML 代码和 JS 代码耦合在一起. --> <button onclick="alert('helloworld...');">ClickMe</button> </body> </html>2、由于html文档是从上到下编译的,所以如果把JavaScript放在head里面的话,可能执行时获取不到html里的对象属性
<!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> </head> <body> <button>ClickMe</button> </body> </html> <!-- 在整个 HTML 文档被加载后, 获取其中的节点. 把 script 节点放在 html 文档的最后 但不符合些 JS 代码的习惯. --> <script type="text/javascript"> //1. 获取 button var btns = document.getElementsByTagName("button"); alert(btns.length); //2. 为 button 添加 onclick 响应函数 btns[0].onclick = function(){ alert("helloworld!!"); } </script>
例如:
<!DOCTYPE html> <html> <body> <p id="intro">Hello World!</p> <p>本例演示 <b>getElementById</b> 方法!</p> <script> x=document.getElementById("intro"); document.write("<p>来自 intro 段落的文本:" + x.innerHTML + "</p>"); </script> </body> </html>结果为:
如果是这样的:
<!DOCTYPE html> <html> <body> <script> x=document.getElementById("intro"); document.write("<p>来自 intro 段落的文本:" + x.innerHTML + "</p>"); </script> <p id="intro">Hello World!</p> <p>本例演示 <b>getElementById</b> 方法!</p> </body> </html>结果是:
由于html文本在加载的时候会先调用window.onload=function(){}方法,所以一般推荐的JavaScript的写法是放在这个方法函数里面执行,如下操作:
<!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"> //window.onload 事件在整个 HTML 文档被完全加载后出发执行. //所以在其中可以获取到 HTML 文档的任何元素. window.onload = function(){ //方法写在这里面 } </script> </head> <body> <button>ClickMe</button> </body> </html>
访问HTML元素(节点)的三种方法:
<p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write("<p>来自 intro 段落的文本:" + x.innerHTML + "</p>"); </script>
<p>Hello World!</p> <p>DOM 很有用!</p> <p>本例演示 <b>getElementsByTagName</b> 方法。</p> <script> x=document.getElementsByTagName("p"); document.write("第一段的文本: " + x[0].innerHTML); </script>这个属性还有个好处是:可以在跟getElementById() 结合使用,先通过getElementById() 获取指定id对象,然后在这个id对象里进行获取指定标签名的所有元素
<p>Hello World!</p> <div id="main"> <p>DOM 很有用!</p> <p>本例演示 <b>getElementsByTagName</b> 方法。</p> </div> <script> x=document.getElementById("main").getElementsByTagName("p"); document.write("div 中的第一段的文本: " + x[0].innerHTML); </script>
例如:document.getElementsByClassName("intro");
//1. 先获取指定的那个元素节点 var nameNode = document.getElementById("name");
//2. 再读取指定属性的值 alert(nameNode.value);
//3. 设置指定的属性的值. nameNode.value = "dom";
//3. 获取 #city 节点的所有 li 子节点. var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);
//4. 获取指定节点的第一个子节点和最后一个子节点. alert(cityNode.firstChild);
alert(cityNode.lastChild);
节点的类型:元素节点,属性节点,文本节点
//通常情况下,操作属性节点直接通过“元素节点.属性名”的方式来读写属性值
//关于节点的属性: nodeType, nodeName, nodeValue
//在文档中, 任何一个节点都有这 3 个属性
//而 id, name, value 是具体节点的属性.
//1. 元素节点的这 3 个属性
例如:
<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="atguigu"/>
一般情况下不单独获取属性节点,而是通过元素节点,属性名的方式来读写属性值
综上所述:
<!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 ShowNodes(liNode){ alert("^_^#" + liNode.firstChild.nodeValue); } var liNodes = document.getElementsByTagName("li"); for(var i = 0;i<liNodes.length;i++){ liNodes[i].onclick = function(){ ShowNodes(this); } } //1. 获取 #submit 对应的按钮 submitBtn var submit = document.getElementById("submit"); //2. 为 submitBtn 添加 onclick 响应函数 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 == 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 false if(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(){ ShowNodes(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="demo1.html" name="form"> <input type="radio" name="type" value="city">城市 <input type="radio" name="type" value="game">游戏 <input type="text" name="name"/> <input type="submit" value="Submit" id="submit"/> </form> </body> </html>