大纲:
页面中引入js
定义函数的三种方式
window对象&form对象 (BOM)
document对象
Element对象
Node对象
DOM解析XML
<!DOCTYPE html> <html> <head> <title>01_页面中如何引入javascript.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--引入外部独立的javascript文件--> <script type="text/javascript" src="javascript.js"></script> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <script type="text/javascript"> /* * 在页面中引入javascript代码：使用script标签 * * type：指定使用的脚本语言 * * language：指定使用的脚本语言 * * src：引入外部javascript文件 */ </script> <body> This is my HTML page. <br> </body> <script type="text/javascript"> /* * 在页面中，任意位置都可以引入javascript代码 * * head标签中：一般情况，引入外部独立的javascript文件 * * body标签之前： * * 获取页面元素：不能 * * 定义函数： * * 定义函数即调用： * * 函数中，包含获取页面元素：不能 * * 函数中，与页面元素无关：可以 * * 定义函数不调用：可以 * * body标签之后：可以 */ // /** * */ //1 提示框中的IE或火狐图标：标签该内容支持IE及其他浏览器 //2 如果获取对应方法，需要手动增加"()" // document.add(); //区分大小写：与Java一样。 var hero; var Hero; //变量是弱类型的：与Java不一样。 //java，定义变量时，变量的类型已经明确 // Int i; // String str; //javascript，定义变量，初始化时明确类型 var str; //每行结尾的分号可有可无：与Java不一样。 alert("xxx") //ECMAScript基本上的内容与java保持一致，少部分内容不一致。 </script> </html>
定义函数的三种方式
<!DOCTYPE html> <html> <head> <title>01_定义函数的三种方式.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> //1 普通方式定义 /* * function 方法名(参数){ * 方法体 * } */ // function add(a,b){ // return a + b ; // } // alert(add(1,2)); //2 构造函数方式 /* * var 变量名 = new Function(参数n,方法体); * * javascript中具有一个Function类型 */ // var add = new Function('a','b','return a+b;'); // alert(add(1,3)); //3 直接量方式 /* * var 变量名 = function(参数){ * 方法体 * } */ // var add = function(a,b){ // return a+b; // } // alert(add(1,4)); </script> </html>
window对象
<!DOCTYPE html> <html> <head> <title>01_window对象.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> //使用window对象的属性和方法时，可以省略"window." //window对象的常用方法： //alert()：提示框 // alert("xxx"); //confirm()：确认框 // var flag = confirm("你确认要退出吗?"); // alert(flag); //prompt()：标准输入框，一般不用 var flag = prompt("请输入你的用户名：","username"); alert(flag); //open()和close() //setTimeout()和clearTimeout() //setInterval()和clearInterval() </script> </html>
form对象
<!DOCTYPE html> <html> <head> <title>02_FORM对象.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <form id="form1" action="test1.html" method="post"> <input type="text" id="username" name="username" value="username"> <input type="text" id="password" name="password" value="password"> <input type="button" id="login" value="登录"> </form> <form id="form2" name="form2" action="test2.html" method="post"> <input type="text" id="username" name="username" value="username"> <input type="text" id="password" name="password" value="password"> <input type="button" id="login" value="登录"> </form> </body> <script type="text/javascript"> //获取form1的action属性值 //访问表单的第一种：document.forms[索引值] // //1 获取form1 // var form1 = window.document.forms[0]; // // //2 获取对应的action属性 // alert(form1.action); //获取form2的action属性值 //访问表单的第二种：document.表单名 var form2 = document.form2; alert(form2.action); </script> </html>
document对象
<!DOCTYPE html> <html> <head> <title>01_查找页面标签.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <input type="text" id="username1" name="username" value="username"> <input type="text" id="username2" name="username" value="username"> <input type="text" id="username3" name="username" value="username"> <input type="text" id="username4" name="username" value="username"> <input type="text" id="username5" name="username" value="username"> </body> <script type="text/javascript"> //获取id="username"的标签的value属性值 //1 通过id属性获取对应标签 // var username = document.getElementById("username"); // // //2 打印value属性值 // alert(username.value); //获取name="username"的标签的value属性值 // var usernames = document.getElementsByName("username"); // // alert(usernames.length); //获取input标签的value属性值 var inputs = document.getElementsByTagName("input"); alert(inputs.length); </script> </html>
<!DOCTYPE html> <html> <head> <title>01_创建节点.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="sh" name="shanghai">上海</li> <li id="cq" name="chongqing">重庆</li> </ul> </body> <script type="text/javascript"> //创建<li id="tj" name="tianjin">天津</li>，添加到id="city"标签下 //1 创建<li id="tj" name="tianjin">天津</li> //1 创建元素节点<li></li> var liElement = document.createElement("li"); //2 创建文本节点"天津" var text = document.createTextNode("天津"); //3 将文本节点当作子节点，添加到li标签下 liElement.appendChild(text); //4 不能创建属性节点?Element对象 liElement.setAttribute("id","tj"); liElement.setAttribute("name","tianjin"); // document.createAttribute() //2 获取id="city"标签 var cityElement = document.getElementById("city"); //3 添加：appendChild()方法，添加到最后面 cityElement.appendChild(liElement); </script> </html>
Element对象
<!DOCTYPE html> <html> <head> <title>01_操作页面元素的属性.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <li id="bj" name="beijing">北京</li> </body> <script type="text/javascript"> //获取北京节点的name属性值 var bjElement = document.getElementById("bj"); alert(bjElement.getAttribute("name")); //output beijing //删除北京节点的name属性 bjElement.removeAttribute("name"); alert(bjElement.getAttribute("name")); //output null //设置北京节点的name属性 bjElement.setAttribute("name","beijing"); alert(bjElement.getAttribute("name")); //output beijing </script> </html>
<!DOCTYPE html> <html> <head> <title>02_在标签查找标签.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="sh" name="shanghai">上海</li> <li id="cq" name="chongqing">重庆</li> </ul> <select id="edu"> <option value="博士">博士</option> <option value="硕士">硕士</option> <option value="学士">学士</option> </select> </body> <script type="text/javascript"> //获取id="city"标签下的所有子节点 // //1 获取id="city"标签 // var cityElement = document.getElementById("city"); // // //2 获取所有子节点 // var children = cityElement.childNodes; //childNodes：返回的是子节点的集合 // // alert(children.length); //获取id="edu"标签的所有子节点 //select标签，浏览器解析时，自动增加一个文本内容 // //1 id="edu"标签 // var eduElement = document.getElementById("edu"); // // //2 获取所有子节点 // var children = eduElement.childNodes; // // alert(children.length); //在标签中查找标签，唯一有效的方法：getElementsByTagName() var eduElement = document.getElementById("edu"); var options = eduElement.getElementsByTagName("option"); alert(options.length); </script> </html>
Node对象
<!DOCTYPE html> <html> <head> <title>01_节点名称、值和类型.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <input type="text" id="username" name="username" value="username"> <p> 明天上课 </p> </body> <script type="text/javascript"> //获取元素节点的nodeName、nodeType和nodeValue // var input = document.getElementById("username"); // // alert(input.nodeName); //output input // alert(input.nodeType); //1 // alert(input.nodeValue); //null //获取文本节点的nodeName、nodeType和nodeValue // var pElement = document.getElementsByTagName("p")[0]; // // var text = pElement.childNodes[0]; // // alert(text.nodeName); //output #text // alert(text.nodeType); //output 3 // alert(text.nodeValue); //output 明天上课 //获取属性节点的nodeName、nodeType和nodeValue var input = document.getElementById("username"); var attr = input.getAttributeNode("name"); alert(attr.nodeName); //output name alert(attr.nodeType); //output 2 alert(attr.nodeValue); //output username /* * nodeName、nodeType和nodeValue * * 获取HTML页面的标签，nodeName知道是什么标签 * * 利用nodeType的值，判断获取的是什么节点 * * 获取文本节点的文本内容，利用nodeValue */ </script> </html>
<!DOCTYPE html> <html> <head> <title>02_父节点、子节点和同辈节点.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="sh" name="shanghai">上海</li> <li id="cq" name="chongqing">重庆</li> </ul> </body> <script type="text/javascript"> //获取上海节点的父节点 // //1 获取上海节点 // var shElement = document.getElementById("sh"); // // //2 获取上海节点父节点 // //其实parentElement和parentNode的效果是一样的，但是parentElement只支持IE // var parent = shElement.parentNode; // // //3 测试 // alert(parent.id); /* * 获取对应标签的属性值 * * 标签.属性名：有些浏览器，不支持直接访问属性 * * 标签.getAttribute(属性名)：更通用 */ //获取id="city"标签的第一个子节点 // //1 获取id="city"标签 // var cityElement = document.getElementById("city"); // // //2 第一个子节点 // var bjElement = cityElement.firstChild; // // //3 测试 // alert(bjElement.getAttribute("name")); //获取id="city"标签的最后一个子节点 // //1 获取id="city"标签 // var cityElement = document.getElementById("city"); // // //2 最后一个子节点 // var cqElement = cityElement.lastChild; // // //3 测试 // alert(cqElement.getAttribute("name")); //获取id="city"标签的第二个子节点 // //1 获取id="city"标签 // var cityElement = document.getElementById("city"); // // //2 第二个子节点 // var shElement = cityElement.childNodes[1]; // // //3 测试 // alert(shElement.getAttribute("name")); //获取上海节点的上一个兄弟节点 // //1 获取上海节点 // var shElement = document.getElementById("sh"); // // //2 上一个兄弟节点 // var bjElement = shElement.previousSibling; // // alert(bjElement.getAttribute("name")); //获取上海节点的下一个兄弟节点 //1 获取上海节点 var shElement = document.getElementById("sh"); //2 上一个兄弟节点 var cqElement = shElement.nextSibling; alert(cqElement.getAttribute("name")); </script> </html>
<!DOCTYPE html> <html> <head> <title>03_检测子节点和属性.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <input type="text" id="username" name="username" value="username"> <p> 明天上课 </p> </body> <script type="text/javascript"> //判断input标签是否含有子节点 var inputElement = document.getElementById("username"); //hasChildNodes()方法：返回值是Boolean值，false是不包含，true是包含 alert(inputElement.hasChildNodes()); // var pElement = document.getElementsByTagName("p")[0]; // // alert(pElement.hasChildNodes()); //hasAttributes()：判断是否含有属性，不支持IE浏览器 </script> </html>
<!DOCTYPE html> <html> <head> <title>04_插入节点.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="sh" name="shanghai">上海</li> <li id="cq" name="chongqing">重庆</li> </ul> </body> <script type="text/javascript"> //创建<li id="tj" name="tianjin">天津</li>，添加到重庆标签的前面 // //1 创建<li id="tj" name="tianjin">天津</li> // //1 创建元素节点<li></li> // var liElement = document.createElement("li"); // // //2 创建文本节点"天津" // var text = document.createTextNode("天津"); // // //3 将文本节点当作子节点，添加到li标签下 // liElement.appendChild(text); // // //4 不能创建属性节点?Element对象 // liElement.setAttribute("id","tj"); // liElement.setAttribute("name","tianjin"); // // //2 获取重庆节点 // var cqElement = document.getElementById("cq"); // // //不能使用parent.appendChild(child) // // //3 获取重庆的父节点 // var parent = cqElement.parentNode; // // //4 parent.insertBefore(newChild,oldChild) // parent.insertBefore(liElement,cqElement); //创建<li id="tj" name="tianjin">天津</li>，添加到上海标签的后面 //1 创建<li id="tj" name="tianjin">天津</li> //1 创建元素节点<li></li> var liElement = document.createElement("li"); //2 创建文本节点"天津" var text = document.createTextNode("天津"); //3 将文本节点当作子节点，添加到li标签下 liElement.appendChild(text); //4 不能创建属性节点?Element对象 liElement.setAttribute("id","tj"); liElement.setAttribute("name","tianjin"); //2 获取上海节点 var shElement = document.getElementById("sh"); //3 获取上海的父节点 var parent = shElement.parentNode; //4 insertAfter()没有，只能使用insertBefore() var cqElement = shElement.nextSibling; parent.insertBefore(liElement,cqElement); </script> </html>
<!DOCTYPE html> <html> <head> <title>05_删除节点.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="sh" name="shanghai">上海</li> <li id="cq" name="chongqing">重庆</li> </ul> </body> <script type="text/javascript"> //删除北京节点，parent.removeChild(child) //1 获取北京节点 var bjElement = document.getElementById("bj"); //2 获取北京节点的父节点 var parent = bjElement.parentNode; //3 删除 parent.removeChild(bjElement); </script> </html>
<!DOCTYPE html> <html> <head> <title>06_替换节点.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="sh" name="shanghai">上海</li> <li id="cq" name="chongqing">重庆</li> </ul> <ul id="game"> <li id="fk" name="fankong">反恐<p>精英</p></li> <li id="ms" name="moshou">魔兽</li> <li id="xj" name="xingji">星际</li> </ul> </body> <script type="text/javascript"> //当点击北京节点时，北京节点被反恐节点替换 // document.getElementById("bj").onclick = function(){ // //1 获取北京节点 // var bjElement = document.getElementById("bj"); // // //2 获取反恐节点 // var fkElement = document.getElementById("fk"); // // //3 获取北京节点的父节点 // var parent = bjElement.parentNode; // // //4 替换 // parent.replaceChild(fkElement,bjElement); // // } document.getElementById("bj").onclick = function(){ //1 获取北京节点 // var bjElement = document.getElementById("bj"); //2 获取反恐节点 var fkElement = document.getElementById("fk"); //3 获取北京节点的父节点 var parent = this.parentNode; //4 替换 parent.replaceChild(fkElement,this); } //this的用法：必须指代HTML页面中的具体元素 </script> </html>
<!DOCTYPE html> <html> <head> <title>07_复制节点.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <button id="login">登录</button> <p> 段落 </p> </body> <script type="text/javascript"> //要求复制button按钮，追加到p标签上 //1 获取button按钮 var button = document.getElementById("login"); //2 复制button按钮 //cloneNode()方法：只复制了自身节点，接收参数：Boolean值，是否复制子节点 var copy = button.cloneNode(true); //3 获取p标签 var pElement = document.getElementsByTagName("p")[0]; //4 追加 pElement.appendChild(copy); </script> </html>
<!DOCTYPE html> <html> <head> <title>08_innerHTML属性.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <div id="div"></div> </body> <script type="text/javascript"> //将<h1>今天</h1>，添加到div中 //第一种方式 // //1 创建<h1>今天</h1> // var h1Element = document.createElement("h1"); // var text = document.createTextNode("今天"); // h1Element.appendChild(text); // // //2 获取div // var divElement = document.getElementById("div"); // // //3 插入 // divElement.appendChild(h1Element); document.getElementById("div").innerHTML = "<h1>今天</h1>"; /* * innerHTML属性 * * 多与div和span标签 * * WEB1.0与WEB2.0的区别： * * WEB1.0：垂直门户网站(以内容为主) * * WEB2.0：社交网站(以人的关系为主) * * WEB3.0：基于移动互联网的社交网站 */ </script> </html>
DOM解析XML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test01.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="util.js"></script> </head> <body> <select id="province" name="province"> <option value="">请选择....</option> <option value="吉林省">吉林省</option> <option value="辽宁省">辽宁省</option> <option value="山东省">山东省</option> </select> <select id="city" name="city"> <option value="">请选择.....</option> </select> </body> <script type="text/javascript"> //select标签：所有事件 document.getElementById("province").onchange = function(){ //清空 var cityElement = document.getElementById("city"); var options = cityElement.getElementsByTagName("option"); // for(var z=1;z<options.length;z++){ // cityElement.removeChild(options[z]); // z--; // } for(var z=options.length-1;z>0;z--){ cityElement.removeChild(options[z]); } //1 页面选中的省份信息 var provinceValue = this.value; //2 创建XML解析器 var docXml = parseXML("cities.xml"); //DOM解析XML，只能使用getElementsByTagName(tagname) //3 获取所有province标签 var provinceXmlElements = docXml.getElementsByTagName("province"); //4 遍历province for(var i=0;i<provinceXmlElements.length;i++){ var provinceXmlElement = provinceXmlElements[i]; var provinceXmlValue = provinceXmlElement.getAttribute("name"); //5 对比 if(provinceValue==provinceXmlValue){ //6 获取对应所有city标签 var cityXmlElements = provinceXmlElement.getElementsByTagName("city"); //7 遍历所有city标签 for(var j=0;j<cityXmlElements.length;j++){ var cityXmlElement = cityXmlElements[j]; var cityXmlValue = cityXmlElement.firstChild.nodeValue; //8 添加 //<option value="长春">长春</option> var option = document.createElement("option"); option.setAttribute("value",cityXmlValue); var text = document.createTextNode(cityXmlValue); option.appendChild(text); cityElement.appendChild(option); } } } } </script> </html>
xml文件:
<?xml version="1.0" encoding="GB2312"?> <china> <province name="吉林省"> <city>长春</city> <city>吉林市</city> <city>四平</city> <city>松原</city> <city>通化</city> </province> <province name="辽宁省"> <city>沈阳</city> <city>大连</city> <city>鞍山</city> <city>抚顺</city> <city>铁岭</city> </province> <province name="山东省"> <city>济南</city> <city>青岛</city> <city>威海</city> <city>烟台</city> <city>潍坊</city> </province> </china>
js文件:
function parseXML(fileXmlName){ var xmlDoc; try {//Internet Explorer 创建一个空的xml文档 xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); } catch (e) { try {//Firefox, Mozilla, Opera, 创建一个空的xml文档 xmlDoc = document.implementation.createDocument("", "", null); } catch (e) { } } //关闭异步加载 xmlDoc.async = false; //加载xml文件 xmlDoc.load(fileXmlName); return xmlDoc; }